CSS（三）盒子模型
目录
Content
Padding
Border
Margin
盒子模型计算方式
使用 box-sizing 属性控制盒子模型的计算
所有的HTML元素都可以看作像下图这样一个矩形盒子：
这个模型包括了四个区域：content（内容区域）、padding（内边距）、border（边框）和 margin（外边距）
Content
内容区域是盒子模型的最核心部分，包含了元素的实际内容，例如文本、图片、视频、按钮等
内容区域的大小由元素的 width 和 height 属性决定。通常，CSS 的 width 和 height 只会影响内容区域的尺寸，padding、border 和 margin 不会计入该区域的尺寸。例如想要设置一个 div 元素的宽度为 300px，那么该 div 的内容区域的宽度就为 300px：
div {
width: 300px;
height: 150px;
}
Padding
内边距是内容区域与边框之间的空间，通过调整 padding，可以控制内容与边框之间的距离
例如，增加内边距可以使文本远离边框，提升可读性
div {
padding: 20px;
}
上述代码会在 div 元素的所有边缘（上、右、下、左）添加 20px 的内边距
同样，也可以单独设置四个方向的内边距：padding-top、padding-right、padding-bottom、padding-left
Border
边框围绕内容区域和内边距的外部，是一个可视的边界。边框的样式、宽度和颜色可以自定义
影响元素边界的属性：border-width、border-style、border-color
div {
border: 3px solid black;
}
上述代码会给 div 元素添加一个 3px 宽的黑色实线边框
圆角边框：
使用border-radius属性来设置圆角框的半径
border-radius:10pxborder-radius 可以接收 1 到 4 个值，决定了每个角的半径
- 1个值：四个角相同
- 2个值：第一个值为水平半径，第二个值为垂直半径
- 3个值：前两个为左右角，最后一个为上下角的半径
- 4个值：依次为左上、右上、右下、左下的圆角半径
Margin
外边距是盒子与其他元素之间的空隙，用来控制元素间的距离
外边距不会影响元素的实际大小，但它会改变元素与其他元素之间的间距
div {
margin: 20px;
}
上述代码会在 div 元素的四个方向添加 20px 的外边距，增加元素与其他元素之间的间距
同样也可以设置四个单独方向的外边距：margin-top、margin-right、margin-bottom、margin-left
控制块居中：
margin:auto;盒子模型计算方式
默认情况下，CSS 中的宽度和高度只包括 内容区域，不包括内边距、边框和外边距。
因此，元素的总大小大于其指定的 width 和 height。
总宽度 = 内容宽度 (width) + 左右内边距 (padding-left 和 padding-right) + 左右边框 (border-left 和 border-right) + 左右外边距 (margin-left 和 margin-right)
总高度 = 内容高度 (height) + 上下内边距 (padding-top 和 padding-bottom) + 上下边框 (border-top 和 border-bottom) + 上下外边距 (margin-top 和 margin-bottom)
使用 box-sizing 属性控制盒子模型的计算
box-sizing 属性可以控制如何计算元素的宽度和高度。
它的取值为：
-
content-box（默认值）：- 宽度和高度只包括内容区域，不包括内边距和边框
padding和border会额外增加在元素的尺寸上
-
border-box：- 宽度和高度包括内容区域、内边距和边框的尺寸
- 使用
border-box后，设置的宽度和高度会包含padding和border，更符合直观的布局
例如：
div {
box-sizing: border-box;
width: 300px;
padding: 20px;
border: 10px solid black;
}
在这种情况下，div 元素的总宽度是 300px，其中包含 padding 和 border。
如果使用 content-box，则总宽度将是 300px + 20px（padding-left）+ 20px（padding-right）+ 10px（border-left）+ 10px（border-right）= 360px