[深入理解CSS|前端青训营笔记]

基础知识

布局和定位

层叠上下文

变形 过度 动画

响应式设计

css生态相关

基础知识

层叠式 优先级

层叠三大规则

样式表来源 > 选择器优先级 > 源码位置

样式表优先级

用户代理样式表中的 !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()

盒模型

浏览器根据视觉格式化模型(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