Box Model与控件样式

一、Box Model样式

1、当使用style sheets的时候，所有的控件都被当做是有4个同心矩形组成的方框模型。即：

• margin rectangle ：最外层的边框矩形
• border rectangle ：边界矩形
• padding rectangle ：填充边界矩形
• content rectangle ：显示内容的矩形

2、 margin、border-width、padding默认值都是 0，所以默认情况下，这四个矩形是重叠的。
3、background-color、background-image等属性都是作用在 border rectangle 这个范围的矩形中的，margin rectangle 宽度的部分不包含在内。

---

二、不同方框模型使用

1、最外层的 margin rectangle

1. 该属性可以指定 margin的宽度，可以默认一起指定，也可以单独指定。
   如：Btn01和Btn02相同，指定Btn01的margin宽度为20px。
2. 此时等价于依次默认 margin-top,margin-right,margin-bottom,margin-left 都是20px的宽度。

ui.btn01->setStyleSheet("QPushButton#btn01 {background-color:rgba(0,200,200,0.8);margin:20px;}");

2、次外层的 border rectangle

1. 常用的矩形方框就是border rectangle，其附带有更多的属性可以控制控件的UI。如：

   • border-width：控制border的宽度，若只默认设定一个值，则等价于按顺序border-top-width、border-right-width、border-bottom-width、border-left-width都相等。也可以单独设定各个部分的宽度值。
   • border-style：设定控件边界宽度的样式
   • border-color：设置控件border部分宽度的颜色
   • border-radius：设置border-rectangle矩形的圆角半径，默认是四个圆角半径一样大小，可以单独设定每隔圆角大小。
   • border-image：设定空间的填充图片，此项用的最为广泛。因为该属性中的图片会随控件的拉伸而自动的拉伸进行填充。

2. 应用示例，如设定QPushButton的一些对应border属性

ui.btn01->setStyleSheet("QPushButton#btn01 {background-color:rgba(0,200,200,0.8);border-width:20px;border-style:outset;border-radius:40px;border-color:blue;}");
ui.btn02->setStyleSheet("QPushButton#btn02 {background-color:rgba(0,200,200,0.8);border-width:10px;border-style:solid;border-radius:20px;border-color:red;}");

3、填充矩形padding rectangle

1. 该属性可以指定填充的宽度，如指定的宽度太大的话，可能会留给content显示的控件就很少，导致内容只能显示出一部分。如当指定Btn01的对应padding很大时，其内容将会有一部分被遮挡。
2. 分别设置不同位置的padding时，会导致content的大小发生变化。

ui.btn01->setStyleSheet("QPushButton#btn01 {background-color:rgba(0,200,200,0.8);padding:90px}");

ui.btn02->setStyleSheet("QPushButton#btn02 {background-color:rgba(0,200,200,0.8);padding-top:80px;padding-right:90px;}");