元素：块级元素，内联元素，内联块状元素
块级元素：在默认情况下会独占一块区域
相对于块级元素的父元素来讲，块级元素占据的行默认是单独享有的。
通过设置元素的样式为：
|
1
|
display:block; |
可以让元素具有块级样式。
块级元素的特点是：水平拉伸，垂直包裹。
所谓水平拉伸，是相对于块级元素的父元素来说的。
在不设置with属性时，块级元素的width会被水平拉伸，使得width+border+margin等于父元素的width；
所谓垂直包裹，是相对于块级元素的子元素来说的。
在块级元素没有设置子元素或者子元素with+border+margin=0时，若不设置块级元素的height属性，则height默认为0，
若块级元素内部有一个with+border+margin=N，则块级元素的height=N；
总结:
- 总是在新行开始；
- 高度，边距行高可控；
- 水平拉伸块级父元素；
- 垂直包裹内联元素和其他元素。
内联元素：可以与其他元素共享同一行。
通过设置元素的样式为：
|
1
|
display:inline; |
可以让元素具有内联样式。
内联元素又能单独分为两类：替换元素和非替换元素
替换元素如：img，input。这类元素和其他元素位于同一行上，拥有内在尺寸，高度、宽度、行高以及顶和底边距都可设置（有些是浏览器设置的，有些是人为提前设置的，如图片的宽和高）。
非替换元素：内容直接包含在文档中，甚至可以认为是有衍生功能的文档。
总结：
- 可以和其他内联元素共享同一行；
- line-height, margin-left, margin-top，padding-left, padding-right可变，其中line-height会带动整行获得最大且相同的行高（最高的inlineboxes高度决定lineboxes的高度）；当内联元素有背景的话，padding是会影响显示（覆盖）的。
- 高度，其余边距不可改变；
- 只能容纳文本、其他非块级元素。
内联块状元素：同时具备内联和块状元素的特点
可以和文本和非块级元素位于同一行上；同时元素的高度、宽度、行高以及顶和底边距都可设置。
通过设置元素的样式为：
|
1
|
display:inline-block; |
布局方式：普通流，浮动，绝对定位
普通流（Normal Flow）：HTML默认的从左到右，自上而下的布局方式。
浮动（Floats）:浮动的框可以向左或向右浮动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样（w3c）。
a.浮动会脱离正常的文档流，浮动元素A的浮动位置任然是相对于父元素所在的位置的，
b.如果父元素也在浮动，浮动元素A任然是参照他的父元素进行浮动，这一点与浮动父元素不浮动时没有区别，但是父元素会被浮动元素撑开，拥有自适应的高度。（所谓的清除浮动）
c.其他的盒子在排版时，会无视脱离文档流的盒子，即与其相邻的盒子会发生覆盖重叠，但这些盒子中的文本却会被浮动盒子排斥而环绕浮动盒子。
c.盒子的浮动会参照其父元素的width，但父元素的height不会影响浮动元素的位置，正常流中的父元素的height不会通过自适应去包裹其浮动元素，因为浮动元素已经脱离普通流。（这给排版带来一定的困难）
绝对定位（Absolute Positioning）：绝对定位的元素会脱离普通流，并且完全和普通流中的元素脱离关系。
BFC（Block Formatting Context）：块级格式上下文
视觉格式化模型：定义了CSS中的盒模型，包括块盒（block box），行内盒（inline box）和匿名盒（anonymous box）。
BFC的概念：可以理解为隔离了的容器，其内部的元素在布局上不会对外部元素产生影响。（可以将DFC暴力的直接理解为一个单独的html页面）
触发方式：
- 浮动：除了float为no的浮动元素；
- 绝对定位：元素的position为absolute或者fixed
- display设置为inline-blocks，table-cells，table-captions
- 设置overflow为除了visible 以外的值（hidden，auto，scroll）
BFC的作用主要有两个：让容器与容器间的上下边距发生折叠（大吃小）；可以阻止元素被浮动元素覆盖。