【华为云全栈成长计划】CSS盒模型 — 标准盒模型和怪异盒模型

一、CSS盒模型(Box Model)

你可以将每个 HTML 元素/标签 都当作是一个盒子。然后大盒子里面包裹小盒子，就跟俄罗斯套娃一样一层包裹一层，这就是所谓的盒模型。

而这个盒子模型，一共是由四个部分组成：

下面这张图个人觉得很好的说明了盒子模型(Box Model)的构成:

（图源来自：菜鸟教程）

二、标准盒模型和IE盒模型

盒模型还分为：W3C标准盒模型和IE盒模型（也叫怪异盒模型）。

1、W3C标准盒模型：

W3C标准盒模型的范围（组成）包括了margin、border、padding、content；但是，content部分并不包括其他组成部分。如下demo：

.box{
    width: 300px;
    height: 300px;
    margin: 20px;
    border: 20px solid red;
    padding: 20px
}
按照 W3C标准盒模型 来解析，那么：
这个盒子（box元素）需要占据的位置为：
width = margin*2 + border*2 + padding*2 + content.width = 20*2 + 20*2 + 20*2 + 300 = 420px
height = margin*2 + border*2 + padding*2 + content.height = 20*2 +20*2 + 20*2 + 300 = 420px

这个盒子（box元素）的实际大小为：
width = border*2 + padding*2 + content.width = 20*2 + 20*2 + 300 = 380px
height = border*2 + padding*2 + content.height = 20*2 + 20*2 + 300 = 380px

注意：之所以计算出来不同的结果，是因为一个是盒子占据页面位置大小，一个是盒子的实际大小。区别在于实际大小不包含margin。初学者去查阅网络文档的时候作者没有说清楚很容易造成混淆。

2.IE盒模型（怪异盒模型）：

IE盒模型（怪异盒模型）的范围（组成）包括了margin、border、padding、content； 但是，content部分包括了border、content和padding部分。如下demo：

.box{
    width: 300px;
    height: 300px;
    margin: 20px;
    border: 20px solid red;
    padding: 20px
}
按照 IE盒模型 来解析，那么：
这个盒子（box元素）需要占据的位置为：
width = margin*2 + content.width = 20*2 + 300 = 380px
height = margin*2 + content.height = 20*2 + 300 = 380px

这个盒子（box元素）的实际大小为：
width = content.width = 300px
height = content.height = 300px

注意：之所以计算出来不同的结果，是因为一个是盒子占据页面位置大小，一个是盒子的实际大小。区别在于实际大小不包含margin。初学者去查阅网络文档的时候作者没有说清楚很容易造成混淆。

三、关于box-sizing属性

W3C给出定义：box-sizing 属性允许你以某种方式定义某些元素，以适应指定区域。不配合demo的话可能会有点难理解这个定义，简单来理解它就是转换标准盒和IE盒的开关。

box-sizing: content-box | border-box | inherit;

注意：border-box不包含margin。

四、总结

CSS盒模型主要是用来网页设计和布局时使用的。它是CSS的基础，同时也是个难点，在进行布局的时候离不开盒模型的使用。

1. CSS盒模型分为W3C盒模型和IE(怪异)盒模型；

2. CSS盒模型由四部分构成：margin、border、padding、content；
   

3. 计算盒子实际大小的时候不包含margin；计算盒子占据位置大小时需要包含margin；

4. 标准盒模型的content部分不包含其他部分；IE盒模型的content部分包含了border、padding、content；
   

5.  box-sizing: conent-box;将盒子设置为标准模型（盒子默认为标准模型）；

6.  box-sizing: border-box;将盒子设置为 IE 模型（也叫做怪异盒子）；

最后呢补充一点：浏览器的兼容性问题

就是我们在编写代码的时候尽量使用W3C的标准，也就是在页面头部声明DOCTYPE类型。这样可以避免不同浏览器对同一页面的兼容性问题。

在使用CSS盒模型的情况下，如果不声明DOCTYPE类型，那么在IE浏览器下盒模型将会按照IE(怪异)盒模型解析，在其他浏览器下回按照W3C标准盒模型进行解析；声明了DOCTYPE类型，那么所有浏览器都会按照W3C标准盒模型进行解析。

五、个人感悟

这是我第一次写文章，到后面已经是一种自嗨状态了(我妈说我疯了)哈哈哈哈哈~~~因为一想到我发布了这个文章会帮助到一些和我同为初学者的小伙伴就很兴奋。

写文章真的蛮辛苦的，不过对自己的所学所见能有一个整理记录的作用，还能帮助到其他人也是蛮有成就感的一件事~~

还有就是对初学者嘚一个建议，遇到了问题一定要多查多问多记录！！遇到了问题一定要多查多问多记录！！遇到了问题一定要多查多问多记录！！

能加到高质量嘚交流群最好了！！因为真的问大佬要比百度谷歌啥的要有效率的多还能拓展很多知识点，然后多跟他们交流也是能学到一些专业知识或者生活职业相关的常识，对我们初学者真的很有帮助。

诶呀好像有点啰嗦啦第一次写文章想啥都记录下来哈哈哈~~那希望这篇文章能对大家有所帮助啦