怪异盒模型、弹性盒及相关属性的介绍

1、怪异盒模型  

（1）怪异盒模型介绍

什么是怪异盒模型，之前我们设置的div盒子，它只是盒子最里面那部分大小，当你在设置内边距和边框，整个盒子的宽和高都会增大，但是怪异盒模型是刚开始设置的div盒子大小包括了内边距和边框，就是当你给盒子加内边距和边框时，整个盒子的大小不变，只是原本没设置内边距和边框时，盒子大小都是盒子最里面那部分的，当你设置了内边距和边框以后，最里面部分开始变小，内边距和边框的大小就是最里面那部分减去的。

注意：外边框不受影响和原来盒子模型一样

不了解盒子模型的请见文章：css第十二课：盒子模型_陌一一的博客-CSDN博客

（2）怎么样变成怪异盒模型：

接下来我们看，到底设置什么属性，才能让盒子模型变为怪异盒子模型呢：

 默认的就是盒模型，就是第一句代码，如果想设置成怪异盒模型，就加上属性box-sizing：border-box；

（3）怪异盒模型应用场景：

 比如说现在有一个大盒子里面有三个小盒子，让他们都浮动起来，向上图这样排列，刚好能放下三个，但是当我们给三个盒子增加内边距和边框时他们的盒子整体都会变大，然后就可能第三个盒子放不下了，就被挤到下面去了，如果这时候我们将三个盒子都设置成怪异盒模型，那么提前设置好他们每个盒子的大小，在设置内边距和边框就只从他们里面去挤压设置了，整体的盒子大小不变，那么第三个盒子也就不会被挤下去了。

2、弹性盒

弹性盒是一种新的布局方式，特别适合移动端布局，就像下面这个京东的移动端布局，蓝色框框住的地方，弹性盒就特别适合制作像这种小图标排列的布局。 

❤弹性盒子 代码实现：先创建原始的盒子：

 结果：

 代码：这时候我们在大盒子（父盒子）身上加上弹性盒子的代码：display：flex；看效果如何：