CSS面试总结

CSS一直用，但从未总结，面试有时候会问比较细的问题，总结一下 开头记录一下大厂对于前端工程师的要求： shopee：精通CSS，熟悉W3C标准

1、CSS3的选择器优先级、伪类选择器（例如选择某个列表的倒数两个li)

简单选择器（根据名称、id、类来选取元素） 组合器选择器（根据它们之间的特定关系来选取元素） 伪类选择器（根据特定状态选取元素） 伪元素选择器（选取元素的一部分并设置其样式） 属性选择器（根据属性或属性值来选取元素）

优先级：

优先级这个好说：!important>内联>id>class>标签选择器

同级别的后写的优先级高

举个例子：

    <style>
       #id1.class1{
           background-color:black;
       }
       
       #id1{
           background-color:red;
       }
   </style>
   
   <div class="class1" id="id1"></div>

div 是黑色还是红色呢？答案是黑色，详情见这篇文章： juejin.cn/post/684490… 注意一点，如果上述代码的 #id.class1 写成带空格的 #id .class1，那么div的背景颜色就会变成红色。 所以还要提到的就是CSS选择器 连写 空格 逗号这三者的区别

连写就是同时满足 空格代表父子关系 逗号代表并列关系

伪类选择器，比如选择倒数两个元素：

:ul li:last-child, ul li:nth-last-child(2)

position 定位

CSS div 盒模型

box-sizing:border-box

width/height = border + padding + 内容的宽度/高度

box-sizing:content-box

width/height = 内容的宽度/高度

CSS 边距重叠

边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容、补白、边框)重合在一起而形成一个单一边界。