前端面试 --- CSS面试题

1. 说一下CSS的盒模型。
在HTML页面巾的所有元素都可以看成是一个盒子
盒子的组成: 内容content、内边距padding、边框border、外边距margin
盒模型的类型:
①标准盒模型：margin + border + padding + content
②IE盒模型：margin + content(border + padding)
控制盒模型的模式： box-sizing:content-box(默认值，标准盒模型)、border-box (IE盒模型)
2. CSS达择器的优先级?
CSS的特性: 继承性、层叠性、优先级
优先级: 写CSS样式的时候，会给同一个元囊添加多个样式，此时谁的权重高就显示谁的样式
标签、类/伪类/属性、全局选择器、行内样式、id、!important
!important >行内样式 > id >类/伪类/属性 >标笑>全局选择
3. 隐减元素的方法有哪些?

	display:none;	/*元素在页面上消失，不占据究向*/
	opacity:0;	/*设置了元素的透明度为8，元素不可见，占据空间位置	*/
	visibility:hidden;	/*让元素消失，占据空问位置，一种不可见的状态*/
	position:absolute;
	clip-path

4. px利rem的区别是什么?

px是像素，显示器上给我们呈现画面的像素，每个像素的大小是一样，绝对单位长度
rem，相对单位，相当于html根节点的font-size的值，直接html节点的font-size:62.5%;
1rem = 10px;
(16px*62.5%=1@px)
5. 重给重排有什么区划?
重排(同流）: 布局引肇会根据所有的样式计算出盒模型到在页面上的位置和大小
重绘:计算好盒模型的位置、大小和其他一些属性之后，浏览器就会根据每个盒模型的特性进行绘制
浏览器的渲染机制：
①对DOM的大小、位置进行修改后，浏览器需要重新计算元素的这些几何属性，就叫重排
②对DOM的样式进行修改，比如color和background-color，浏览器不需要重新计算几何属性的时候，直接绘制了该元素的新样式，那么这里就只触发了重绘
6. 让一个元素水下垂直居中的方式有哪些？
①定位+margin
②定位+transform
③flex布局
④grid布局
⑤table布局
7. CSS的哪些属性可以继承？哪些不可以继承？
①字体的一些属性: font
②文本的一些属性: line-height
③元素的可见性: visibility:hidden
④表格布局的属性: border-spacing
⑤列表的属性:list-style
⑥页面样式属性: page
⑦声音的样式属性
8. 有没有用过预处理器
①less
②sass