带你完全搞懂css盒模型

盒模型：

一个盒子由四个部分组成：content、padding、border、margin

1. content，即实际内容，显示文本和图像

`content` 属性大都是用在`::before/::after`这两个**「伪元素」**中

2. padding，即内边距，内容周围的区域

   • 内边距是透明的
   • 取值 「不能为负」
   • 受盒子的background属性影响
   • padding 「百分比值」无论是水平还是垂直方向均是「相对于宽度计算」

3. boreder，即边框，围绕元素内容的内边距的一条或多条线，由粗细、样式、颜色三部分组成

4. margin，即外边距，在元素外创建**「额外的空白」**，空白通常指不能放其他元素的区域

标准盒模型

width = 内容宽度(content) + border + padding + margin

IE盒模型

width = 内容宽度(content + border + padding ) + margin

box-sizeing属性：控制元素的盒模型解析方式（默认标准盒）

	content-box 标准盒模型
	border-box  IE盒模型