2021-05-08

所有HTML元素可以看作盒子。CSS盒模型本质上是一个盒子，封装周围的HTML元素，包括：边距、边框、填充和实际内容。

 

不同部分的说明：

 

Margin：外边距，清除边框外的区域，外边距是透明的。

 

Border：边框，围绕在内边距和内容外的边框。

 

Padding：内边距，清除内容周围的区域，内边距是透明的。

 

Content：盒子的内容，显示文本和图像。

 

 

 

总元素的宽度 = 宽度 + 左填充（padding） + 右填充 + 左边框 + 右边框 + 左边距 + 右边距

 

 

 

两种盒模型的比较：

 

盒模型分为W3C的标准盒模型和IE盒模型。

 

标准盒模型的宽度就是content的宽度，高度是content的高度，而IE盒模型的宽度是content+padding+border的总和。

 

切换盒模型的方法：设置box-sizing属性。

 

box-sizing: content-box //W3C盒子模型

 

box-sizing:border-box //IE盒子模型

————————————————