CSS学习笔记
- line-height 继承规则：
- 当父元素的
line-height是具体的数值时，子元素直接继承这个数值。
- 当父元素的
line-height是比例或小数值时，子元素继承这个比例，并根据自己的font-size计算line-height。
- 当父元素的
line-height是百分比时，子元素继承的是根据父元素font-size计算出来的实际值。
- 文本框中输入文本展示在 div 中不换行问题：
white-space: pre-wrap。
- 设置如何处理元素内的空白字符 white-space：
normal（默认）、nowrap、pre、pre-wrap、pre-line、break-spaces。
- 多行文本父元素确认高度，垂直居中：
disaply: table-cell; vertical-align: middle。
- overflow：
visible（默认）、auto、hidden、scroll、inherit。
- position：
static（默认）、relative、absolute、fixed、sticky、inherit。
- 指定元素的宽高比 aspect-ratio：
auto（默认）、<number [0,∞]>、<number [0,∞]> / <number [0,∞]>。
- 使用关键字
auto时，元素的宽高比将根据其自身的大小计算得出。这对于某些本身就固有的宽高比的元素非常有用，比如 <img> 元素。
- 超链接的伪类设置顺序：
link、visited、hover、active。
- 原因在于 CSS 的层叠规则以及这些伪类在用户交互过程中的自然顺序。如果不按照推荐的顺序编写，可能会导致样式层叠的问题，进而影响最终的样式呈现。
- 子元素的
padding、margin使用百分比时，是根据父元素的宽度来计算的。
[class *= "a-"]匹配类名中包含"a-"的元素；[class ^= "a-"]匹配类名以"a-"开头的元素。word-break: break-all：截断单词换行；overflow-wrap: break-word：不截断单词换行。- 在客户端嵌入页面中使用
-webkit-app-region: drag实现窗口拖动效果时，会对页面中的某些交互元素（如按钮、链接等）造成影响，因为浏览器会将鼠标事件捕获为拖动事件，而不是传递给这些元素。需要为响应事件的子元素添加-webkit-app-region: no-drag来覆盖默认的行为。
- IOS 获取底部安全区域距离：在
iOS >= 11.2使用constant(safe-area-inset-bottom)；在iOS >= 11.2使用env(safe-area-inset-bottom)。
pointer-events: none设置元素不接收任何鼠标事件。- 用于控制打印输出的颜色调整行为 print-color-adjust：
economy（默认）、exact。
economy：允许对元素样式进行适当的调整；exact：尽力保留元素样式，不考虑性能及成本因素。
- CSS 像素单位：
px、pt、em、rem、vw、vh。
px：表示物理像素单位，在标准的 96dpi 显示器上，1px 等于 1/96 英寸。在高分辨率设备上，1CSS 像素可能对应多个物理像素；pt：固定的物理单位，基于物理尺寸而非像素，1pt 等于 1/72 英寸，不随屏幕分辨率变化；em：相对于当前元素字体大小的单位;rem：相对于根元素字体大小的单位;vw、vh：视口宽度和高度的百分比；
- 紧接兄弟选择器
+：有一个共同的父元素，并且紧跟在特定元素之后；通用兄弟选择器~：有一个共同的父元素，并且位于特定元素之后。
- CSS 特性查询：
@supports，如@supports (display: grid)。
