一 布局方案：
传统布局（浮动、定位），flex布局，grid布局
1.传统布局：
掌握元素的分类和布局特性、浮动原理和定位原理。
2. flex布局：
通过父元素（flex box）单方面配置相关的CSS属性来决定子元素的布局规则，且在大多数情况下不需要子元素（flex item）的参与，就能完成子元素间地布局问题。
3. grid布局：
二维布局，在IE10才支持，需要使用-ms-后缀（IE11不需要）
二. 布局基础要点：
2.1 CSS基础盒模型（W3C盒模型）
2.3 元素的分类及布局属性
块级元素：独占一行，（width默认100%，height：0）；可以设置任何尺寸相关的属性（width，padding，border，margin）
行内级元素：
1）可置换行内元素：展示内容不在CSS作用域内的元素，展示的内容通过元素的 src, value等属性或 CSS conter属性从外部引用得到，可被替换。随着内容来源或内容数量的变化，可置换元素本身也会有水平和垂直方向上尺寸的变化，典型的可替换元素有<img>, <video>, <embed>, 表单类的可替换元素有<textarea>, <input>, 某些元素只在一些特殊情况下表现为可替换元素，<audio>, <object>, <applet>. CSS content 属性来插入的对象又称作匿名可替换元素。
2）不可置换行内元素：<a>, <span> 不可替换。
布局特点：
（1） 在一行内可以与多个同类型的元素从左到右排列
（2） 不可置换行内元素不能设置 width，height，垂直方向上的 margin ，可置换元素都可以。
（3） 在水平和垂直方向的对齐方式，受父元素的 text-align属性和自身 vertical-align 属性控制（父元素是table-cell时，也受父元素的vertical-align 属性控制），在水平方向默认左对齐，垂直方向上默认在行框的 baseline基线上显示。
注：有些浏览器将可置换行内元素重置为 inline-block 元素，布局特性相同，当 inline-level水平排列时，两两之间可能出现6px的空白。
行内块级元素：（兼具block-level和inline-block特性）
（1）排列方式和行内元素同，不独占一行，从左到右
（2）水平和垂直方向上对齐方式和行内级元素同
（3）和块级元素一样，可以设置任何尺寸属性（width默认0）
2.4 格式化上下文：
BFC：独立封闭的渲染区域，从区域顶部，一个接一个根据自身布局特性进行排列：块级元素：从上到下，相邻的块元素可用 margin 隔离，垂直方向相邻的块元素会发生 margin合并；inline-level / inline-level-block元素，从左到右。
创建 BFC 元素：
特性：
（1）对应一个独立封闭的渲染区域，子元素的CSS样式不会影响BFC元素外部。普通块级元素，子元素的margin-top 不会隔开自身与父元素（普通块级元素），但是会作用到父元素外部（将父元素和叔伯元素或祖父元素隔开）；BFC元素，作为一个独立、封闭的渲染区域，子元素的 margin-top ，会隔开自身与父元素（BFC元素），不会影响到父元素外部。
（2）浮动元素参与BFC父元素的高度计算，也就是BFC元素能识别浮动元素。普通块级元素，不能识别浮动子元素，高度塌陷；BFC元素，能够识别，浮动元素参与BFC元素的高度计算。
（3）占据文档流的BFC元素（可使用 overflow：auto创建），能够识别浮动的兄弟元素，与之同行显示。普通块级：不能识别浮动的兄弟元素，会被浮动的兄弟元素覆盖部分内容。 
（4）占据文档流的BFC元素（可使用overflow：auto创建），width：auto时，会占满当前行的剩余宽度。 
IFC：
1.水平方向一个接一个地显示，垂直方向，每个元素可以设置不同的对齐方式，内部元素被一行行的矩形框包含，这些虚拟的矩形框称为行框。IFC的作用区域可以看成是包含所有子元素的行框组成的矩形区域。
2. 创建：由所包含的子元素创建，只有在一个区域内仅包含可水平排列的元素时才会生成，子元素可以是文本、inline-level、inline-block-level。
3. 特性：
从左到右，从上到下排布；内部每个元素都可以通过设置vertical-align属性来调整在垂直方向上的对齐；包含这些内部元素的矩形区域，形成的每一行被称为 line box（行框）。
2.5 包含块：
1. 定义：
在设置元素属性尺寸属性的百分比值或偏移属性的值时，有一个“相对参考系”，它一般包裹着这个元素的块级祖先元素（一般块级父元素）或离这个元素最近的非 static（relative absolute fixed）定位的祖先元素，他们的容纳区域（content box / padding box）叫做包含块。
特别地，relative 偏移属性的相对坐标系是其在文档流原来的位置。
2. ICB（初始包含块）
在视觉阅读层面，展示内容的两种呈现方式：连续媒体，分页媒体。
连续媒体：采取连续展示内容的方式，保持了展示内容显示的连续性（一页显示所有内容），可以在连续媒体的可视窗口查看当前呈现的内容。浏览器窗口可以看成是连续媒体，当内容尺寸超过 viewport时，可以通过平滑滚动的方式来阅读内容。起始位置为画布原点（首屏的左上角，浏览器渲染数据后生成的内容文档可以看成是一张画布）
分页媒体：采用切页展示内容的方式，将要展示的内容切分成等尺寸的多页（分页显示所有内容），可以在页面显示区域查看当前呈现的内容。像幻灯片、电子书阅读器，就可以通过切页的方式来阅读。
3. 不同定位元素分别对应的包含块
static relative定位元素的包含块是其块级祖先元素（通常是块级父级元素）的 content box
absolute 的是最近的非静态定位祖先元素的padding box，查无非静态定位祖先元素，那么它的包含块是 ICB
fix 的是当前视窗
注：ICB（初始包含块）是专有名词，特指根元素<html />的包含块，不要将一个元素的初始包含块错误理解为它的父元素。、
2.6 基本原理
1. 文档流：页面元素默认存放的“容器”。
特性：按照书写顺序，从左到右，从上到下排列，页面元素根据自身布局属性（block-box / inline-box）决定行内显示还是换行显示；文档流中的元素，相互尊重，有序排列，彼此识别。
脱离文档流：元素脱离了默认存放的容器，换到另一个容器存放。一个元素脱离文档流会导致：它的父元素无法识别它，它也不参加父元素高度的计算。若有一个父元素的所有子元素都脱离文档流会出现“高度塌陷”问题。脱离文档流的方法：将元素设置为浮动元素，将元素设置为absolute、fix元素。
2. 浮动：
起始位置：最后一行最左侧的空白位置，而不管空白位置是否能够容纳当前浮动元素。
浮动方向：左浮动从起始位置向左浮动；右浮动向右。
结束位置：左：遇到第一个左浮动元素或包含块的最左侧padding时，结束浮动；右：遇到最右侧。
同一行内，最多有两条浮动队，左浮动队，右浮动队；一条浮动队可能占满一行；连续浮动的若干元素如果无法在同一行内显示，则会按行被切成两条或更多条浮动队。
浮动元素对 display 的影响：
3. 清除浮动：
作用：改变“当前元素” 与“前一个声明的浮动元素” 之间的默认布局规则，体现为：让当前元素换行显示。
使用者：当前元素（浮动元素 / 非浮动元素的块级元素）。作用对象（清除谁的浮动）：前一个声明的浮动元素。
为什么使用者不包括非浮动的 inline 元素？
因为非浮动的 inline 元素能识别浮动元素，是否使用 clear 清除“前一个声明的浮动元素”的浮动，布局结构是一样的。非浮动的块级元素，无法识别前面声明的左浮动元素，故会和左浮动元素发生重叠（左浮动元素在上），所以非浮动的块级元素使用 clear：left 清除前一个左浮动元素，避免重叠。
clear 属性的取值及应用场景：
left 值的应用场景：前面声明的浮动元素是向左浮动；both：前面声明的浮动元素浮动方向不确定。
注：当前元素如果要清除浮动，清除的是前面声明的浮动元素的浮动，clear 属性要取什么值，跟当前元素的是否浮动或浮动方向没有任何关系，而取决于其前面声明的浮动元素的浮动方向。
如果当前浮动元素或非浮动块级元素，且前面声明的元素是左（右）浮动元素，那么当前元素可以使用 clear：left / right，清除前一个左（右）浮动元素的左（右）浮动，此时当前元素会换行显示；如果当前元素 clear 的浮动与前面一个浮动元素的浮动方向不同向，当前元素不会换行。
清除浮动后 margin 的合并问题：
（1）两个浮动的元素之间，垂直方向上的 margin 不会合并。
（2）非浮动的块级元素和浮动元素之间，垂直方向上的 margin会合并。
清除浮动的特殊应用：解决父元素的高度塌陷问题。
4. 定位：
static: 无法设置 top、right、bottom、left四个偏移属性
relative: 元素在文档流原来的位置
absolute: 离元素最近的一个非 satic （relative / absolute / fixed）定位祖先元素（包含块是它的padding box），如果没有，则为 ICB（出示包含块），即为元素 html 的包含块。
fixed: 当前视窗（viewport）
5. line box（行框）
包含 IFC 内部的所有子元素的虚拟矩形区域，形成的每一行。
模型结构（七线谱）：
top text-top middle baseline text-bottom bottom线，
行框的高度：一行的 top 线和 bottom 线间的垂直距离（上下两个行半距的高度和一个内容区域的高度之和）。影响行框高度计算的因素：（1）自身 line-height 属性的设置，（2）内部 inline-level 子元素的 margin box 高度的取值和 line-height、vertical-align 两个属性的设置。
两个重要属性：line - height vertical - align
由行框和行框内的 inline-level 元素体现，inline-height 决定 inlilne-level 元素所在行框的高度，是 inline-level元素在一行内垂直方向上的显示范围；vertical-align属性决定 inline-level 元素在一行内的垂直对齐方式，即决定 inline-level 元素在一行内垂直方向上的最终位置。
1）line-height
作用：一般用于块级元素设置其内部每一行的高度，即默认行高；也可用于不可置换元素（span a）设置所在行框的高度，每一行计算出的最终行高，既受父元素 line-height 的影响，也受子元素 line-height 的影响。
取值：<length>, <number>, <percentage> 和关键字 normal（默认值）
length：使用指定带单位的长度来设置 line-height，长度单位可以是 px pt em rem
number：使用 font-size 值的倍数来设置 line-height
percentage：用 font-size 值的百分比来设置 line - height
关键字 normal：计算出的尺寸，取决于浏览器各自的解析机制和选用的 font-family类型，浏览器根据选用的 font-family 类型计算出一个合适值。
对元素高度的影响：
（1）对块级元素自身 height 的影响：不设置 height 时，元素仅有一行时，height=line-height，多行时，height等于每一行的 line-height 之和。
（2）对不可置换行内元素（span）height 的影响：单行时：height=text-top 到 text-bottom 的距离，line-height 取值不会影响到 height，height 由 font-size 和浏览器的默认机制决定（一般 > font-size ，大小取决于浏览器解析机制）。多行时：height=第一行的 text-top线到最后一行的 text-bottom 线的距离，line-height 取值会影响到 height，height=line-height * 行数-（line-height - 每一行 text-top线到 text-bottom 的距离 ），即 height=line-height*行数 - 2*half - heading
（3）不可置换的子元素（span）的line-height 对父元素 height 的影响
块级元素的每一行行高都可以不同；不可置换的子元素（span）的line-height 可以决定所在行框的高度；如果一个父元素不设置 height，那么其height=所有行高之和；不可置换的行内子元素的 line-height 属性是通过影响行框的高度来影响父元素的高度的。
2）vertical-align 属性：
用于设置 inline-level 元素自身在行框内的垂直对齐方向，控制范围在一行内。值有 top、middle、baseline（默认）、bottom，不常用的有 text-top, text-bottom, sub, super, 几乎不用的 length, percentage.
取值作用：
top：当前 inline-level 元素的上 margin edge 在行框内贴顶；
bottom： 下 margin edge 在行框内贴底；
middle：垂直平分线和行框内的 middle 线重合；
baseline：下 margin edge 紧贴在行框的 baseline上。
table-cell 元素用于控制其内部子元素在垂直方向上的对齐方式，而且这些子元素的类型不受限制，span / div，用 table 布局来实现子元素在父元素内部垂直居中。
6. margin
用来隔离自身与相邻元素或父元素，在元素水平 垂直方向上的居中定位发挥重要作用。
6.1 auto的计算规则（在 width 和 margin 上使用）
1）水平方向
设置文档流中的块级元素在父元素内部水平居中：给元素设置固定宽度，使用 margin：0 auto
文档流中的块级元素如果不设置任何水平尺寸属性，默认的width 是当前行的 content width，此时 width 取 auto 和 100% 最终计算值一样。
2）垂直方向
不可以设置 margin：auto 0，让其垂直居中，因为文档流中的块元素垂直方向的 margin 为 auto 计算规则与水平方向上计算规则不同：不取父元素剩余的高度，而是0.
要实现子元素在父元素内部垂直居中，就要保证：子元素的 top 值 + bottom值为 0，（让子元素 outheight = 包含块 height）；子元素的 top 值取0 （让子元素的上 margin edge 紧贴包含块的顶部）。
说明：绝对定位的子元素 top 为 0，轮廓（包含margin）的上边界与其包含块内容区域的顶部紧贴
6.2 margin合并：
垂直方向上：元素与自身或相邻的兄弟元素、父元素、子元素的 margin 发生合并，margin 取较大的值，水平方向上则不会。
6.3 子元素的 margin 垂直方向隔离父元素的情况（水平始终可以隔离）：
（1）父元素是 BFC 元素
（2）父元素拥有 border
（3）父元素拥有 padding
（4）子元素是可置换元素或 display为 inline-block inline-table table-caption的元素 （可置换行内元素的display 属性为 inline-block、inline-table 的子元素，垂直方向上的 margin 能够隔离自身与父元素）。
在垂直方向上，兄弟元素之间不要设置相邻的 margin ，子元素也不要使用 margin 来隔离父元素，这样有较好的兼容性。
631
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
