目录
[3、 样式表中的状态选择器](#3、 样式表中的状态选择器)
[2.1 margin](#2.1 margin)
[2.2 border](#2.2 border)
[2.3 padding](#2.3 padding)
[2.4 content](#2.4 content)
[2.1 设置margin、border、padding、content](#2.1 设置margin、border、padding、content)
[2.2 改变盒子模型大小的计算方式](#2.2 改变盒子模型大小的计算方式)
1、伪状态的样式表
在Qt中，我们可以为不同的控件状态设置不同的样式，这些状态可以是鼠标悬停、获得焦点、失去焦点、选中等。Qt中通过状态样式表来实现这种功能。Qt Style Sheets Reference关键字对应帮助文档的List of Pseudo-States 一项中列 出了Qt支待的所有伪状态。
1、常见的状态
在Qt中，常见的控件状态有：
javascript
:hover 鼠标悬停
:pressed 鼠标按下
:checked 选中
:unchecked 未选中
:disabled 禁用
:enabled 可用
:focused 获得焦点
:unfocused 失去焦点QT手册中，罗列了控件所有的伪状态：
javascript
:active This state is set when the widget resides in an active window.
:adjoins-item This state is set when the ::branch of a QTreeView is adjacent to an item.
:alternate This state is set for every alternate row whe painting the row of a QAbstractItemView when QAbstractItemView::alternatingRowColors() is set to true.
:bottom The item is positioned at the bottom. For example, a QTabBar that has its tabs positioned at the bottom.
:checked The item is checked. For example, the checked state of QAbstractButton.
:closable The items can be closed. For example, the QDockWidget has the QDockWidget::DockWidgetClosable feature turned on.
:closed The item is in the closed state. For example, an non-expanded item in a QTreeView
:default The item is the default. For example, a default QPushButton or a default action in a QMenu.
:disabled The item is disabled.
:editable The QComboBox is editable.
:edit-focus The item has edit focus (See QStyle::State_HasEditFocus). This state is available only for Qt Extended applications.
:enabled The item is enabled.
:exclusive The item is part of an exclusive item group. For example, a menu item in a exclusive QActionGroup.
:first The item is the first (in a list). For example, the first tab in a QTabBar.
:flat The item is flat. For example, a flat QPushButton.
:floatable The items can be floated. For example, the QDockWidget has the QDockWidget::DockWidgetFloatable feature turned on.
:focus The item has input focus.
:has-children The item has children. For example, an item in a QTreeView that has child items.
:has-siblings The item has siblings. For example, an item in a QTreeView that siblings.
:horizontal The item has horizontal orientation
:hover The mouse is hovering over the item.
:indeterminate The item has indeterminate state. For example, a QCheckBox or QRadioButton is partially checked.
:last The item is the last (in a list). For example, the last tab in a QTabBar.
:left The item is positioned at the left. For example, a QTabBar that has its tabs positioned at the left.
:maximized The item is maximized. For example, a maximized QMdiSubWindow.
:middle The item is in the middle (in a list). For example, a tab that is not in the beginning or the end in a QTabBar.
:minimized The item is minimized. For example, a minimized QMdiSubWindow.
:movable The item can be moved around. For example, the QDockWidget has the QDockWidget::DockWidgetMovable feature turned on.
:no-frame The item has no frame. For example, a frameless QSpinBox or QLineEdit.
:non-exclusive The item is part of a non-exclusive item group. For example, a menu item in a non-exclusive QActionGroup.
:off For items that can be toggled, this applies to items in the "off" state.
:on For items that can be toggled, this applies to widgets in the "on" state.
:only-one The item is the only one (in a list). For example, a lone tab in a QTabBar.
:open The item is in the open state. For example, an expanded item in a QTreeView, or a QComboBox or QPushButton with an open menu.
:next-selected The next item (in a list) is selected. For example, the selected tab of a QTabBar is next to this item.
:pressed The item is being pressed using the mouse.
:previous-selected The previous item (in a list) is selected. For example, a tab in a QTabBar that is next to the selected tab.
:read-only The item is marked read only or non-editable. For example, a read only QLineEdit or a non-editable QComboBox.
:right The item is positioned at the right. For example, a QTabBar that has its tabs positioned at the right.
:selected The item is selected. For example, the selected tab in a QTabBar or the selected item in a QMenu.
:top The item is positioned at the top. For example, a QTabBar that has its tabs positioned at the top.
:unchecked The item is unchecked.
:vertical The item has vertical orientation.
:window The widget is a window (i.e top level widget)2.、使用状态样式表
使用状态样式表可以为控件不同的状态设置不同的样式。例如，我们可以为一个QPushButton控件在不同状态下设置不同的背景色：
javascript
QPushButton {
background-color: red;
}
QPushButton:hover {
background-color: green;
}
QPushButton:pressed {
background-color: blue;
}3、 样式表中的状态选择器
Qt中的状态选择器是以冒号(:)开头的伪类选择器，用于匹配控件不同的状态。例如：
javascript
QLineEdit:hover {
border: 1px solid red;
}
QCheckBox:checked {
background-color: yellow;
}2、样式盒子模型
在Qt中，样式盒子模型是指每个控件具有的四个矩形框：margin（外边距）、border（边框）、padding（内边距）和content（内容区域）。这些框可以用来调整控件的外观和布局。默认情况下，外边距、边框、内边框默认都是0，正好4个矩形框重合。
样式盒子模型是一种网页设计概念，它描述了HTML元素的布局和渲染方式。在Qt中，每个控件都有自己的样式盒子模型。
1、Qt样式盒子模型
2.1 margin
margin指的是控件的外边距，它会影响控件与其它元素之间的距离。可以使用margin属性来设置控件的外边距，语法如下：
QWidget {
margin: 10px;
}
上述代码表示将QWidget控件的外边距设置为10像素。
2.2 border
border指的是控件的边框，包括边框的颜色、样式和宽度等属性。可以使用border属性来设置控件的边框，语法如下：
QWidget {
border: 2px solid black;
}
上述代码表示将QWidget控件的边框设置为2像素宽的实线边框，颜色为黑色。
QPushButton#btn1{
border:1px solid #0000ff; 设置边框大小，边框颜色
border-radius:50px; 设置圆角边框
}
上述代码表示将btn1按钮的边框设置为1像素宽的实线边框，颜色为蓝色，并且设置了圆角边框。
2.3 padding
padding指的是控件的内边距，它会影响控件内部元素与边框之间的距离。可以使用padding属性来设置控件的内边距，语法如下：
QWidget {
padding: 10px;
}
上述代码表示将QWidget控件的内边距设置为10像素。
2.4 content
content指的是控件的内容区域，它是控件内部除边框、内边距之外的区域。可以使用width和height属性来设置控件的内容区域大小，如下所示：
QWidget {
width: 200px; height: 100px;
}
上述代码表示将QWidget控件的内容区域大小设置为200像素宽、100像素高。
2、应用样式盒子模型
2.1 设置margin、border、padding、content
可以通过设置控件的margin、border、padding和content属性来调整控件的大小和布局。例如：
QLabel {
background-color: blue;
border: 2px solid black;
padding: 10px;
margin: 20px;
}
2.2 改变盒子模型大小的计算方式
可以使用box-sizing属性来改变盒子模型的大小。例如：
我们有一个宽度为 100px、高度为 50px 的按钮，边框为 2px，内边距为 10px，如果不使用 box-sizing 属性，那么按钮的实际宽度应该是 124px（100px + 2px * 2 + 10px * 2），而使用 box-sizing: border-box 后，按钮的实际宽度仍然是 100px，同时边框和内边距的尺寸也被计算在内
QPushButton {
width: 100px;
height: 50px;
padding: 10px;
border: 2px solid black;
box-sizing: border-box;
}