层叠三大规则
样式表来源 > 选择器优先级 > 源码位置
样式表优先级
用户代理样式表中的 !important > 用户样式表中的 !important > 作者样式表中的 !important > 作者样式表(developer) > 用户样式表> 用户代理样式( 浏览器默认样式)
选择器类别
基础选择器
#id一一ID选择器 Tagname一一类型选择器或者标签选择器 .class一一类选择器*一一通用选择器。该选择器匹配所有元素
组合器
- 子组合器(>) 匹配的目标元素是其他元素的直接后代 如：.parent > .child
- 相邻兄弟组合器(+) 匹配的目标元素紧跟在其他元素后面 如：p+h2
- 通用兄弟组合器 (~) 匹配所有跟随在指定元素之后的兄弟元素 如：Ii.active ~ i
- 复合选择器 多个基础选择器可以连起来使用 如：h1.page ~ header
属性选择器
通过约束属性值，div[data-title="aaa"]
伪类选择器
选中处于某个特定状态或相对于其父级或兄弟元素的位置的元素。 如：first-child，：hover
伪元素选择器
匹配在文档中没有直接对应HTML元素的特定部分，或插入内容。如h2::first-letter，div::before
逻辑选择器
较新的选择器：is（）:has() :where() :not()
内联 > id > class = attribute = pseudo - class > type = pseudo-element
继承
- 大部分具有继承特性的属性跟文本相关：
color、font、font-family、font-size、font-weight、font-variant、font- style、line-height、letter--spacing、text-align、text-indent、text- transform、white-space以及word-spacing
- 还有少部分列表、表格的属性
可以使用inherit关键字显式指定一个属性值从其父元素继承
盒模型
浏览器根据视觉格式化模型(visual formatting model)，将所有元素表示为盒子模型，css通过盒模型做layout
控制盒子类型 display:block、inline、inline-block、flex
控制盒子大小 width,height... box-sizing:content-box border-box
控制盒中内容流 overflow:auto、scroll、hidden
控制定位 position:static、relative、absolute、fixed、sticky
是否可见 visibility:visible、hidden
根据盒模型特性实现一些示例
布局
常规流 弹性盒子 grid 定位
外边距塌陷
- 两个兄弟元素之间相邻的上下外边距
- 父子元素之间相邻的上下外边距
- 内容为空元素自己上下外边距相邻
