【CSS】盒模型

盒模型

box-sizing 用于定义盒模型的计算方式。有以下 2 种取值：

1. content-box：默认值。元素的宽度和高度只包含了内容。如果给元素设置了 padding 和 border，那么它们会被加到元素的实际宽高上，导致元素的实际尺寸比设定的尺寸要大。
2. border-box：元素的宽度和高度包含了内容、padding 和 border。如果给元素设置了 padding 和 border，那么它们会从元素的内容区域中减去，使得元素的实际尺寸与设定的尺寸相同。

padding

padding 用于设置元素的内边距。

padding 是一个简写属性，包括以下 4 个子属性：

1. padding-top：上内边距。
2. padding-right：右内边距。
3. padding-bottom：下内边距。
4. padding-left：左内边距。

padding 可以设置 1 ~ 4 个属性值：

1. 一个属性值：一起设置上下左右。
2. 两个属性值：分别设置上下、左右。
3. 三个属性值：分别设置上、左右、下。
4. 四个属性值：分别设置上右下左。

padding 的值可以是以下 3 种：

1. ：使用一个有单位的长度值。可以使用负值。
2. ：使用一个百分比值，相对于元素的包含块的宽度。
3. inherit：继承父元素的内边距。

border

border 用于设置元素的边框的样式、宽度和颜色。

border 属性是一个简写属性，包括 3 个子属性：

1. border-width：规定边框的宽度，可以是任意数值配合单位，或者是关键字（如 thin、medium、thick）。
2. border-style：规定边框的样式，可以是 none（无边框）、solid（实线）、dotted（点线）、dashed（虚线）、double（双线）、groove（凹槽）、ridge（脊）、inset（嵌入）或者 outset（突出）。
3. border-color：规定边框的颜色。

border: 5px solid blue;

这组子属性可以设置 1 ~ 4 个值：

1. 一个属性值：一起设置上下左右。
2. 两个属性值：分别设置上下、左右。
3. 三个属性值：分别设置上、左右、下。
4. 四个属性值：分别设置上右下左。

此外，border 还能被拆分为如下 4 个子属性：

1. border-top：上边框。
2. border-right：右边框。
3. border-bottom：下边框。
4. border-left：左边框。

每个子属性可以设置对应边框的 width、style 和 color。

border-bottom: 5px solid blue;

2 组子属性可以搭配使用：

• border-top-width、border-right-width、border-bottom-width、border-left-width
• border-top-style、border-right-style、border-bottom-style、border-left-style
• border-top-color、border-right-color、border-bottom-color、border-left-color

border-bottom-color: white;