CSS

基础知识

层叠（cascading）、优先级

层叠三大规则：

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

选择器类型？

• #id

• .class

• 组合器

  • 子组合器（>）直接后代
  • 相邻兄弟组合器（+）紧随其后
  • 通用兄弟组合器（~）所有之后的兄弟元素

• 复合选择器（h1.page-header）多个基础选择器连用

• 属性选择器（div[name="aaa"]）

• 伪类选择器（:hover）

• 类型选择器（div）

• 伪元素选择器（::before）

• 逻辑选择器（:is() :where() :not()）

选择器优先级

good practice

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

继承

• 大部分具有继承特性的属性跟文本相关：color font line-height text-align white-space等
• 可以使用inherit显示指定一个属性值从其父元素继承

CSS中的值和单位

盒模型

• 控制盒子类型 display: block、inline、inline-block、flex、...
• 控制盒子大小&计算方式 width、height... box-sizing: content-box、border-box
• 控制盒中内容流 overflow: auto、scroll、hidden、...
• 控制定位 position: static、absolute、relative、fixed、sticky
• 是否可见 visibility: visible、hidden、...

负外边距：

• 设置左边或顶部的负外边距，元素就会相应的向左或向上移动，导致元素与它前面的元素重叠。
• 如果设置右边或底部的负外边距，并不会移动元素，而是将它后面的元素拉过来。

布局

常规流布局

块级格式化上下文（BFC block formatting context）

如何触发一个盒子的BFC特性呢？

• display: flow-root | inline-block
• position: absolute | fixed
• float: 不为none
• overflow: 不为visible

外边距坍塌

会产生坍塌的情况：

• 两个兄弟元素之间相邻的上下外边距
• 父子元素之间相邻的上下外边距
• 内容为空元素自己的上下外边距相邻

消除外边距坍塌的方法：

• 在两个相邻的上下边距之间添加border、padding或内联元素，使之不相邻
• 在父子元素重叠时，可以设置父元素为BFC，使得父子元素在不同级的BFC中