前端面试题_Css

一、说一下Css的盒子模型？

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

盒子的组成：content、padding、border、margin

盒子的类型：

• 标准盒模型：margin+border+padding+content -- box-sizing：content-box（默认）
• IE盒模型：margin+content（border+padding） -- box-sizing：border-box

二、Css选择器的优先级？

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

不同级别下：

内联样式 > id选择器 > 类选择器、伪类选择器 > 元素选择器 > 通配符选择器 > 浏览器自定义

相同级别内：

同一级别中后书写 > 先书写的

css的引入方式不同 => 优先级的不同 => 内部引入 > 外部 >导入引入

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

1. display：none（元素在页面消失，不占据空间）
2. opacity：0（透明度为0，占据空间）
3. visibility：hidden  （元素消失，占据空间）
4. position：absolute

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

px是像素，显示器上呈现画面的像素，绝对单位长度

rem是相对单位，相对于html根节点的font-size的值

五、重绘和重排有什么区别？

• 重排（回流）：布局引擎会根据所有样式计算出盒模型在页面的位置和大小
• 重绘：计算好盒模型的位置、大小和其他一些属性，浏览器根据每个盒模型特性进行绘制

对DOM的大小、位置修改 => 重排

对DOM的样式修改 => 重绘

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

• 定位 + margin
• 定位 + transform

left:0
right:0
transform:translate(-50%,-50%)

• display

display:flex
justify-content:center
align-items:center

• grid布局
• table局部

七、Css哪些属性可以继承，哪些不可以？

1. 字体属性：font
2. 文本属性：line-height
3. 元素的可见性：visibility：hidden
4. 表格布局的属性：border-spacing
5. 列表的属性：list-style
6. 声音的样式属性

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

预处理语言增加了变量、函数、混入等强大的功能

SASS LESS

1. 支持样式嵌套
2. 支持定义变量  --  @global：#eee;