携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第2天，点击查看活动详情
前言
CSS盒模型是一个形象的比喻，就是把所有的html元素比作盒子，
都有各自的宽度width/高度height、内边距padding、边框border和外边距margin。
块级盒子和内联盒子
首先，我们要知道css主要使用两种盒子：块级盒子和内联盒子。
- 块级盒子有以下特性：
- 单独在页面流中占据一行。
width和height属性可以生效。- padding、border、margin生效。
- 内联盒子特性：
- 不换行，在页面流中不单独占据一行。
- width和height属性不起作用。
- 垂直方向的padding和margin不起作用。
分类
完整的 CSS 盒模型应用于块级盒子，内联盒子只使用盒模型中定义的部分内容。
CSS盒模型分为两类：
1.标准盒模型
W3C标准盒模型，由四个部分组成：content box+ padding box +border box + margin box。
在标准模型中，如果你给盒设置 width 和 height，实际设置的是 content box。 padding 和 border 再加上设置的宽高一起决定整个盒子的大小。
如下定义了一个元素：
div {
width:360px;
padding: 10px;
margin: 20px;
border: 10px solid black;
}
则其标准模型宽度为400px, 即content box的宽度+border+padding = 360px+210px+210px。
2.IE盒模型
IE盒模型也叫作替代盒模型，使用这个模型，所有宽度都是可见宽度，所以内容宽度计算不包括边框和内边距。使用上面相同的样式得到width = 360px。
内容content的宽度和高度：就是我们通过width和height设置的宽度与高度
元素的宽度与高度：宽/高 = 内容宽/高 + 内边距 + 边框
元素空间的宽度与高度：宽/高 = 内容宽/高 + 内边距 + 边框 + 外边距
标准盒模型转换为IE盒模型
因为标准盒模型元素的宽度与高度：宽/高 = 内容宽/高 + 内边距 + 边框，
若改变内边距或者边框大小，元素宽高便会改变，
如果要保持原来元素的宽高，就要改变内容的宽高，
如边距变大多少，内容就缩小多少，
所以为了方便，我们可以转换成IE盒模型。
box-sizing属性
通过box-sizing属性，我们可以将IE盒模型转换成标准盒模型，box-sizing默认取值content-box，即标准盒模型：
box-sizing: content-box
元素的宽度与高度：宽/高 = 内容宽/高 + 内边距 + 边框
box-sizing: border-box
而box-sizing: border-box属性就可以将元素变成IE盒模型，可以在不改变元素宽高的情况下，改变内边距和边框大小，加了box-sizing: border-box属性后，元素宽高恒等于width/height取值。
外边距折叠问题
外边距是盒子周围一圈看不到的空间。它会把其他元素从盒子旁边推开。外边距属性值可以为正也可以为负。设置负值会导致和其他内容重叠。无论使用标准模型还是替代模型，外边距总是在计算可见部分后额外添加。
假如我们有两个P段落。顶部段落的页 margin-bottom为 50px。第二段的margin-top 为 30px。则它们上下之间相距多少？
答案是50px，如果你有两个外边距相接的元素，这些外边距将合并为一个外边距，即最大的单个外边距的大小。不过这么说也不确切，具体情况如下：
- 如果参与折叠的外边距中包含负值，折叠后的外边距的值为最大的正边距与最小的负边距（即绝对值最大的负边距）的和，；也就是说如果有 -13px 8px 100px 叠在一起，边界范围的技术就是 100px -13px 的 87px。
- 如果所有参与折叠的外边距都为负，折叠后的外边距的值为最小的负边距的值。这一规则适用于相邻元素和嵌套元素。
解决外边距折叠问题
- 创建
块级格式上下文(可参考我写的BFC块级格式化上下文)
- float：left或right。
- position： absolute。
- 清除浮动
- 相邻的两个元素之间的外边距重叠，后一个元素加上
clear-fix清除浮动。
最后
个人学习分享，欢迎大家和我一起学习，共同进步鸭！
