标准盒模型和怪异盒模型(marksheng)

矫情吗；* 2023-01-17 10:57 90阅读 0赞

# [标准盒模型和怪异盒模型][Link 1] #

盒子模型众所周知，这里先简单介绍一下。

![bf87fcb7ab972914ed580e0b5e79d775.png][]

可以看到，在标准盒模型下，width和height是内容区域即content的width和height。而盒子总宽度为

**在标准模式下，一个块的总宽度= width + margin(左右) + padding(左右) + border(左右)**

**![dc91d4152447a9d0338fd183499d326e.png][]**

而IE盒模型或怪异盒模型显而易见的区别就是，width和height除了content区域外，还包含padding和border。盒子的总宽度为

**一个块的总宽度= width + margin(左右)（即width已经包含了padding和border值）**

当然这些大伙应该都知道，关键的是**如何运用**和**选择哪种盒模型**。

首先，如何运用？

只要在文档首部加了doctype申明，即使用了标准盒模型，而不加，则会由浏览器自己决定，比如，ie 浏览器中显示“ie盒子模型”，在 ff 浏览器中显示“标准 w3c 盒子模型”。

然后，选择哪种？

按理说，我们应该遵循w3c标准使用标准盒模型，但我发现很多ui框架使用的都是怪异盒模型，比如ionic,vux,和bootstrap,为什么呢?我思考了很长时间。

不知道大家有没有遇到过这种情况，本来我画了两个div,他们在flex布局下分别占50%的宽度，很简单，我们width设置为50%即可，当我们画完了，很满意的看了看页。

代码:

* {
      margin: 0;
      padding: 0;
      box-sizing: content-box;
    }

效果：

![bb826f7e2647cec8339ef5899953cb2e.png][]

![503729b6bae69608fa8b2e4a2e68a568.png][]

这时候，一个需求来了，左边的部分要加上边框,你一想，这不简单么，立马给左边加上了一个边框。但，意外出现了，左边和右边的不相等了。因为左边加上了边框，所以宽度溢出了，这时候右边就会压缩自己，这样就导致两边不一致了

代码：

效果：

![3c119016392fb99c006d83f09df60647.png][]

![81a7749bb37e9cd986ab729b98e9b9b6.png][]

啊，崩溃，又得调半天，关键还不好调。因为border必须为数值，而其他的为百分比，这样就很难知道左右该设多少比例，才能让左右两边完全一致了。

而用怪异盒模型，这样的问题就迎刃而解。

代码：

* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

![60f4ad7231243f0a00b106c875965f1b.png][]

![d2ae9651b9b2722d80558d7bf784860c.png][]

这样不管你边框是多宽，左右都是始终相等的。

然后，再请大家想一想，移动端都是需要自适应布局的，需要用到大量的百分数，这时候再用标准盒模型，边框进来插一脚无疑会让情况变得很复杂，对自适应布局很不友好，这大概就是很多框架都采用怪异盒子模型的原因吧。

[Link 1]: https://www.cnblogs.com/yky-iris/p/7719895.html
[bf87fcb7ab972914ed580e0b5e79d775.png]: /images/20221021/5d633b085c334652ad238e63606b4ed0.png
[dc91d4152447a9d0338fd183499d326e.png]: /images/20221021/9831993107bd409c91835a673985ead1.png
[bb826f7e2647cec8339ef5899953cb2e.png]: /images/20221021/ddc169ee8aee420fbfed161ce437ca6e.png
[503729b6bae69608fa8b2e4a2e68a568.png]: /images/20221021/0fed4c147e344bc6bd11aba50f67859f.png
[3c119016392fb99c006d83f09df60647.png]: /images/20221021/590110caab694d5293f7679c1838855f.png
[81a7749bb37e9cd986ab729b98e9b9b6.png]: /images/20221021/d5d6f4315f9445fa93c1acf6aae2bd76.png
[60f4ad7231243f0a00b106c875965f1b.png]: /images/20221021/e4d96159b80148cbb3e1f529b668f15f.png
[d2ae9651b9b2722d80558d7bf784860c.png]: /images/20221021/62918231e8ed47178d62f866b1823111.png