box model
Margin
Border
Padding
Content
width
指定content box 的宽度 百分数相对于父容器(包含块)的content box的宽度 只有包含块的高度不依赖该元素时，百分比宽度才生效
padding
内边距
margin
外边距
相邻的两个盒子margin，会发生折叠
margin可以为负值
box-sizing
改变盒模型计算方式
content-box
border-box //更符合
overflow
溢出控制
取值：visible hidden scroll auto
初始值：visible
视觉格式化模型
视口(Viewport)
浏览器的可视区域
块级元素(block-level)
会被格式化块状元素例如p,div,section等将display设置为block，list-item, table 使元素变为块级元素
行级元素(inline-level)
盒子的生成
每一个块级元素生成一个主块级盒(principal block-level box)用它来包含子级盒
每一个行级元素生成一个行级盒，行级盒分布于多行
Box Model-revisited
行级盒 margin-top, margin-bottm, padding-top不会产生效果
行级盒 padding-bottom不会影响布局
块级盒子的子盒子的生成
块级盒子可以包含多个子块级盒子
也可以包含多个行级盒子
不在行级元素里面的文字，会生成匿名行级盒比如,
<p>Some <em>text</em></p>中的some块级盒子中不能同时包含块级和行级盒子。遇到这种情况，会生成匿名块级盒来包含行级盒。比如
<div><h1>标题</h1><span>2017-1-10</span></div>
行级盒子的子盒子生成
行级盒子内可以包含行级盒子
行级盒子包含块级盒子时，会被块级拆成两个行级盒子，这两个盒子又分别被匿名k块级盒包含
<span>aaaa<h2>22222</h2><strong>tttttt</strong></span>
display属性
block 生成块级盒
inline 生成行级盒
inline-block 生成行级盒，为其内容生成块级盒
none 在排版时将元素忽略
visibility
控制元素展示
取值：visible hidden collapse
初始值：visible
排版时会占用位置
Generated Content //多产生盒子，用来存放指定的内容
控制元素::before 和 ::aftercontent //需要插入的内容
常规流
除了根元素，浮动元素和绝对定位元素外，其他元素都在常规流之内
而根元素，浮动和绝对定位元素会脱离常规流
常规流中的盒子，属于处于块级格式化上下文，或行级格式化上下文
块级格式化上下文(Block Formatting Context)
盒子在容器(包含块)内从上到下一个接一个的放置
两个兄弟盒子之间的距离由margin属性决定
同一个BFC内垂直margin会合并
盒子的左外边缘挨着容器(包含块)的左边
BFC特性
BFC内的浮动不会影响到BFC外部的元素
BFC的高度会包含其内的浮动元素
BFC不会和浮动元素重叠
BFC可以通过 overflow：hidden 浮动框 绝对定位框 非块级的块容器(inline-block) 等方法创建
行级格式上下文(lnline Formatting Context)
盒子一个接一个水平放置
盒之间的水平margin，border和padding都有效
同一行的盒子所在的矩形区叫行盒(line box)
当一个行盒放不下上下文内所有盒子时，会被分到多个垂直折叠的行盒内
行盒内的水平分布由 text-align 决定如果一个行级块无法分割(单词, inline-block)，该元素会被作为一个整体被决定放在哪一个行盒
浮动(float)
浮动元素从常规流中脱离，被漂浮在容器(包含块)的左边或者右边
浮动盒会一直漂到其外边缘挨到容器边缘或另外的浮动盒
浮动元素不会影响其后面的流内块元素
但是浮动元素后面的行级盒子会变短以避开浮动元素
clear
指定元素哪一边不能与之前的浮动框相邻取值：left right both
.clearfix::after { content: ''; display: block; clear: both; height: 0; overflow: hidden;}