Qt之Box Model

概述

当使用Qt样式表的时候，每一个控件都被看做是一个带有四个同轴矩形的方盒，这四个矩形分别是：

• margin rectangle
• border rectangle
• padding rectangle
• content rectangle

下面的box模型对此进行了详细的描述。

box model

四个同心矩形在概念上如下所示：

• margin 矩形落在border 的外面。
• border在margin和padding之间。
• padding落在border和contents之间。
• 当我们移除了margin、border以及padding之后，剩下的就是contents。

默认情况下，margin、border、padding都为零，在这种情况下，四个矩形会重合在一起。

你可以使用background-image为控件设定一个背景。默认情况下，background-image只会被画在border以内，但我们可以通过设置background-clip属性来改变它。你可以通过使用background-repeat和background-origin来控制背景图片的重复方式和起点。

背景图片并不会随着控件的尺寸改变而改变。为了提供一个随着控件尺寸变化而变化的“皮肤”或者背景，我们必须使用border-image属性。当我们使用border-image的时候，background-image可以不用，因为即使你用了也会被border-image覆盖。

除此之外，image属性可以被用来在border-image上面再绘制一张图片。指定的image不会因为自己的长宽比与控件不符合而被裁剪。我们可以通过image-position来设置image的摆放位置。除此之外，image是可以设置SVG的。

对一个控件的一般渲染步骤如下：

• 设置这个渲染操作的剪辑(border-radius)
• 绘制背景图片(background-image)
• 绘制边界(border-image, border)
• 绘制最上层图片(image)

margin

如下图所示，左边margin:10px，右边margin:20px

border

如下所示，右边带了5px的红色border，从图中我们可以看出，当border属性被设置了以后，margin就会消失。

padding

左边的的padding为24，右边的padding为6，中间的image是放在contents中的