0
点赞
收藏
分享

微信扫一扫

常见的css面试题(持续更新,欢迎补充)

沪钢木子 2024-04-23 阅读 8
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来强制优先级~

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

举报

相关推荐

0 条评论