CSS
CSS基础
- 层叠规则、选择器、继承、值和单位、盒模型
层叠
三大规律：
- 样式表来源
- 重要排序：用户代理样式、用户样式表、作者样式表、作者样式表中的！importan、用户样式表中的！important、用户代理样式表important
- 选择器优先级
- 源码位置
继承
- 大部分具有集成特性跟文本相关：color、font、font-family、font-size、font-weight、font-variant、font-style、line-heght、letter-spacing、text-align、tex-indent,text-transform、white-space以及word-spacing还有少部分列表、表格的属性
- 可以使用inherit关键显示制定一个属性值从其父元素继承
值和单位
- 值：文字类、数值类、函数生成
- 单位：长度单位（绝对长度、相对长度）、角度、时间、分辨率
盒模型
- 浏览器根据视觉格式化模将所有元素表示为盒子模型，CCS通过核模型做layout
- 控制盒子类型：displaybl：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...
布局和定位
常规流
- 任意盒子的display->常规流中的盒子->块级盒子block（参与块级格式化上下文）、内联级盒子inline（参与内联级格式化上下文）
块级格式化上下文的布局规范为在一个块格式区域中，盒子会从包含块的顶部开始按序垂直排列。同级盒子间的垂直距离会由margin属性决定，相邻两个块级盒子之间的垂直间距会遵循外边距折叠原则被折叠。在一个快格式区域中，每个盒子的左外边缘会与包含块左边缘重合（如果是从右到左的排版顺序，则盒子的右外边缘与包含块右边缘重合）。
弹性盒子
为了提供更加高效灵活的布局方式，在即便是宽高未知的情况下，也能排列和分割一个盒子内部的布局。而且在不同布局方向的调整更为灵活。
Grid
二维布局、基于布局
定位
为了我们可以在文档流的基础上让元素移动做出更多灵活的改变。当position属性的取值非static的时候，可以使用top，right，bottom，left对其进行定位
层叠上下文
- 层叠上下文是对HTML元素的三维构想，将元素研制垂直屏幕的虚构的Z轴排开
- 形成新的层叠上下文的条件(任一即可)：
- position: relative 或 absolute; 并且z-index不是auto
- position: fixed或sticky
- flex或grid的子元素;且z-index不是auto
- opacity的值小于1
- transform的值不为none
- will-change的值不为通用值
