盒子模型

盒子模型

html元素都看成盒子，包括了margin、border、padding、content

在CSS中盒模型被分为两种，第一种是w3c的标准模型，另一种是IE的传统模型

• W3C盒子模型 (标准盒子模型)

当我们对元素指定width、height时，只是设置了content，而盒子的总宽度/高度 = width/height + padding + border + margin

• IE盒子模型 (怪异盒模型)

当我们对元素指定width、height时，设置的是content + padding + border,合资的总宽度/高度 = width/height + margin

• 解决浏览器的兼容性问题：

不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素和子元素

IE8 及更早IE版本不支持设置填充的宽度和边框的宽度属性。

解决IE8及更早版本不兼容问题可以在HTML页面声明 即可。

在CSS3中新增加了box-sizing属性，能够事先定义盒模型的尺寸解析方式

• box-sizing: content-box | border-box | inherit

content-box : 让元素维持W3C的标准盒模型 (width = content)

border-box : 让元素维持IE传统的盒模型 (width = content + padding + border (怪异模式) )

 -webkit-box-sizing: border-box;  /* Safari| chrome */
    -moz-box-sizing: border-box;  /*firefox浏览器*/
     -ms-box-sizing: border-box;  /*微软IE浏览器*/
      -o-box-sizing: border-box;  /*Opera浏览器*/
         box-sizing: border-box;