H5，C3面试题

1、::before和:after中双冒号和单冒号有什么区别，解释一个两个伪元素的作用

：是伪类，：：是伪元素 =》是为了区分

2、rem和em的区别

rem是相对于html标签的font-size的大小，em是相对于父元素的font-size的大小 

 3、css的盒模型

 在html页面里面所有的元素都可以看作一个盒模型

  盒子的组成：

        标准和模型：

                margin + border + padding + content

        怪异盒模型：

                margin + content（padding + border）

控制盒模型的属性：box-sizing：content-box（默认值，标准盒模型） | border-box（可切换值，怪异盒模型）

 4、css的选择器优先级

!important > 行内 > id选择器 > class选择器 > 标签选择器 > 全局选择器

5、隐藏元素的方法

display:none;

        元素消失，且不占据空间

opacity:0;

        设置透明度，元素依然存在，且占据空间

visibility:hidden;

        元素消失，占据空间

position:absolute; 

6、px和rem的区别是什么

px就是像素，每个像素的大小是一样的，是一个绝对的单位

rem是一个相对元素，它是相对于html根元素的font-size】 

7、重绘和重排有什么区别

重拍（回流）：布局引擎会根据所有的央视计算出盒模型在页面上的位置和大小

重绘：计算好盒模型的位置和大小、其他一些属性之后，浏览器会根据每个盒模型的特性（除了位置和大小，如：背景颜色，字体大小等）进行绘制

浏览器的渲染机制： 

        对DOM的大小、位置进行修改后，浏览器需要重新计算元素的这些几何属性，就叫做重排（回流）

        对DOM的样式进行修改、比如color、backgrond-color等，浏览器不需要重新计算几何属性，直接去绘制该元素的新样式，这里就只会触发重绘

8、让一个元素水平垂直居中的方式有哪些

1、定位+margin

2、定位+transform

3、flex布局

4、grid布局