常见的css面试题（持续更新，欢迎补充）

目录

1. 什么情况下设置margin会造成margin塌陷? 怎么解决？

2. css的选择器的优先级，怎么判断谁的优先级更高？

---

总结面试常问的css相关面试题~

1. 什么情况下设置margin会造成margin塌陷? 怎么解决？

通常遇见margin塌陷，是我们同时给父子元素都设置的margin， 此时元素不会像我们想的那样撑开，而是选取最大margin去显示。

如何解决这个问题呢？

1. 父元素不设置margin,使用padding
2. 使用伪元素给父元素设置清除浮动

   .clearfix {
        &::after { 
           clear: both; 
           display: block; 
           content: ''; 
        }
    }
   

3. 给父元素设置浮动

4. 给父元素设置：overflow：hidden

5. 给元素设置为绝对定位

2. css的选择器的优先级，怎么判断谁的优先级更高？

一般来说：行内样式> id选择器 > class选择器 > 类型（标签）选择器和伪元素选择器 > 属性选择器.

当上述只有一个的时候，很明显就能看出来谁的优先级高， 但是当同时存在id选择器 、 class选择器 、标签选择器 、 属性选择器时，他们的优先级是什么样子呢？这时，我们就需要计算对应的权重了, 需要我们去按照权重的每一位数值去比较，相等则比较下一位值。eg: 

1. 第一等：内联样式，如：style="color: blue;"，权值为1000.（不推荐使用）
2. 第二等：ID选择器，如：#header，权值为0100.
3. 第三等：类选择器、如：.name， 权值为0010.
4. 第四等：类型（标签）选择器和伪元素选择器，如：div ::first-children权值为0001.
5. 通配符，子选择器，相邻选择器等。如*，>,+, 权值为0000.

有时候我们面对明明设置了属性却没有作用到的时候，可以直接importment来强制优先级~

持续更新中~ 以上问题均为面试后总结，如有不足，敬请指出，共同进步~