1 回顾
1.1 多列布局
设置给包裹元素：
column-count 列数
column-width 列宽
columns 同时设置列宽和列数
column-gap 列间距
column-rule 复合属性 列边框
column-rule-style 列边框分隔
column-rule-width 列边框宽度
column-rule-color 列边框颜色
设置给子元素：
column-span 是否跨列 值：none、all
-webkit-column-break-before
-webkit-column-break-before
-webkit-column-break-inside
1.2 伸缩盒布局
设置给伸缩容器：
display 设置伸缩容器；值：flex、inline-flex
flex-direction 设置主轴方向；值：row、row-reverse、column、column-reverse
flex-wrap 设置换行方式；值： nowrap、wrap、wrap-reverse
flex-flow 同时设置换行方式和主轴方向
justify-content 设置在主轴方向的对齐方式； 值： flex-start、flex-end、center、space-between、space-around、space-evenly
aling-items 设置侧轴方向对齐方式（适合一条主轴线）；值： stretch、flex-start、flex-end、center、baseline
align-content 设置侧轴方向对齐方式（适合多条主轴线）；值：stretch、flex-start、flex-end、center、space-between、space-around、space-evenly
设置给伸缩项目：
flex-basis 设置伸缩项目在主轴方向基准长度
flex-grow 扩展比率，默认值 0。
flex-shrink 收缩比率，默认值 1。
flex 复合属性，同时设置 扩展比率 收缩比率 基准长度
order 伸缩项目排序
align-self 单独设置伸缩项目在侧轴方向的对齐方式；值： auto、stretch、flex-start、flex-end、center、baseline
2 媒体查询和响应式布局
2.1 视口 viewport
① 什么是视口
-
视口是用户网页的可视区域。
-
视口是网页的初始包含块，或者说是根元素的包含块。
② 移动端视口和PC端视口
- 移动端的视口宽度与屏幕一致且无法调整（如果手机可以分屏显示，或者画中画，视口大小也可以调整）
- PC 端浏览器视口可以跳转，通过跳转浏览器窗口大小或者调整调试工具。
③ 完美视口设置
由于历史原因，移动端的浏览器为了让没有做移动适配的网页显示更友好，默认会把浏览器视口宽度缩放为 980px, 不论屏幕宽度是多少。
移动端浏览器的默认缩放行为，会让网页缩小； 如果想要做针对移动端适配的网页就必须不要移动端默认缩放。
可以通过设置完美视口，让移动端浏览器视口宽度与屏幕宽度一致：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
2.2 媒体查询基本语法
① 媒体类型
all 默认值，所有的设备
screen 屏幕，包括PC屏幕、平板屏幕、手机屏幕、电视屏幕、手表屏幕等
print 打印机
② 媒体特性
width 视口宽度
max-width 视口最大宽度； 视口宽度小于等于最大值就满足条件。
min-width 视口最小宽度； 视口宽度大于等于最小值就满足条件。
device-width 屏幕宽度
max-device-width 最大屏幕宽度
min-device-width 最小屏幕宽度
③ 运算符
and 并且
, 或者
not 否定，not 后面只能跟着媒体类型
only 肯定。
@media only screen and (min-width: 768px) {
}
2.3 媒体查询在 CSS 中使用
① 用法一
根据不同的媒体查询条件，加载不同的 CSS 文件。
<link rel="stylesheet" media="mediatype" href="mystylesheet.css">
<link rel="stylesheet" media="mediatype and (media feature)" href="mystylesheet.css">
② 用法二 (推荐)
媒体查询部分的代码与其他 CSS 代码写在一起。
@media mediatype and (media feature) {
CSS-Code;
}
@media (media feature) {
CSS-Code;
}
2.4 响应式布局
① 阈值（断点）
常见的阈值设置： 640px 1024px
0 ~ 640px 小屏幕（手机）
640px ~ 1024px 中等屏幕（平板）
1024px ~ 大屏幕（PC）
常见的阈值设置： 768px 992px 1200px;
0 ~ 768px 超小屏幕
768px ~ 992px 小屏幕
992px ~ 1200px 中等屏幕
1200px ~ 大屏幕
② 移动优先方案（媒体查询的设置）
把移动端的样式写在媒体查询外面，再层层加码，使用 min-width, 阈值从小到大（严格按照顺序）
.container {
margin: 0 auto;
height: 200px;
background-color: pink;
/* 默认宽度 */
width: 100%;
}
@media (min-width: 768px) {
.container {
width: 750px;
}
}
@media (min-width: 992px) {
.container {
width: 970px;
}
}
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}
3 BFC
3.1 什么是 BFC
Block Formatting Context 简称 BFC，中文翻译为 块级格式上下文。
① W3C 中对 BFC 的定义
Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with 'overflow' other than 'visible' (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.
译文：
浮动、绝对定位元素、不是块盒子的块容器(如inline-blocks、table-cells和table-captions)，以及
overflow属性的值除visible以外的块盒(除非该值已传播到视口)，将为其内容建立新的块格式化上下文。
② MDN 上对 BFC 的定义
A block formatting context is a part of a visual CSS rendering of a web page. It's the region in which the layout of block boxes occurs and in which floats interact with other elements.
译文：
块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。
developer.mozilla.org/en-US/docs/…
developer.mozilla.org/zh-CN/docs/…
③ 到底什么是 BFC
首先，BFC 的意思是 Block Formatting Context ，即块级格式上下文。 然后，当元素满足了某些条件，我们认为该元素创建了 BFC。 创建了 BFC 的元素我们可以把他看做是一个独立的容器，容器内的元素不论如何布局都不会影响到外面。
3.2 创建 BFC 的方式
- 根元素。
- 浮动元素。
- 绝对定位或固定定位的元素。
- 行内块元素。
- 表格单元格（th、td）、表格行（tr）、表格标题（caption）、table、thead、tbody、tfoot。
overflow的值不为visible的块元素。- 伸缩项目。
- 多列容器。
column-span为all的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中。
3.3 创建 BFC 可以解决的问题
① 清除子元素浮动的影响
给浮动元素的父元素创建 BFC，清除掉子元素浮动的影响。
② 解决外边距塌陷
给父元素创建 BFC，第一个和最后一个子元素的外边距不会塌陷。
4 margin 合并
margin 合并发生在兄弟块级元素之间，上下的外边距会合并。
但是，行内块元素、浮动的元素、伸缩项目上下外边距并不会合并。
