盒模型
-
页面中的所有元素都被看做是一个盒子，这个盒子包括了元素的内容content，内边距padding，边框border，外边距margin。
-
padding,是内容区周围的空间。给元素应用背景则会作用域元素内容和内边距。主要用于分隔内容，使内容不至于散布到背景的边界影响美观。 -
border，是在内边距外侧的一条框线。 -
margin，是在边框外侧，围绕盒子可见部分之外的透明区域，用于控制元素之间的距离。 -
outline，类似于border，会在border外侧画一条线，但并不属于盒子的一部分，不会影响盒子的宽高。一般用于辅助画线。 -
总结一个盒子从里到外的顺序就是：content>padding>border>margin
盒子大小
-
默认情况（
content-box），元素盒子的width和height设置的就是内容content盒子的宽高。在默认情况下，改变边框和内边距都不会影响内容盒子的大小，但会影响整个元素盒子。 -
通过修改
box-sizing改变计算盒子大小的方式，该属性默认值为content-box，设置的宽高都会应用于内容区。当修改为border-box时，设置的width和height将会包括内边距和边框（注意，不包括外边距）。
content-box下，盒子总长度 = width + (padding + border + >margin) * 2border-box下，盒子总长度 = width + margin * 2
- 使用百分比作为元素内外边距计算单位时，是基于包含块（父级元素）的宽度来计算的。
可见格式化模型
-
有两种盒子：块级盒子（block box）和行内盒子（inline box）
-
块级盒子沿垂直方向堆叠，盒子在垂直方向上的间距由它们的上、下边距决定。
-
行内盒子沿着文本流水平排列，随文本换行而换行。可以设置水平方向的内边距、边框、外边距，但盒子高度不受垂直方向上的外边距、内边距、边框影响。给行内盒子设置宽高也无效
匿名盒子
- 在屏幕上看到的一切都属于某个盒子，比如，在一个div中的文本时一个匿名块盒子，在p段落中的三行文本，每一行都是一个行内盒子。
外边距折叠
-
垂直方向的两个外边距相遇时，会折叠成一个外边距，折叠后的外边距高度等于两者中较大的那个高度。
-
外边距折叠值发生在常规文本流中块级盒子上，行内盒子、浮动盒子、绝对定位盒子的不会有外边距折叠。
包含块
-
静态定位或者相对定位：包含块的边界就计算到最近的父元素，该父元素的display属性值必须能够提供类似块级的上下文。
-
绝对定位：包含块是距离它最近的定位祖先元素（position不为static的祖先）。如果没有定位祖先，则相对于文档的根元素HTML定位，文档的根元素叫作起始包含块（initial containing block）
-
固定定位：包含块是视口（viewport）
定位
- 相对定位
relative：该元素还会在原来的地方，通过设置top/right/bottom/left，让元素相对于初始位置平移一段距离。 - 绝对定位
absolute：该元素会脱离文档流，在文档中不占用原来的空间。文档中的其他元素会重新定位，当做绝对定位元素不存在。 - 固定定位
fixed：从属于绝对定位，同样会脱离文档流，区别在于固定定位的包含块是视口（viewport），一般用作创建始终停留在窗口相同位置的浮动元素。
浮动
-
浮动盒子可以向左或者向右移动，知道外边界接触到包含块的外边沿，或接触到另一个浮动盒子的外边沿。跟绝对定位一样，浮动元素也会脱离常规文档流。另外，如果不设置浮动元素的宽度，则浮动元素会收缩为适应其中内容的最小宽度。
-
跟在浮动元素后面的行盒子会缩短，从而为浮动元素留空，造成文本环绕浮动盒子的效果。
-
给包含行盒子的元素应用
clear属性，能阻止行盒子环绕在浮动盒子外面。clear，指定盒子的哪一侧不应该紧挨着浮动盒子。
格式化上下文
- 块级格式上下文自动包含浮动。当一个元素具备了触发新块级格式化上下文的条件（比如overflow属性值不是visible的元素，绝对定位的元素），并且挨着一个浮动元素时，它会忽略自己边界必须接触自己的包含块边界的规则，从而达到清除浮动或包含浮动元素的目的。