前端高频面试题--Part1

一、CSS

 1、说一下CSS的盒模型：

 在HTML页面中的所有元素都可以看成是一个盒子

 盒子的组成： 内容 content 、内边距 padding 、边距 border 、外边距 margin

 盒模型的类型：

  （1）标准盒模型：

  margin + border + padding + content

  （2）IE盒模型

  margin + content ( border + padding )

控制盒模型的模式：box-sizing：content-box（默认值、标准盒模型）、border-box（IE盒模型）

2、CSS选择器的优先级？

 CSS 的特性：继承性、层叠性、优先级

 优先级： 写 CSS 样式的时候，会给同一个元素添加多个样式，此时谁的权重高就显示谁的样式。

 !important > 行内样式 > id > 类 / 伪类 / 属性 > 标签 > 全局选择器

 3、隐藏元素的方法有哪些？

 display: none;  // 元素在页面消失，不占据空间。

 opacity:  0; // 设置了元素的透明度为0，元素不可见，占据空间位置。

 visibility: hidden; // 让元素消失，占据空间位置。

 position: absolute; 

 clip-path

4、px和rem的区别是什么？

 px 是像素，显示器上给我们呈现画面的像素，每个像素的大小是一样，绝对单位长度。

 rem 是相对单位，相对于 html 根节点的 font-size 的值，直接给 html 节点的 font-size设置为62.5%；

  1 rem = 10 px   

  ( 16 px * 62.5 % = 10 px )

5、重排重绘有什么区别

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

 重绘：计算好盒模型的位置、大小和其它一些属性后，浏览器就会根据每个盒模型的特性进行绘制。

 浏览器的渲染机制：对 DOM 的大小、位置进行修改后，浏览器需要重新计算元素的这些集合属性，就叫重排；对 DOM 的样式进行修改，比如 color 和 background-color ，浏览器不需要重新计算几何属性的时候，直接绘制了该元素的新样式、那么这里就只触发了重绘。

6、让一个元素水平居中

 (1). 定位 + margin

 (2). 定位 + transfrom

 (3). flex 布局

 (4). grid 布局

 (5). table 布局

7、CSS的哪些属性可以继承？哪些不可以继承？

 CSS 的三大特性：继承、层叠、优先级

 子元素可以继承父类元素的样式。

 （1）字体的一些属性可以被继承：font

 （2）文本的一些属性：line-height

 （3）元素的可见性：visibility: hidden

 （4）表格布局的属性：border-spacing

 （5）列表的属性：list-style

 （6）页面样式属性：page

 （7）声音的样式属性

8、有没有用过预处理器？

 预处理语言再见了变量、函数、混入等强大的功能。

 SASS

 LESS