css盒模型

1、盒模型分类

标准盒模型（W3C）（现代浏览器采用的默认盒模型）

 

IE 盒模型（怪异）

 

相同点：都有content、padding、border、margin

不同点：标准盒模型实际大小：width+padding+border+margin

　　怪异盒模型：width包含padding和border，

　　即元素实际大小：width+margin

　　标准盒模型转为怪异盒模型：box-sizing:border-box;

　　怪异盒模型转为标准盒模型：box-sizing:content-box;

.............................................

2、标准盒模型组成

2.1 content（内容）

　　width * height

 

2.2 padding（内填充，内边距）

　　与 background 的颜色一样，包裹在内容外层

可以设置大小

 

　　padding：10px； 代表四个方向大小都是 10px

　　padding：10px 20px； 代表上下为 10px，左右为 20px

　　padding：10px 20px 30px； 代表上为 10px，左右为 20px， 下为 30px

　　padding：10px 20px 30px 40px； 代表上右下左

 

　　padding-left：左内边距

　　padding-right：右内边距

　　padding-top：上内边距

　　padding-bottom：下内边距

 

2.3 border（边框）

　　可以设置大小与颜色

　　设置字体边框,文字边框 -webkit-text-stroke:1px black;

2.4 margin（外填充，外边距）

透明区域

可以设置大小，即使大小为 0，margin 也是存在的

 

3、盒子的实际大小：

实际宽度 = width + padding * 2 + border * 2 + margin * 2

实际高度 = height + padding * 2 + border * 2 + margin * 2

4、padding 和 border 能影响怪异盒子

　　当 padding 或 border 大于设置的 width 时，就会影响怪异盒子的实际大小。