根元素，即HTML元素
浮动元素：float值为left、right
overflow值不为 visible，为 auto、scroll、hidden
display的值为flow-root、inline-block、inltable-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid
position的值为absolute或fixed

防止margin重叠，可以让其中一个元素变为BFC，比如设置overflow:hidden

（七）元素垂直居中

父相子绝+margin:auto

父相子绝+margin:负值

父相子绝+transform:translate(-50%,-50%)

flex布局：

display: flex;
justify-content: center;
align-items: center;

（八）Flex布局

flex-grow:伸展，默认为0，不伸展

flex-shrink:收缩，默认为1，等比收缩

flex-basis:设置元素的空间，默认为auto，表示为原本大小

flex-direction，设置主轴方向

flex-wrap:是否可以换行

flex:1 即为1 1 0% 可以伸缩

（九）CSS动画方式

transition,transform,animation(@keyframes)

（十）回流和重绘

回流：根据各种样式计算每个盒子在页面上的大小和位置

重绘：进行绘制

解析HTML，生成DOM树，解析CSS，生成CSSOM树
将DOM树和CSSOM树结合，生成渲染树(Render Tree)
Layout(回流、重排):根据生成的渲染树，网页渲染引擎根据元素的尺寸、位置和显示属性来重新计算页面的排版和布局，生成布局树
Painting(重绘):网页渲染引擎根据显示属性 (如颜色、文字大小等) 重新绘制页面元素，不影响元素的位置和尺寸
Display:合成线程，将多个图层合并为一个图层，展示在页面上

当页面布局和几何信息发生变化时，就触发回流；触发回流一定会触发重绘；单若未影响页面布局和几何信息只触发重绘。

回流必定触发重绘，但重绘不一定触发回流。查询元素的几何相关属性会触发回流（重排）

仅修改非布局样式，只会触发重绘。

减少回流和重绘：

1、移动调整元素使用transform

2、使用opacity改变元素的能见度

3、如果需要频繁回流或重绘的节点，可以通过will-change设定成独立的图层，避免该节点的渲染行为影响到其他节点。

4、避免频繁使用Javascript操作dom节点

（十一）响应式

媒体查询，百分比，vw/vh，rem

（十二）position

static：默认，按照原本的元素位置正常排列，设定top,left,right等都无效

relative：可以让元素相对于其正常位置进行移动

absolute：元素并不会跟着一般的排列原则出现在相对的位置上，而是会跳脱原本的排列，针对某个参考点进行定位，出现在某个绝对位置，参考点会是相对于这个元素最接近、且有定位的父元素，如果没有，则会对于html元素进行定位

fixed:固定定位，相对于浏览器视口，适合做固定导航栏、悬浮按钮

sticky：粘性定位，在滚动到达指定阈值时变为固定定位，否则为相对定位，适合做吸顶导航

（十三）display

block：块级元素，div，p，默认继承父元素的宽并且独占一行，高度预设以元素撑开的高度为主，也可以设置高/宽度

inline：行内元素，span，a，会与其他元素并排在一列，不能通过width\height设置宽/高度

inline-block：像inline元素一样同行排列，像block元素一样可以设置高/宽度

display：none将元素完全从页面中移除 visibility:hidden元素被隐藏，但仍占据空间

（十四）单行文本溢出

text-overflow属性值有如下：

clip：当对象内文本溢出部分裁切掉
ellipsis：当对象内文本溢出时显示省略标记（...）
white-space：设置文字在一行显示，不能换行，设置为nowrap
overflow：文字长度超出限定宽度，则隐藏超出的内容

（十五）CSS预编译器

CSS 预处理器是一种通过扩展 CSS 语法（比如支持变量、嵌套、混合等）来提升开发效率的工具，最终会编译成标准的 CSS。常见的预处理器有 Sass、Less、Stylus，我个人学习/使用的是 Sass。

包含一套自定义的语法及一个解析器，根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 Css 文件。

sass：后面受less影响进化到了全面兼容css的scss，

less

stylus

SCSS 是 Sass 的语法扩展，兼容 CSS 语法（用 {} 和 ;），而 Sass 缩进语法更简洁（无括号分号）。