盒子模型详解

网页中的每个元素都被看作一个矩形盒子，盒子模型定义了盒子的结构和组成部分，影响元素的尺寸和布局。

盒子模型组成

1. 内容区域（content）
   显示文本或其他元素的区域。

2. 内边距（padding）
   内容与边框之间的空白区域。

3. 边框（border）
   围绕内容和内边距的线条。

4. 外边距（margin）
   元素与其他元素之间的距离。

盒子尺寸计算

默认情况下，元素的总宽度 = 内容宽度 + 左右内边距 + 左右边框 + 左右外边距。

例如：

width: 200px;
padding: 10px;
border: 5px solid black;
margin: 20px;

总宽度 = 200 + 102 + 52 + 20*2 = 270px。

box-sizing 属性

可以通过 box-sizing 属性改变盒子尺寸计算方式：

• content-box（默认）：宽高只包括内容区域，不包括内边距和边框。
• border-box：宽高包括内容、内边距和边框，更易于布局控制。

box-sizing: border-box;

盒子模型示例

loading