两种盒模型的介绍
2019-04-22 本文已影响0人
前端咸蛋黄
一、概述
CSS有两种盒模型：W3C盒模型(标准盒模型)和IE盒模型，这两种盒模型，主要区别是在解释元素的width和height属性上。
二、W3C盒模型
W3C盒模型认为，元素的with和height属性仅仅指content area。就是元素的width不包括padding,border，margin。
width / height = content
三、IE盒模型
IE盒模型认为，元素的with和height属性由content area + padding + border组成。
width / height = content + padding + border
四、box-sizing
CSS3新增了box-sizing属性，定义了 user agent 应该如何计算一个元素的总宽度和总高度。
- content-box是默认值，代表W3C盒模型
- border-box代表IE盒模型
