理解CSS

CSS（Cascading Style Sheet）对HTML做补充，做效果。现在使用的为最新的CSS3.

层叠（Cascading）

层叠三大规则：（优先级依次递减）

1. 样式表来源
2. 选择器优先级
3. 源码位置

1、样式表来源重要次序排序

1. 用户代理样式（浏览器默认样式）
2. 用户样式表 很少有
3. 作者样式表 developer写的
4. 作者样式表中的 ！important
5. 用户样式表中的 ！important
6. 用户代理样式表中的 ！important

2、选择器优先级

具体优先级：

源码顺序：

The last declaration in document order wins.

1. 对于@import的样式，根据@import的顺序
2. 对于link和style标签的样式，根据在document中的顺序决定。

• 选择器尽量少用id
• 尽量不要用！important
• 自己的样式加载在引用库样式的后面

继承

继承方向：

• 大部分具有继承特性的属性和文本相关，color、font、font-family、font-size、font-weight、font-variant、fontstyle、line-height、letter-spacing、text-align、text-indent、texttransform、white-space以及word-spacing。还有少部分列表、表格的属性。

• 可以使用inherit关键字显式指定一个属性值从其父元素继承

CSS值和单位

• 单位
  • 长度
    • 绝对长度：px,pt,cm,in...
    • 相对长度：em,rem,ex,rex,...vw,vh,vmin,vmax
  • 角度 ： deg,grad,turn,rad
  • 时间 : s,ms
  • 分辨率 : dpi,dpcm,dppx
• 值
  • 文字类：比如像initial这种关键字，颜色、位置等等
  • 数值类：比如z-index:1这种数值，或者带有单位的数值、百分比等
  • 函数生成：比如calc()，min()，max()等

盒模型

浏览器根据视觉格式化模型(visual formatting model),将所有元素表示为盒子模型，css通过盒模型做layout。

• 控制盒子类型display: block、inline、inline-block、flex、…

• 控制盒子大小&计算方式width，height …box-sizing: content-box、border-box

• 控制盒中内容流overflow: auto、scroll、hidden、…

• 控制定位position: static、relative、absolute、fixed、sticky

• 是否可见visibility: visible、hidden、…

padding、border、margin中，只有margin可以设置负值

常规流布局

任意的盒子display

• 外部显示类型（display-outside):规定了该盒子如何与同一格式上下文中的其他元素一起显示。
• 内部显示类型（display-inside):规定了该盒子内部的布局方式。比如display: flex;其外部显示是block，参与BFC；display: inline-flex，则外部显示是inline，参与IFC。他们内部的盒子都参与弹性盒子布局。

常规流的盒子

• 外部显示为block
  • display: block | flex | grid |table | flow-root |…
  • 块级格式化上下文（BFC）（block formatting context）
• 内部显示为inline
  • display: inline | inline-block |inline-flex | inline-grid |inline-able | …
  • 参与内联级格式化上下文（inline formatting context）

弹性盒子布局

Flexible Box Layout是为了提供更加高效灵活的布局方式，在即便是宽高未知的情况下，也能排列和分割一个盒子内部的布局。而且在不同布局方向（横向/纵向）的调整更为灵活。

网格布局

2017年推出的Grid布局可以定义由行和列组成的二维布局，然后将元素放置到网格中。元素可以只占其中一个单元格，也可以占据多行或多列。

Flex 和 Grid

建议：

1. 大面积或整体布局推荐使用Grid布局
2. 小面积或组件中，或Grid Item中可以使用Flex做灵活布局

定位Position

为了我们可以在文档流的基础上，让元素移动，做出更多灵活的改变。当position属性的取值非static的时候，可以使用top, right, bottom, left对其进行定位。

层叠上下文 (The Stacking Context)

层叠上下文是对HTML元素的三维构想，将元素沿着垂直屏幕的虚构的Z轴排开。

形成新的层叠上下文的条件（任一即可）：

• position: relative或absolute;并且z-index不是auto

• position: fixed或sticky

• flex或grid的子元素；并且z-index不是auto

• opacity的值小于1

• transform的值不为none

• will-change的值不为通用值

• ……详见规范

层叠顺序

层叠级：

关于z-index的使用建议：

1. 使用css变量或者预处理语言的变量，管理z-index的值
2. 将预设间隔设置10或100，方便后续的插入

变形、过度、动画

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 过渡

通过指定某些元素属性从一种起始状态，在一段时间内以某种变化节奏，过渡到终止状态。

Animation 动画

• @keyframes关键帧用来定义动画过程中出现的关键样式
• animation-*相关属性用来为元素添加动画

transform transition animation 性能

如何写动画性能更好？

1.尽量不用触发reflow的属性

2.在遇到性能问题时可以触发硬件加速，比如设置will-change属性、设置transform3d等

3.尽量使用transform和opacity去写动画

响应式设计

媒体查询

媒体查询允许某些样式只在页面满足特定条件时才生效。我们可以将媒体类型（如screen、print）以及媒体特性（如视口宽度、屏幕比例、设备方向：横向或纵向）做为约束条件。

使用媒体查询的一些Tips

1.媒体查询同样遵循cascading层叠覆盖原则，min-和max-选择一个

2.由于设备的多样化逐渐不可枚举，断点的选择尽量根据内容选择

3.由于断点的增加会增加样式处理的复杂度，所以尽量减少断点

设备像素

$$ 假设像素是X*Y \ PPI=X/屏幕宽度(inch)=Y/屏幕宽度(inch)=\sqrt(X^2+Y^2)/屏幕宽度(inch) $$

$$ DPR(设备像素比)=设备像素/CSS像素 $$

viewport

常见的移动端viewport的设置

1.保持scale为1

2.保持scale放缩参数是1/dpr

相对长度的使用

em

• 在非font-size属性中使用是相对于自身的字体大小
• 在font-size上使用是相对于父元素的字体大小(一般不在这个属性上使用，因为font-size的继承特性，多重嵌套后大小会不断放大或缩小，产生混乱)

rem

根元素的字体大小。通过伪类:root或者html选择器选定。由于是根元素的font-size，所以不会像em那样出现多重嵌套问题，减少了复杂性，同时作为一个相对单位，可以进行适配放缩，可以用来做响应式布局.

vw & vh

vw：视窗宽度的1%。vh：视窗高度的1%。同样，vw也可以作为响应式布局的基准单位。由于vw天然是视口宽度的1%，所以不需要js动态配置。应用和rem方案类似.

CSS生态相关

总结

本次课程主要讲解了CSS（Cascading Style Sheet）的相关知识。首先介绍了CSS层叠及规则，其中包括样式表来源、选择器优先级和源码位置等重要规则。接着，讲解了CSS的盒模型、常规流布局、弹性盒子布局和网格布局等相关概念。并深入探讨了CSS的定位属性、层叠上下文和相应的层叠顺序等，以及变形、过渡和动画等特性。最后还详细讲解了响应式设计中的媒体查询、设备像素、viewport、相对长度的使用等相关知识。

总之，CSS作为前端开发中不可或缺的重要组成部分，是实现Web页面美化以及响应式布局的核心技术。同时，也需要注意其层叠、继承等规则，尽量避免影响其性能。