盒子模型是CSS中一个重要的概念,理解了盒子模型才能更好的排版和布局。盒子模型有两种,分别是 IE 盒子模型和标准 W3C 盒子模型。
盒模型的结构
1.content(内容):用来展示文字和图片
2.padding(内边距):内容与边框的距离
3.border(边框):元素的边框
4.margin(外边距):元素与元素之间的距离(父子元素,兄弟元素)
标准盒子模型:
包括margin、border、padding、content,并且 content 部分不包含其他部分。
也就是标准盒模型的宽度就是内容的宽度。
IE 盒子模型:
包括 margin、border、padding、content,和标准盒子模型不同的是IE 盒子模型的 content 部分包含了 border 和 pading。
举个栗子:
一个盒子的 margin 为 20px,border 为 5px,padding 为 10px,content 的宽为 200px,如果用标准 盒子模型解释,那么这个盒子需要占据的位置为:宽 20*2 +5*2+10*2+200=270px,盒子的实际宽度为:5*2+10*2+200=230px;如果用IE盒子模型,那么这个盒子需要占据的位置为:宽 20*2+200=240px,盒子的实际宽度依然是: 200px。
CSS3中有个属性:box-sizing,能改变盒子的模型标准:
border-box(IE盒模型 )
content-box(W3C盒模型)
怪异盒子模型
怪异模式是“部分浏览器在支持W3C标准的同时还保留了原来的解析模式”,怪异模式主要表现在IE内核的浏览器。
当不对doctype进行定义时,会触发怪异模式。
在标准模式中,一个块元素的总宽度= width + margin(左右) + padding(左右) + border(左右)
在怪异模式中,一个块元素的总宽度= width + margin(左右)(即width已经包含了padding和border值)
浏览器的兼容性问题
一旦为页面设置了恰当的 DTD,大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范,元素内容占据的空间是由 width 属性设置的,而内容周围的 padding 和 border 值是另外计算的。不幸的是,IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度,而是内容、内边距和边框的宽度的总和。
虽然有方法解决这个问题。但是目前最好的解决方案是回避这个问题。也就是,不要给元素添加具有指定宽度的内边距,而是尝试将内边距或外边距添加到元素的父元素和子元素。
IE8 及更早IE版本不支持 填充的宽度和边框的宽度属性设。
解决IE8及更早版本不兼容问题可以在HTML页面声明 即可。
网友评论