前端面试 --- 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