从零开始学Qt(22):QSS详解(3)- 盒子模型

使用样式表时，每个widget都被视为具有四个同心矩形的盒子：边距（margin）矩形、边框（border）矩形、填充（padding）矩形和内容（content）矩形。盒子模型（box model）对此进行了更详细的描述。

四个同心矩形的概念如下：

• （1）margin在border之外。
• （2）border绘制在margin和padding之间。
• （3）padding位于border内部，介于border和实际内容之间。
• （4）除了margin、border和padding，原始控件或子控件中剩下的就是content。

margin、border和padding的宽度默认为零。在这种情况下，所有四个矩形完全重合。

你可以使用background-image属性为widget指定背景。默认情况下，仅为border内的区域绘制背景图像。这可以使用background-clip属性进行更改。可以使用background-repeat和background-origin来控制背景图像的重复和原点。

背景图像不随widget的大小而缩放。要提供随widget大小缩放的“皮肤”或背景，必须使用border-image。由于border-image属性也提供了背景，因此在指定border-image时不需要指定background-image。在这种情况下，如果同时指定了这两个选项，则border-image将覆盖background-image。

此外，image属性可用于在border-image上绘制图像。当大小与widget的大小不匹配时，指定的图像不会平铺或拉伸，可使用image-position属性指定其对齐方式。与background-image和border-image不同，可以在image属性中指定SVG，在这种情况下，image会根据控件大小自动缩放。

渲染一个规则的步骤如下：

• （1）为整个渲染操作设置剪辑（border-radius）
• （2）绘制背景（background-image）
• （3）绘制边框（border-image, border）
• （4）绘制覆盖图像（image）