CSS错题集（1）

before和after

:before 选择器：在每个 <p> 元素的内容之前插入新内容。

:after伪元素：此样式会在每个 h1 元素之后播放一段声音。

HTML文档加载时从上到下加载，只与标签的上下顺序有关，与标签的选用无关

HTML选择浏览器自带日期控件

HTML 选择浏览器自带日期控件_yueloveme的博客-CSDN博客_html日期控件

边距单位

pt (point，磅)：是一个物理长度单位，指的是72分之一英寸。

px (pixel，像素)：是一个虚拟长度单位，是计算机系统的数字化图像长度单位，如果px要换算成物理长度，需要指定精度DPI(Dots Per Inch，每英寸像素数)，在扫描打印时一般都有DPI可选。Windows系统默认是96dpi，Apple系统默认是72dpi。

em(相对长度单位，相对于当前对象内文本的字体尺寸)：是一个相对长度单位，最初是指字母M的宽度，故名em。现指的是字符宽度的倍数，用法类似百分比，如：0.8em, 1.2em,2em等。通常1em=16px。

source

<source> 元素为 <audio>、<video> 和 <picture> 元素指定多个媒体资源

 margin

设置为auto时，浏览器会自动计算外边距

实现水平和垂直居中需要在父元素中设置display:flex；子元素设置margin:auto;

盒子水平居中的三种方式：

1）margin：0，auto；

2）margin-left：auto，

      margin-right：auto；

3）margin：auto；

reflow

首先早知道reflow是什么？ reflow(回流)是指浏览器为了重新渲染部分或者全部的文档,重新计算文档中的元素的位置和几何构造的过程。 因为回流可能导致整个Dom树的重新构造,所以是性能的一大杀手。 以下操作会引起回流：

① 改变窗口大小

② font-size大小改变

③ 增加或者移除样式表

④ 内容变化（input中输入文字会导致）

⑤ 激活CSS伪类（:hover）

⑥ 操作class属性，新增或者减少

⑦ js操作dom

⑧ offset相关属性计算

⑨ 设置style的值 

另外: reflow与repaint（重绘）是减缓js的几大主要原因，尤其是reflow更是性能杀手，所以我们应该想法避免。

贝塞尔曲线

①transition-timing-function属性

transition-timing-function属性指定切换效果的速度。

此属性允许一个过渡效果，以改变其持续时间的速度。

语法：transition-timing-function: cubic-bezier(n,n,n,n);

CSS3 transition-timing-function 属性 | 菜鸟教程

②cubic-bezier() 函数

贝塞尔曲线曲线由四个点 P0，P1，P2 和 P3 定义。P0 和 P3 是曲线的起点和终点。P0是（0,0）并且表示初始时间和初始状态࿰