高度过渡

当想实现一个 height:0 到 auto 的平滑过渡，一般有以下几种思路：

1. 使用 transition: 500ms height ease;，但是 auto 并不是一个确定的值，导致 transition 是无效的
2. 使用 transition: 500ms max-height ease;，但是过渡动画会不准确，有延迟
3. 使用 transform: scaleY()，但是会导致元素被压缩
4. 使用 JavaScript 解决
5. 使用 Grid 布局，当前最优解

图标描边

段落首字母

first-letter: 当前元素的第一个字母

段落高亮样式

selection：文本选中样式选择器

段落文本高亮

box-decoration-break：块状盒子片段，clone 能使得每个片段都具有相同的 border、box-shadow 和 background

元素深度聚焦捕获

focus-within: 当前元素以及后代元素的聚焦事件

元素必填项

has: 表示满足一定条件后，就会匹配该元素

居中定位

absolute + margin

absolute + transform

flex

grid

table

隐藏元素

display

元素在页面上消失，不占据空间。

opacity

元素在页面上消失，占据空间。

何为 box

Box 是 CSS 布局的 对象 和 基本单位， 一个页面是由很多个 Box 组成的。

[].forEach.call(document.querySelectorAll('*') , (dom) => dom.style.outline = '1px solid red')