Qt：盒子模型的理解

在使用QSS美化控件的样式时，常用到一些属性是和盒子模型相关的，下面就来谈谈什么是盒子模型。

盒子模型是指，Qt中的大部分控件符合盒子模型的特征，盒子，顾名思义，描述一个控件是矩形的形状。

首先，在Qt中认识一个控件，是从四个值认识，0,0,200,100。

四个值分别是坐标x、y和大小（宽度、高度）。

一个控件的这四个值是确定的，那么这个控件的大致轮廓也是确定的。

而盒子模型就是在描述，在这个轮廓中的控件符合盒模型

首先，认识 盒模型的第一个属性，Border，它是边界的意思，就是一条线，一般QSS设置它，是在设置它的粗细，而Margin，就是在设置Border到轮廓的距离。

比如设置Margin，即外边距，就是在设置边界到轮廓的距离是多长。

QPushButton{
color:rgb(108, 123, 255);
border:1px solid;
margin:20px;}

 

那么参考上面这样，我们把这个margin的值设置到80，这个边界就会距离轮廓变得越远。

QPushButton{
color:rgb(108, 123, 255);
border:1px solid;
margin:80px;}

 

接下来，谈Border，就是边界的粗细，我们保持外边距不变，观察Border由细变粗，带来的变化。

QPushButton{
color:rgb(108, 123, 255);
border:2px solid;
margin:20px;}

 

下面我们把边界设置到15px，那么这个外边距，也就是Border到轮廓的距离，不会变，而这个边界变粗，占用内部的像素。

剩下的属性，就是Padding，和文本，关于内边距，也是可以设置的，但是往往感知可能不强，对于Padding和文本，其实可以这样想，文本文字到边界Border的距离就是Padding