css中的盒模型

引言

html页面上的元素都可以看成是框组成的,框通过三种定位机制排列在一起就过程了我们看到的页面.而框就是盒模型.

w3c盒模型

1.页面上的每个元素可以看成一个矩形框，每个框由元素的内容，内边距，边框和外边距组成。
2.如果在元素上添加背景，则背景是边框, 内边距和内容组成的区域.
3. 在css中width和height指的是内容区域的宽度和高度。增加内边距，边框和外边距不会影响内容区域的尺寸，但会增加元素框的总尺寸。即width=element

IE的盒模型

在IE盒子模型中，width表示content+padding+border这三个部分的宽度

切换盒模型

 box-sizing: content-box 是W3C盒子模型
 box-sizing: border-box 是IE盒子模型

box-sizing的默认属性是content-box