CSS 常识

👋属性值的计算过程（怎么确定的）

元素的每一个css属性，一定会根据下述优先级，寻找声明值：

作者样式表 > 对冲突属性值进行权重计算 > 继承样式表 > 默认样式表


👋冲突属性值的权重计算规则

元素css属性优先级，都是根据下述规则进行权重总计的：

1. 比较重要性：important > 作者样式 > 默认样式；

2. 比较特殊性：内联 style > #id > .class > 元素标签 > *；

3. 比较次序：靠后的样式优先；

👋元素不再根据"行内"、"块"进行区分

而是表达为：元素的css display属性为块盒 block 和行盒 inline；


👋常用的选择器

• div span 匹配所有位于任意 <div> 元素之内的 <span> 元素；

• ul > li 匹配直接嵌套在 <ul> 元素内的所有 <li> 元素。直接子代选择器；

• p ~ span 匹配同一父元素下，<p> 元素后的所有 <span> 元素。兄弟选择器；

• h2 + p 会匹配紧邻在 h2 元素后的第一个 <p> 元素；直接兄弟选择器；

• 伪类：button :active 点击中的按钮

• 伪元素：button :: content 按钮中的额外内容
  

👋特殊的 css 值

initial：主动将某一css属性设为默认值

unset：清除浏览器默认样式(全部清除all:unset)

revert：恢复浏览器默认样式

👋使用 css 变量

:root { --font: 16px; }
{ font-size: var(--font) }
{ font-size: calc( var(--font) * 2 ) }

👋使用 clip-path 对元素进行任意形状的裁剪

👋使用 box-decoration-break: clone 保持对行盒的截断样式

👋使用 filter 修改元素中的边缘像素点

毛玻璃：backdrop-filter: blur()