CSS两种盒模型的区别及兼容性总结
参考:《精通CSS:高级Web标准解决方案(第2版)》. Andy Budd , Simon Collison , Cameron Moll (作者) 陈剑瓯(译者)
通过理解两种盒模型,区别其不同点,重点在于总结盒模型的兼容性。
1.IE盒模型
在早期的IE浏览器中,IE5及以下甚至包括IE6,在混杂模式中,使用自己的非标准盒模型。这些浏览器的width属性不是内容的宽度,而是内容的、内边距和边框的宽度总和。什么意思呢?我们举个例子说明下:以width为例,浏览器为IE5,定义如下代码:
<div id="app"></div>
#app{
margin:10px;
padding:5px;
width:70px;
}
在IE5中,上述中的盒模型的总宽度为90px。总宽度=定义的width+定义的margin
这是因为,在IE5中,认为每个边上的内边距padding(5px) 是定义的宽度width(70px)的宽度的一部分,而不是宽度之外的附加的。并且,在此条件下,定义的width=content实际宽度+padding+border
。
在CSS3中,新增了box-sizing属性,可以通过box-sizing属性设置为border-box使用这种IE盒模型
#app{
margin:10px;
padding:5px;
width:70px;
box-sizing:border-box;
}
注意:但是,除了一些非常特殊的场合之外,我们很少需要使用box-sizing:border-box;这个属性。
2.W3C标准盒模型
前面对IE盒模型有了一个初步的认识,再来了解下我们常用的标准盒模型,也就是W3C标准盒模型。
值得注意的,此处使用了完整的html结构,主要是为了调用!DOCTYPE
声明。我们后面详细说明声明的重要性。
(坑边闲话:手懒~~~直接使用VS code快捷生成了····使用编辑器的好处:快准,但同时亦容易忽略一些关键的知识点。建议在初学的时候,不要使用编辑器的快捷和自动生成,手动去敲,练习打字速度,同时熟悉代码结构
。例如,此处对于meta
的知识点,经常使用!+ tab 必然容易忽略,可参考MDN进行知识充能下,特别是需要注意下name="viewport"属性)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#app{
margin:10px;
padding:5px;
width:70px;
}
</style>
</head>
<body>
<div id="app"></div>
</body>
</html>
此时,盒模型的总宽度为100px;
盒模型的总宽度为:margin+padding+border+定义的width
此处定义width,就是实际的content的宽度。
在CSS3中,新增的box-sizing的默认属性content-box,即设置为W3C标准盒模型;
3.IE盒模型和W3C标准盒模型的兼容性
对于盒模型的优先如何选用?前面有提到,除了一些非常特殊的场合之外,我们很少使用box-sizing:border-box
去调用IE盒模型,而是默认设置box-sizing:content-box
使用W3C标准盒模型,这样可以避免多个浏览器对同一页面的不兼容。
那我们怎样让我们的元素都遵循W3C标准盒子模型呢?在html文件头部有一个<!DOCTYPE html>
声明,就说明已经遵循W3C标准盒子模型了。
值得注意的是,我们为什么要添加这么一个声明呢?
<!DOCTYPE html>
声明的作用主要是定义浏览器会使用它来判断文档类型, 决定使用何种协议来解析,以及切换浏览器模式(可随手Google一下<!DOCTYPE html>
,反手就是一个链接~~~)
因为若不声明DOCTYPE类型,IE浏览器会将盒子模型解释为IE盒子模型,FireFox等会将其解释为W3C盒子模型;若在页面中声明了DOCTYPE类型,所有的浏览器都会把盒模型解释为W3C盒模型。
4.写在最后:停止对IE的批评
下面是书中的一段原话,第一次是在知乎live上听到一个老师的理解,再看到书时,便把它记下了。对于书中的提到的Firefox、Safari,以及现在使用Chrome,能力层次并不能达到,所以感受不到Chrome的问题,相反,更多的是,直接的感受IE对初学者的不友好(;′⌒`);因此,便把这段话,记在心中,希望改变的自身的对IE的偏见。
“ IE并不是唯一一中有bug的浏览器,所以你可能会奇怪我为什么只关注IE bug。不必担心,我并不是和微软过不去,这么做是有理由的。
首先,IE目前仍然占有很大的浏览器市场份额,所以bug往往很快被发现并且很好地记录下来。但是,IE的开发节奏比其他的浏览器慢得多。Firefox和Safari每过几个月就会发布新版本,而要看到IE的新版本要等好几年。因此,IE的bug往往会存在很长时间。
在Firefox和Safari中以如此快的速度发现和修复bug确实很棒,但是这也有问题,开发人员要应付的浏览器的版本不是两三个,而是10或20个。你无法确定用户是否使用了最新的版本,这使得测试变得积极困难。另一方面,IE差不多5年没有发布主要修订版了。因此,bug有更多的时间可以暴露出来,开发人员也有更强的寻找修复的方法的动力。
幸而,与以前的版本相比,IE8更符合标准了。许多有名的bug已经被解决,而且对高级CSS2.1特性的支持也在增加。与所有浏览器一样,新的bug也会出现,IE8远不是完美的。但是,人们越快地升级IE8和Firefox等现代浏览器,IE6等老式浏览器就会越来越快地退役。”