CSS

css

1. 盒模型（box-sizing）

   content-box：W3C盒模型，标准盒模型，width = content.width；

   border-box：IE盒模型，怪异盒模型，width = content.width + padding + border；

2. CSS选择器优先级

   !important

   行内样式style

   id选择器

   类选择器/属性选择器/伪类选择器（.class.active[href=""]）

   元素选择器/关系选择器/伪元素选择器（html+div>span::after）

   通配符选择器

3. 单位
   px：绝对单位，页面按精确像素展示；
   em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值；
   rem：相对单位，可理解为”root em”, 相对根节点html的字体大小来计算，CSS3新加属性；
   vw：viewpoint width，视窗宽度，1vw等于视窗宽度的1%；
   vh：viewpoint height，视窗高度，1vh等于视窗高度的1%；
   vmin：vw和vh中较小的那个；
   vmax：vw和vh中较大的那个；
   
   

4. BFC

   BFC（Block Formatting Context）格式化上下文，是Web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。

   • BFC应用
     • 防止margin重叠
     • 清除内部浮动
     • 自适应多栏布局（2栏以上）
     • 防止字体环绕
   • 触发BFC条件
     • 根元素
     • float值不为none
     • overflow值不为visible
     • display的值为inline-block、table-cell、table-caption
     • position值为absolute、fixed
   • BFC特性
     • 内部的Box会在垂直方向上一个接一个的放置
     • 垂直方向上的距离由margin决定
     • BFC区域不会与float的元素区域重叠
     • 计算BFC高度时，浮动元素也参与计算
     • BFC就是页面上的一个独立容器，容器里子元素不会影响外面元素

5. 清除浮动

   浮动元素后面增加空的div，设置 style 为 clear: both

   给父元素添加overflow: hidden或者auto，触发BFC

   给末尾元素after增加一个点，并设置为clear: both

6. block、inline、inline-block

   block：可设置宽高内外边距、独占一行、默认宽度100%，不受空格影响，可以容纳行元素和其他块元素

   inline：不支持宽高设置、宽度根据内容自动撑开、自左向右排列、受空格影响、不独占一行

   inline-block：支持宽高设置、自左向右排列、受空格影响、不独占一行、块之间有缝隙、具备块元素和行内元素的所有特点

7. 回流与重绘

   回流：当我们对 DOM 的修改引发了 DOM 几何尺寸的变化（比如修改元素的宽、高或隐藏元素等）时，浏览器需要重新计算元素的几何属性（其他元素的几何属性和位置也会因此受到影响），然后再将计算的结果绘制出来。这个过程就是回流（也叫重排）。

   重绘：当我们对 DOM 的修改导致了样式的变化、却并未影响其几何属性（比如修改了颜色或背景色）时，浏览器不需重新计算元素的几何属性、直接为该元素绘制新的样式（跳过了上图所示的回流环节）。这个过程叫做重绘。