css盒子模型

前端开发之盒子模型

css两种盒子模型：

这里是引用
设一个宽300px，高400px的div，并设置5px的边框和20px的padding。然后我们来看效果：
这里我们会发现明明我们设置了300400长宽比，为什么呈现出来的是一个350450的盒子呢？
我们可以找到下面的这张示意图：

**在这张图中，我们发现我们设置的300400出现在了最里面的那个蓝框中，与此同时我们可以发现在这个盒模型中除了我们设置的内容（content），还有margin（外边距）、border（边框）、padding（内边框）

为了正确设置元素在所有浏览器中的宽度和高度，你需要知道盒模型是如何工作的。
而我们在测试效果图看到的350*450盒子，

350（width） = 300（content） + 20（padding）* 2 + 5（border）* 2
450（height）= 400 （content）+ 20（padding）* 2 + 5（border）* 2

css的两种盒模型：（一）标准的盒子模型

在标准的盒子模型中一般默认：box-sizing:content-box;
在标准模式下的盒模型如下图所示，盒子总宽度/高度=width/height+padding+border+margin

（二）IE盒子模型

在IE盒子模型中，width表示content+padding+border这三个部分的宽度
在怪异模式下的盒模型如下图所示，盒子的总宽度和高度是包含内边距padding和边框border宽度在内的，盒子总宽度/高度=width/height + margin = 内容区宽度/高度 + padding + border + margin;
也就是盒子宽高 = 内容区域的宽高+padding+border;
一般默认：box-sizing:border-box;

本人开源博客链接麻烦有兴趣的大神可以关注我下，我是一只刚学会飞的菜鸟：https://my.oschina.net/u/3676320/