CSS两种盒模型总结

最新推荐文章于 2024-06-16 11:49:47 发布

hui_style

最新推荐文章于 2024-06-16 11:49:47 发布

阅读量1.4k

点赞数

分类专栏： css 文章标签： css 盒模型 css+div

本文链接：https://blog.csdn.net/hui_style/article/details/97368292

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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等老式浏览器就会越来越快地退役。”