概述
當使用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來控制背景圖片的重複方式和起點。
A background-image does not scale with the size of the widget. To provide a “skin” or background that scales along with the widget size, one must use border-image. Since the border-image property provides an alternate background, it is not required to specify a background-image when border-image is specified. In the case, when both of them are specified, the border-image draws over the background-image.
背景圖片並不會隨着控件的尺寸改變而改變。爲了提供一個隨着控件尺寸變化而變化的“皮膚”或者背景，我們必須使用border-image屬性。當我們使用border-image的時候，background-image可以不用，因爲即使你用了也會被border-image覆蓋。
In addition, the image property may be used to draw an image over the border-image. The image specified does not tile or stretch and when its size does not match the size of the widget, its alignment is specified using the image-position property. Unlike background-image and border-image, one may specify a SVG in the image property, in which case the image is scaled automatically according to the widget size.
除此之外，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中的
