# CSS基础 ｜ 青训营笔记
一、知识点总结
- 基础知识
- 布局定位
- 层叠
- 变形
- 过渡
- 动画
- 响应式设计
- css生态相关
二、基础知识
层叠优先级
样式表来源 > 选择器优先级 > 源码位置
样式表的优先级
- 用户样式表中的important
- 自定义样式表中的impotant
- 自定义样式表的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()
内联
继承
大部分具有继承特性的属性跟文本相关：
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,还有少部分列表、表格的属性
盒模型
浏览器根据视觉格式化模型(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、..
