1. 标准盒模型
width:代表内容区域的宽度;
height:代表内容区域的高度;
盒子总宽:width + 内边距 + 边框 + 外边距;
2. 怪异盒模型
width:代表的是 内容区宽度 + 内边距 + 边框;
height:代表 内容区高度 + 内边距 + 边框;
盒子总宽:width + 外边距;
3. box-sizing 属性
通过这个属性,可以规定盒子是以标准盒模型还是怪异盒模型(IE盒模型)来渲染。
box-sizing:content-box|border-box;
content-box:默认值,以标准盒模型模式去解析计算;
border-box:以怪异盒模型去解析计算。
网友评论