00_CSS简要发展历史
CSS3之前所说的规范都是2.1，CSS3及之后的规范集合在习惯上都称为CSS3
01 基础知识
层叠cascading规则、选择器优先级
层叠-接轨规则声明之间的规则
层叠三大规则：
优先度最高-样式表来源
优先度其次-选择器的优先级
选择器的类型：
选择器优先级：
优先级最次-源码位置
谁先声明的谁生效
一个比较好的代码规范：
- 选择器尽量少用id
- 尽量不要用！important，后面再设置会无效
- 自己的样式要加载在引用库样式的后面
继承
大部分具有继承特性的属性和文本相关：
还有少部分列表、表格的属性
可以使用inherit关键字显式指定一个属性值从其父元素继承
值和单位
盒模型
负margin不推荐使用，会导致可读性和复杂度提高
02 布局和定位
常规流
任意盒子的display：
- 外部显示类型(display-outside):规定了该盒子如何与同一格式上下文中的其他元素一起显示
- 内部显示类型(display-inside):规定了该盒子内部的布局方式。比如display: flex;其外部显示是block，参与 BFC;display: inline-flex，则外部显示是inline，参与IFC。他们内部的盒子都参与弹性盒子布局。
概念：
- BFC（Block Formatting Context）为 块级格式化上下文
- IFC（Inline Formatting Contexts）为 内联格式化上下文，IFC 的 line box（框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的 padding/margin 影响)。
块级格式化上下文
格式上下文的布局规范为：
在一个块格式区域中，盒子会从包含块的顶部开始，按序垂直排列。同级盒子间的垂直距离会由“margin”属性决定。相邻两个块级盒子之间的垂直间距会遵循外边距折叠原则被折叠。在一个块格式区域中，每个盒子的左外边缘会与包含块左边缘重合(如果是从右到左的排版顺序则盒子的右外边缘与包含块右边缘重合)。
BFC本身是block formatting context的缩写，是一种格式规范。
如果说一个盒子是BFC或者有BFC特性，那么BFC表示的是block formatting context root。不管它外部显示类型是什么，但是它的内部显示类型是flow-root，其实就是这个盒子内部形成了一个新的块级格式化上下文。BFC具有一定的沙盒特性。
如何触发一个盒子的BFC特性? 以下条件满足任何一个即可
- display: flow-root 、 inline-block;
- position: absolute 、 fixed:
- float:不为none;
- overflow:不为 visible
外边距塌陷
内联级格式化上下文
在内联格式区域中，盒子会从包含块的顶部开始，按序水平排列。只有水平外边距、边框和内边距会被保留。这些盒子可以以不同的方式在垂直方向上对齐:可以底部对齐或顶部对其，或者按文字底部进行对齐。我们把包含一串盒子的矩形区域称为一个线条框。 (The rectangular area thatcontains the boxes that form a line is called a line box.)
实际用例：
- 单行文字垂直居中，利用line-height=盒子高度的垂直居中特性
- 文字和icon垂直对齐。利用了line box中计算高度的原理和vertical-align的设置，垂直对齐，但不是完全垂直居中。如果设置父元素font-size:0，基线和中线重叠，则居中对齐
Flex弹性盒子-一维空间布局
Flexible BoxLayout 是为了提供更加高效灵活的布局方式，在即便是宽高未知的情况下，也能排列和分割一个盒子内部的布局。而且在不同布局方向(横向/纵向)调整更为灵活。
弹性盒子的相关属性：
弹性盒子布局的例子：
Grid网格布局-二维空间布局
2017年推出的Grid布局可以定义由行和列组成的二维布局，然后将元素放置到网格中。元素可以只占其中一个单元格，也可以占据多行或多列。
网格布局示例
使用策略
Flex
- 1.一维布局
- 2.基于内容
- 3.浏览器兼容性更好
Grid
- 1二维布局
- 2基于布局
- 3.2017年后浏览器的版本普遍支持
Grid for layout, Flexbox for components
- 1.大面积或整体布局 推荐使用Grid
- 2.小面积或组件中，或Grid ltem内中可以使用Flex做灵活布局
Multicol多列布局
定位
为了我们可以在文档流的基础上，让元素移动，做出更多灵活的改变。当position属性的取值非static的时候，可以使用 top,right, bottom,left 对其进行定位
relative
元素相对于自己原来在文档流中的位置进行定位，但是原来文档流的空间还在。
absolute
元素被移出正常文档流，且没有预留空间，相对于最近的非static定位祖先元素的进行定位
fixed
元素被移出正常文档流，且没有预留空间，相对于屏幕视口进行定位，屏幕滚动也不会改变位置
sticky
元素相对它的最近滚动祖先(祖先的overflow是scroll/hidden/auto) 的视口(scrollport)定位
03 层叠上下文 the stacking context
层叠上下文是对HTML元素的三维构想，将元素沿着垂真屏幕的虚构的Z轴排开
形成新的层叠上下文的条件(任一即可)
CSS3之前·········
- position:relative 或 absolute;并且 z-index 不是auto
- position: fixed 或 sticky
CSS3之后.........
- flex或 grid 的子元素;并且z-index 不是auto
- opacity 的值小于 1
- transform 的值不为 none
- will-change的值不为 通用值
- 详见规范.....
每个元素都有一个层叠水平 层叠上下文就是对层叠水平进行排序
如果z-index=0，则说明创建了个新的层叠上下文，其子元素也无法超越父元素（z-index=0）的层叠水平，这与z-index=auto不同
编写z-index的建议:
- 使用css变量或者预处理语言的变量，管理z-index的值
- 将预设间隔设置10或100，方便后续的插入
04 变形、过渡、动画
transform 变形
2D 相关属性
- transform: translate(移动)、rotate(旋转)scale(放缩)、matrix(变形矩阵)等
- transform-origin: right top、center等表示变形时依据的原点
3D 相关属性
- transform: translate3d 、rotate3d、scale3d、matrix3d等
- transform-origin: right top、50px 30px 等表示变形时依据的原点
- transform-style:flat 或 preserve-3d 看子元素的3d表现
- perspective:观看点距离z=0这个平面的距离，可以在transform中用perspective()使用作用为当前元素，也可以直接使用，给后代元素一个统一值
- perspective-origin: 观看者的位置，如 top、 bottom等
- backface-visibility: 元素正面只有朝向观察者的时候可见
transition过渡
通过指定某些元素属性从一种起始状态，在一段时间内以某种变化节奏，过渡到终止状态
其中timing-function 一般有三种用法: 线性(linear)、贝塞尔曲线(cubic-bezier 或 ease-in等)、阶跃(step)
animation
如何写动画性能更好?
- 尽量不用触发reflow的属性
- 在遇到性能问题时可以触发硬件加速，比如设置will-change属性、设置transform3d等
- 尽量使用transform 和opacity 去写动画
05 响应式设计
应遵循的原则
- 优先选用流式布局，如百分比、flex、grid等
- 使用响应式图片，匹配尺寸，节省带宽
- 使用媒体查询为不同的设备类型做适配
- 给移动端设备设置简单、统一的视口
- 使用相对长度，em、rem 、vw 做为长度度量
