CSS 知识清单
选择器及优先级
BFC
水平与垂直居中
水平居中
- 内联元素：
text-align: center - 块级元素：
margin: 0 auto - 内联块实现：将行内多个元素设定为 inline-block 行内块，然后在父元素添加 text-align。
- 弹性布局：
justify-content: center。 - 固定宽度-外边距偏移：先相对于父元素向右偏离半个父元素宽度，然后使用负左外边距(负 margin)校正居中元素的偏移量。
- 固定宽度-外边距适配：(position: absolute; left: 0; right: 0; margin: 0 auto)
- 未知宽度：当定位元素未知宽度时，使用 transform 对自身进行偏移可以解决这个问题(left + transform)
垂直居中
- 单行内联元素：设置内联元素的高度 height 和行高 line-height 相等，从而使元素垂直居中。
- 表格布局：使用表格布局的 vertical-align: middle 可以实现子元素的垂直居中。
- 弹性布局：为父元素设置为 flex 弹性布局，并设置布局方向 flex-direction 为垂直，子元素适配 justify-content 为居中即可实现垂直居中
- 精灵元素：利用精灵元素（Ghost Element）技术实现垂直居中，即在父容器内放一个 100% 高度的伪元素，让 文本 和 伪元素 垂直对齐，从而达到垂直居中的目的。
- 固定高度-外边距偏移：当居中元素的 高度和宽度 已知时，垂直居中问题就很简单。通过 绝对定位 元素距离顶部 50%，并设置 margin-top 向上偏移元素高度的一半，就可以实现垂直居中了。
- 固定高度-外边距适配
- 未知高度：与 块级元素-有滚动条 实现效果类似，只是对定位元素自身的偏移使用 transform 实现(top + transform)
- 图片垂直居中：
font-size: 0。在 font-size 不为 0 时，图片设置垂直居中时的中线位置并不是它的父元素的绝对中线位置，它们会有一个和字符 x 高度相关的高度差。设置 font-size 为 0，会消除这个高度差，使图片的中线位置和父元素中线重合。
水平垂直居中
- 文本元素：通过设置父元素容器 text-align 实现水平居中，设置一致的高度（height）和行高（line-height）实现对子元素的垂直居中，垂直居中元素设置 vertical-align 以及 line-height 为 initial 实现子元素内部的基准线垂直居中
- 固定垂直居中元素的宽高：相对于父元素容器左边距和上边距坐标偏移 50%，通过计算垂直居中元素宽/高，利用负 margin 偏移自身宽/高的 50%。或者通过设置上下左右坐标为 0，外边距自适应 auto 实现垂直居中。两种处理手法都需要设置垂直居中元素为标准盒模型。
- 不确定垂直居中元素的宽高：相对于父元素容器左边距和上边距坐标偏移 50%，使用 transform + translate 将垂直居中元素自身偏移负 50%，使用标准盒模型
- 弹性布局：父元素设置为弹性布局容器，并将 justify-content 和 align-items 设置为 center 居中
- 网格布局：父元素设置为网格布局容器，垂直居中元素设置外边距 margin 为自适应 auto 即可
布局与响应式
双栏布局
左固定右适应：
- float + margin
- float + margin 偏移
- float + overflow(BFC)
- table
- 绝对定位
- flex
- grid
左适应右固定:
- float + margin
- table
- flex
- grid
三栏布局
两侧栏固定宽度，中间栏自适应
- float
- 绝对定位
- 表格布局
- 弹性布局
- 网格布局
- 圣杯布局
- 双飞翼布局
伪类与伪元素
CSS 隐藏页面元素
CSS 画一个三角形
利用 border
css
.triangle {
width: 0;
height: 0;
border-width: 100px;
border-style: solid;
border-color: transparent transparent #000 transparent;
}利用 clip-path 剪裁
css
.triangle {
width: 200px;
height: 200px;
background: #000;
clip-path: polygon(0% 0%, 50% 100%, 100% 0%);
}支持小于12px 的文字方式
视差滚动效果
回流与重绘
获取页面元素的位置
各种高度clientHeight/scrollHeight/offsetHeight及应用
元素 offset client scroll 相关属性简介
Flex 布局和 Grid 布局?
主题切换方案
CSS 渲染优化
移动端适配
CSS 动画
requestAnimationFrame，终结定时器动画时代！
animation、transition、transform、translate傻傻分不清
深入解析你不知道的 EventLoop 和浏览器渲染、帧动画、空闲回调