CSS盒子模型
包含元素内容（content）、内边距（padding）、边框（border）、外边距（margin）
一般元素总宽度 = element的width+padding的左右边距+margin左右边距值+border的左右宽度
高度同理
外边距合并
上下外边距会合并一般发生在普通文档流中，行内框，浮动框或绝对定位之间外边距不会合并
一般合并的外边距会取那个较大的值
Box-sizing属性（content-box|border-box|inherit）
Content-box: 总宽度 = margin+border+padding+width
Border-box:总宽度 = width+margin 其中盒子的width包含padding+border+element
inherit:规定从父元素继承box-sizing的属性值
实践中的问题
- Margin越界（第一个子元素的margin-top和最后一个子元素的margin-bottom）
->父元素没边框，设置第一个子元素的margin-top的值会加在父元素上，解决方法如下：
- 给父元素加边框
- 给父元素设置padding
- 父元素添加overflow：hidden
- 父元素加前置内容生成（推荐）
例子：.parent{
Width:500px;
Height:500px;
Background:red
}
.parent : before{
Content:””;
Display:table
}
.child{
Width:200px;
Height:200px;
Background:green;
Margin-top:50px
}
<div class=“parent”>
<div class=“child”>
</div>
</div>
浏览器间的盒子模型
- ul在MOzillz中默认有padding值，而在IE中只有margin值
- 标准盒子模型与IE盒子模型之间差异，IE更像box-sizing：border-box，解决方法就是在HTML模板加上doctype
盒子模型画三角形
.triangle{
Width:0;
Height:0;
Border:20px solid transparent;
Border-top:20px solid red;
}//向下的箭头
BFC理解（块级格式化上下文，独立的渲染区域，规定了内部的BFC如何布局，并与这个区域的外部互不相干）
BOX、Formatting Context的缩写
Box：CSS布局的基本单位
- box常用盒子：(根据display的你属性区分盒子)
-> block-level box:display属性为 block,list-item,tabel的元 素，并且参与BFC；
-> inline-level box:display 属性为 inline,inline-block,inline-table,参与IFC
- BFC布局规则
-> 内部的Box会在垂直方向上，一个接一个放置
-> Box垂直方向距离由Margin决定，属于同一个BFC的两个相邻的Box的Margin会发生重叠
-> 每个子集元素的Margin Box的左边与包含他的父级元素的 border box的左边相接触（对于从左往右的格式，反之相反）；即使存在浮 动也是如此
-> BFC的区域不会与Float Box重叠
-> BFC在页面上就是一个隔离的独立的容器，容器里面的子元素不会影响外面的元素，反之一样
-> 计算BFC高度的时候，浮动元素高度也参与计算
- 哪些元素会生成BFC
-> 根元素
-> float 不为none
-> position为absolute或fixed
-> display为inline-block,table-cell,table-caption,flex,inline-flex
-> overflow不为visible