css的盒模型有两种,IE盒子模型,w3c盒子 模型
盒模型的部分:内容(content
)、填充(padding
)、边界(margin
)、 边框(border
);
它们的区别就是:IE的content部分把border和padding计算进去了。
W3C标准盒模型图
盒子总宽度:width+padding+border+margin
盒子中高度:height+padding+border+margin
width/height
只是内容高度,不包含 padding
和 border
值
IE怪异盒子模型
盒子总宽度:width+margin
盒子总高度:height+margin
也就是说:width/height包含了padding + border
页面渲染时,dom元素所采用的布局模型,我们可以通过box-sizing进行设置
我们可以通过box-sizing来改变元素的盒模型
css中的box-sizing属于定义了引擎应该如何去计算一个元素的总宽度和总高度
box-sizing:content-box默认的标准w3c盒模型元素效果,元素的width/height,不包含padding,border与标准盒子模型表现一致。
box-sizing:border-box触发冠以IE模型元素效果,元素的width/height包含padding,border怪异盒子模型表现一致。
box-sizing:inherit继承父元素box-sizing属性的值。
总结:
盒子模型的构成有:内容(content),内填充(padding),边框(border),外边距(margin)
ie8以下的浏览器的版本,未声明DOCTYPE,内容宽高会包含内填充和边框,成为怪异盒子模型
标准W3C盒模型:元素宽度=width+padding+border+margin
怪异盒子模型:元素宽度:width+margin
标准的浏览器可以通过设置css3的box-sizing:border-box属性,触发“怪异模式”解析计算宽高.