盒子模型可以用来对元素进行布局,包括内边距,边框,外边距,和实际内容这几个部分。
盒子模型分为:
- W3C 标准的盒子模型(标准盒模型)
- IE 标准的盒子模型(怪异盒模型)
区别:
- 标准盒模型中 width 和 height 指的是内容区域高度
- 标准盒模型下盒子的大小 = content + border + padding + margin
- 怪异盒模型中的 width 和height 指的是内容、边框、内边距总的宽度(content + border + padding);计算整个盒子时候会存在偏差.
- 怪异盒模型下盒子的大小=width(content. + border + padding) + margin
可通过属性 来设置盒子模型的解析模式
- box-sizing :content-box W3c 的标准模型(default)。
- box-sizing :border-box IE 的怪异盒模型