在写本文 探索知识的过程中 深有感触——遇到问题 去问百度问不明白的话 就去问官方文档吧

让官方文档的权威给你解释！

1.解决两个盒模型相关的问题

前两天在总结青训营ppt中的一个内容时

突然产生了2个疑问——

• 盒模型的范围到底是哪里到哪里啊？
  • 有说“标准盒模型的总宽度=左右margin + 左右border + 左右padding + width”的（牛客网上的面试题 来自阿里）

  

  • 也有说 “标准盒模型的宽度=左右border + 左右padding + width”的（没错 就是官方文档）

嘶~咋回事啊 下面2.2的内容中 解释了这个部分 两种说法都是ok哒（但是我觉得问这种模棱两可的东西概率不大 会用即可！）

• 这个box-sizing:border-box;是干啥用的呢？

一句话就是 让盒子的大小能够直观地被width height确定 padding不会撑大盒子

2.了解盒模型基础

在研究这个属性如何影响盒模型并进行应用时 我们首先要严谨地了解盒模型的基础

这里我们通过查阅MDN文档——“什么是CSS盒模型”进行权威的学习

CSS中一个块级盒子的组成部分：

注意这里举例时提到的content box区域 只有在标准盒模型中才能用width height设置~

3.两个问题的解决

3.1 标准盒模型以及盒模型范围的思考

现在浏览器中默认使用的盒模型

这里一些属性的设置上非常有意思
我们来看看

注意：以下内容都是权威的“MDN文档”中给出的定义 然后使用我个人语言进行的汇总

（肯定不会出现原则性问题就是了）

• 使用width height设置content box

• 设置的宽高 + 左右padding + 左右border + 左右margin 决定了 整个盒子的大小

• 标准盒模型宽度 = 设置的宽 + 左右padding + 左右border （不算margin哦 下面也说明了为啥不算）

（才发现青训营中老师就是使用的MDN文档中的例子~）

• margin不计入实际大小 —— 当然 它会影响盒子在页面所占的空间 但是影响的是盒子外部空间

盒子的范围到边框为止 —— 不会延伸到margin（如上图）

所以说 解决对一个知识点感到的困惑 不是靠无脑百度 而是亲自在文档中进行答案的探索！

这里的内容解释了昨天无比疑惑的地方！

• 盒子的范围是 边框+内边距+content box

• margin不计入实际盒模型的大小！但是它会影响盒子在页面所占空间（文档原文）所以在问“总宽度”时 加上了margin也可以解释！

豁然开朗

如果大家还是有疑惑 亲自翻开文档看看就好！

3.2 代替（IE）盒模型&box-sizing属性的用处

不读文档不知道 一读吓一跳

原来box-sizing:border-box就是为了把盒模型设置成IE盒模型嘛！

所以为啥叫IE盒模型呢？

最开始 Internet Explorer默认使用替代盒模型，没有可用的机制来切换。

后来 IE8+ 支持使用box-sizing 进行切换了~

除了直观地获得盒子的大小 还有一个使用场景——

前天的文章中有提到的：在布局时可能并不希望padding会撑大原来的盒子，所以css3中推出了box-sizing的属性

属性值改成 border-box 就能防止padding撑大原来的盒子了！

来看俩例子

• 使用代替盒模型 设置多大的width就用多宽的盒子

• 取消这个属性就会导致盒子被撑大~