說起樣式表，不得不提的就是盒子模型了，今天小豆君就來給大家介紹下盒子模型。
上圖是一張盒子模型圖。
對於一個窗口，其包括四個矩形邊框。以中間的邊框矩形（border）為基准，在border外側的是外邊框矩形（margin），在border內側的是內邊框矩形（padding），在pandding內側的是內容區矩形（content）。
在默認情況下，外邊框和內邊框的寬度為0，因此，這四個矩形區域就會重疊在一起。但你可以通過padding，margin屬性來設置內外矩形的邊寬。
矩形邊框是用來設置窗口背景的。下面，我就來講講如何用這四個矩形來設置窗口背景。
1 為指定的矩形框，設置背景圖片
為控件設置背景圖片可以使用background-image屬性，例如
QLabel{bakcground-image:url(:/background.png;)}
默認情況下，該背景圖片會設置在border矩形區域中，但是，你可以使用bakground-clip來指定其繪制在margin，padding或content矩形區域中。
例如
QLabel {
background-image: url(:/images/header.png);
background-clip: padding;
}
2 指定背景圖片繪制起始點
有時我們需要指定從圖片的哪個起始點來繪制背景，這時，你可以通過background-position來指定，默認情況下是從左上角開始繪制（top left）。
例如
QLabel {
background: url(:/images/footer.png);
background-position: bottom left;
background-origin:padding;
}
該樣式指定了從圖片的右下角開始繪制背景到padding矩形區域中。
3 指定背景圖片的重復樣式
使用background-image會使用圖片的原始大小來繪制背景，如果圖片區域小於背景區域，則會重復使用該圖片進行背景填充，而重復方式可以通過background-repeat來指定。如果想通過圖片的縮放來填充背景圖的話，可以使用border-image屬性來設置。
例如
QLabel {
background-image: url(F:/Picture/Qt/small.jpg);
background-repeat:repeat-x ;
}
指定了只在水平方向重復。
4 使用其他屬性設置背景圖片
我們還可以使用image和border-image來設置控件的背景圖片。
image:設置背景圖片，當矩形區域大於圖片尺寸時，圖片不會被放大。並且默認情況下顯示在矩形區域中心，可以通過image-position來指定位置。
border-image:會通過縮放來填滿整個矩形區域。
image border-image background-image繪制順序：image繪制在border-image之上，border-image繪制在background-image之上。
5 例子
下面是一個例子來幫助大家加深記憶。
好了，關於盒子模型及背景設置的知識就分享到這里啦，最后不要忘記點贊哦。
更多分享請關注微信公眾號：小豆君Qt分享，只要關注，便可加入C++\Qt交流群，一起學習。
https://zhuanlan.zhihu.com/p/36474238