1.什么是盒模型
盒模型是css3新增的一个css属性
包含四个值：外边距 边框的宽度 内边距 和内容宽
盒模型的宽度值是 contentWidth + paddingWidth + borderWidth +marginWidth；
下面的图片说明了盒子模型
盒模型
2.盒模型的设置属性
设置的属性名称是：box-sizing ;有两个值属性值，一个是content-box ,是属性的默认值
另一个是border-box
2.1设置值1
属性设置值为content-box，块级元素设置的width和height就是 content的宽高，再加padding和border以及margin的时候，宽高会在设置的width和height的基础上往外增加。
2.1.1 content-box例子
content-box例子
结果图示1
结果图示2
oDiv1的盒模型的总的宽度为 100px (内容宽度) + 20px(padding宽度) + 20px (border宽度) + 20px(margin宽度) = 160px
2.2 设置值2
属性设置值为border-box，块级元素设置的width和height 是content + adding + border的总和。
2.2.2 border-box 例子
css设置
结果图示1
结果图示2
如结果图示 盒模型设置的宽度是 60px（内容宽度） + 20px（padding宽度） + 20px（border宽度）= 100px(设置的宽度)
3.盒模型的兼容的浏览器版本
一旦为页面设置了恰当的 DTD，大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。不幸的是，IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。
虽然有方法解决这个问题。但是目前最好的解决方案是回避这个问题。也就是，不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素和子元素。
IE8 及更早IE版本不支持设置填充的宽度和边框的宽度属性。
解决IE8及更早版本不兼容问题可以在HTML页面声明 <!DOCTYPE html>即可。
网友评论