上海前端面试总结之CSS篇

1、如何实现一个块级元素水平居中？

方法一：利用定位

方法二：利用margin:auto

方法三：利用dispaly:table-cell

方法四：利用父盒子与子盒子的空间距离

方法五：利用transform

方法六：利用calc计算

方法七：利用display:flex;设置垂直水平都居中（最常用）

display:flex

justify-content:center

align-items:center

2、如何居中一个图片？

vertical-align：center

3、rem、px、em三种的区别？

rem是全部的长度都相对于根元素

元素。通常做法是给html元素设置一个字体大小，然后其他元素的长度单位就为rem。

em

子元素字体大小的em是相对于父元素字体大小

元素的width/height/padding/margin用em的话是相对于该元素的font-size

vw/vh

视窗的宽度和高度，相当于 屏幕宽度和高度的 1%，不过，处理宽度的时候%单位更合适，处理高度的 话 vh 单位更好。

px

像素px是相对于显示器屏幕分辨率而言的。

1em等于多少?

例如给一个盒子设置宽为16px，html固定为16px，那么转换为em就是16/16=1em

上下两个盒子,上盒子下边距为10px,下盒子上边距为20px,那么两个盒子的间距是多少?

10px

是什么原理? 

也就是说两个盒子自身的外边距是盒子自身的一半 负数也是一半值是负数

两个数值和为零会合拼

4、在一个vue文件中如何处理样式覆盖问题

在js文件中加入 scoped 

5、遇到element的样式覆盖了自己写的样式如何处理

less中   深度穿透  /deep/

scss中   ::v-deep

6、选择器权重

!important(无穷大)>行内样式（1000）>

id(100)>class/属性/伪类(10)>标签/伪元素(1)>通配符(0)