CSS

BFC

• 块级格式上下文，提供一个单独的布局容器区域，区域内的元素和区域外的互不影响
• 通过 float、overflow、position、display等方式都可以创建BFC
• BFC的作用：通常用于消除margin的合并以及BFC内元素的单独定位

1. 块级格式上下文，即盒模型
2. 触发条件：
   1. 根元素
   2. float：非none
   3. position：absolute、fixed
   4. overflow非visible。
   5. display为inline-block, table-cell,table-caption
3. 特性
   1. 同一个BFC的相邻box的margin重叠。
   2. float元素，会使父元素高度塌陷
   3. 独立元素，内部子元素不会影响到外面
4. 清除浮动
   1. 受影响元素：clear： both
   2. 父元素：overflow：hidden
   3. 父元素使用伪元素：使用clear： both。

选择器

• 类选择器、ID选择器、标签选择器、兄弟选择器、子选择器、属性选择器等
• important 优先级最高、之后是内联样式；在选择器中ID选择器优先级最高、之后是类选择器、最后是标签选择器，选择器的优先级可以叠加

盒模型

• IE盒模型：宽高包含了padding和border
• W3C盒模型：宽高不包含padding和border
• box-sizing: border-box; 可以将盒模型设置为IE盒模型

flex

• 包含主轴和交叉轴两条轴线，提供属性基于这两条轴进行伸缩布局
• flex-direction：用来设置伸缩的方向，默认是水平伸缩
• flex-wrap：设置flex容器实现多行中的换行伸缩
• justify-contnet和align-items分别表示子元素在主轴和交叉轴中的对齐方式
• flex-flow为flex-direction和flex-wrap的合并属性
• flex-basis：设置子元素的空间大小，如果不设置的话默认就是子元素内容的大小，因此父元素flex之后子元素会宽度收缩
• flex-grow：当容器剩余宽度足够时，子元素是否需要延主轴放大拉伸
• flex-shrink：当容器宽度不足时，子元素是否需要延主轴方向收缩变小
• flex: 1 为子元素 flex-grow、flex-shrink、flex-basis三个属性值的合并，可分解为 flex: 1 1 0; 若basis不为0，则子元素无法等分，为auto时子元素会根据自身内容宽度自动伸缩

动画

• CSS提供了animation属性用于实现动画，animation属性由其子元素合并而成
• animation-name：动画的frame名称，通过@keyframes定义动画帧
• animation-delay：动画开始的延迟时间
• animation-direction：动画执行完成后是否需要倒放
• animation-duration：单次动画播放总耗时
• animation-interaction-count：动画执行的重复次数，infinite 为无限次，会一直循环
• animation-timing-function：动画执行的分段速度，即贝塞尔曲线的变化规则
• 通过addEventListener添加animationstart、animationend、animationinteraction 事件来监听动画的变化
• transition也可以实现动画，主要用来控制CSS属性值的过渡效果

变换

• 支持在三维坐标系内进行平移、转换、缩放等效果
• 包含：matrix 矩阵变换、scale 缩放、rotate 旋转、skew 倾斜
• transform-origin 用于控制当前变换坐标系的原点
• perspective-origin 用于设置三维变换中Z轴的景深，从而实现3D效果

z-index

• z-index控制元素在层叠上下文中的层叠顺序，值越大，则越在上面
• 层叠上下文产生条件：根元素、position非static且子元素存在z-index、opacity小于1的元素等
• 存在层叠上下文的元素中子元素的z-index只在上下文的父元素中生效，且层叠上下文也可以进行层叠

position

• static：默认的静态定位，元素根据文档流按顺序排布
• relative：相对定位，元素相当于文档流中的位置进行定位
• absolute：绝对定位，元素会脱离文档流，相对于最近的非static定位的父级元素定位
• fixed：固定定位，元素脱离文档流，默认是相对于浏览器视窗进行定位，但是当父元素存在 transform 时，会相对于该父元素进行定位
• sticky：粘性定位，相对于最近的可滚动祖先进行定位

效果实现

• 垂直居中
  • flex布局中： align-items:center
  • Grid布局中：place-self:center
  • absolute定位中top、bottom，margin: auto
  • margin-top: 50%; transform: translate(-50%,0)
  • display: table; text-align:center；和 dispaly: table-cell；vertical-align: center;
  • 行内元素：line-height等于容器高度
• 0.5px的线
  • 最常用的transform: scale(0.5)
  • 通过伪类设置高度0.5px实现
  • 通过box-shadow设置阴影高度0.5px实现
• 响应式
  • 媒体查询：针对于不同尺寸屏幕书写不同的样式；缺点是需要书写多套样式
  • 百分比样式：在设置宽高时通过设置百分比去控制；缺点是很难控制百分比是相对与哪个元素
  • vw和vh：与百分比的类似，固定相对于视窗的百分比；缺点是强制与视窗绑定，无法设置临界值
  • rem：使用根元素的font-size为基准设置宽高，根元素font-size根据屏幕尺寸动态变化
• 文本省略
  • 单行文本
    • 需要先设置容器宽度，然后通过text-overflow: ellipsis; overflow: hidden; white-space: nowrap;实现
  • 多行文本
    • display: -webkit-box-; -webkit-lint-clamp: 2; -webkit-box-origent: vertical;
    • 设置高度为2em，然后通过伪元素展示省略号并覆盖最后文字的方式实现
• 三角形
  • 元素宽高为0，设置三个border，其中两个颜色为透明，中间的不透明

link vs @import

1. 都是引入css的方式
2. link 是HTML的标签，除了引入css还能引入其他事务
3. link标签在页面加载同时，会同步加载，@import会等页面完成后再加载
4. @imprt写法更简单，便于维护，可以引入不同的模块
5. link标签会阻塞浏览器渲染，优先级更高，兼容性也更好

常见的单位

1. px
2. em
3. rem
4. vw/vh
5. %
6. vmin/vmax。vw和vh中较小/较大的值

水平居中

1. 行内元素：text-align：center
2. 块级元素：margin：0 auto
3. position: absoult + transform
4. flex: justify-content: center

垂直居中

1. 行内元素：line-height
2. 行内块：display:inline-block;vertical-align:middle.
3. flex：align-items：middle
4. position: absoult + transform

回流重绘

回流：重新根据样式计算每个元素在页面上的大小和位置 重绘：当计算完盒模型大小位置后，根据样式绘制盒模型样式。

1. 回流：

   • 添加或删除元素
   • 修改位置；修改尺寸
   • 页面首次渲染
   • 修改浏览器大小
   • 获取DOM的一些特定属性

2. 重绘：

   • 颜色；阴影；文本方向

3. 避免回流方式

   • 修改class类名
   • 脱离文档流进行操作
   • 合并dom操作
   • 使用transform、opactity这些