盒模型
-
-
- [一、 概念](#一、 概念)
- 二、盒模型的理解
- 三、组成部分
- 四、padding和margin的区别
- 五、BFC
-
一、 概念
盒模型是css布局的基石，它规定了网页元素如何显示以及元素间的相互关系。css定义所有的元素都可以拥有像盒子一样的外形和平面空间。即都包含内容区、补白（填充）、边框、边界(外边距)这就是盒模型。
二、盒模型的理解
我们可以将盒模型比喻成一个快递盒子。将所邮寄的物件比喻成为盒模型内的内容，即content（内容区）。整个快递盒子就可以比喻成为盒模型的边框，即border（边框区）。在快递的运输过程中，为了防止磕碰，我们一般会在快递盒子与物件之间塞上充气囊，阻断快递盒子与物件的直接接触，此处的充气囊就可以理解为盒模型的padding（填充区）。margin（外界边界值）就可以理解为我们在摆放快递的时候每个快递盒子之间的间距。但是，现实中我们在使用盒子装物件的时候，充气囊加物件的体积不可以大于盒子的体畸，否则盒子会被撑开，而css盒子是具有弹性的，盒子内的padding-left+padding-right+content的宽（或padding-top+padding-bottom+content的高）如果大于盒子的宽（或高）最多只会把css盒子的宽（或高）撑大，不会把盒子撑开。
三、组成部分
（1）content（内容区）
（2）padding（填充区）
（3）border（边框区）
（4）margin（外边界区）
四、padding和margin的区别
padding:用来控制父元素和子元素之间的位置关系,即用来控制元素（盒子）和内容之间的位置关系
margin:用来控制同辈元素之间的位置关系
margin是可以写负值的，padding不可以写的负值
margin不会影响元素的实际宽高，但是会影响元素所占区域
box-sizing三个值：border-box; padding-box; content-box;
标准盒模型
IE盒模型
五、BFC
1、概念
BFC即Block Formatting Contexts (块级格式化上下文)，是W3C css2.1规范中的一个概念。是指浏览器中创建了一个独立的渲染区域，并且拥有一套渲染规则，它决定了其子元素如何定位，以及其它元素的相关关系和作用。
2、特点
具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。
3、布局规则
内部的Box会在垂直方向，一个接一个地放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
BFC的区域不会与float box重叠,而是紧贴浮动元素。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
计算BFC的高度时，浮动元素也参与计算
4、哪些元素会产生BFC
1、根元素
2、float属性不为none
3、position为absolute或fixed
4、 display为inline-block, table-cell, table-caption, flex, inline-flex
5、 overflow不为visible
5、应用场景
（1）清除盒子垂直方向上外边距合并------盒子垂直方向的距离由margin决定。属于同一个BFC的两个相邻盒子垂直方向的margin会发生重叠。
解决方法：根据属于同一个BFC的两个相邻盒子垂直方向的margin会发生重叠的性质，可以给其中一个盒子再包裹一个盒子父元素，并触发其BFC功能（例如添加overflow:hidden;）这样垂直方向的两个盒子就不在同一个BFC中了，因此也不会发生垂直外边距合并的问题了。
（2）在子元素设置成浮动元素的时候，会产生父元素高度塌陷的问题。
解决方法：给父元素设置overflow:hidden；的时候会产生BFC
由于在计算BFC高度时，自然也会检测浮动的子盒子高度。所以当子盒子有高度但是浮动的时候，通过激发父盒子的BFC功能，会产生清除浮动的效果。