2020前端面试题含解析汇总——基础篇（二）

 您的关注收藏是我持续更新总结的动力！

 欢迎各位大佬不吝才华补充更全面的解析供大家参考~

 2020前端面试题含解析汇总——基础篇（一）

 2020前端面试题含解析汇总——基础篇（二）

 2020前端面试题含解析汇总——基础篇（三）

 2020前端面试题含解析汇总——基础篇（四）

 2020前端面试题含解析汇总——基础篇（五）

本篇主要总结CSS相关问题，共52小题

文章的最后，我会给出某些题目具体点的补充，点击跳转到最后 补充点

 

补充点

关于布局讲解：给你一份详细的CSS布局指南，请查收

 

补充第14点：

CSS中的浮动和清除浮动，梳理一下

 

补充第15点：对于position属性，除了static值不开启定位，其他的relative、absolute、fixed、inherit都会 开启定位 ！一般我们最常见的relative是为absolute服务的！来看一种情况，设置position:absolute，如果父元素是，不管父元素是否开启定位，绝对定位会相对于当前页面；如果父元素不是，并且开启定位的话，绝对定位会相对于父元素

运行结果(红块相对于页面的黄块绝对定位)：

 

对比来看

运行结果(红块相对于父元素绿块绝对定位)：

 

补充第34点：伪类和伪元素的例子讲解参考如下

我终于理解了伪类和伪元素

CSS中伪类与伪元素，你弄懂了吗？

 

补充第45点，设置水平居中的方法，如果是行内元素中的文字，text-align必须设置在父级块元素才有效。比如行内元素标签中的文字，text-align: center设置在中是无效的，如果没有额外写父级块元素，那么父级块元素就是，text-align: center写在才会水平居中，如果本身就是块元素,text-align: center直接设置在该元素即可，比如

    
文字111

       如果父级元素(不一定是块元素)和子级块元素都有text-align属性，那就是就近原则，所以以子级块元素的text-align属性为准，如果子级块元素没有text-align:center，父级行内元素有text-align:center，则子级块元素的文字还是居中！综上所述：如果文字是块元素中的，会从自身开始往上找text-align属性，找到就生效，就近生效，找不到就不生效。如果文字是行内元素中的，会找父级块元素(块！元！素)中的text-align，找到就生效，就近生效，找不到就不生效。（你必须是块元素特性或者你父亲是块元素特性才有或得text-align属性的资格，然后就近原则）

继续补充45点：行内块级元素inline-block（inline-block拥有block的特性），可以利用text-align:center来设置水平居中效果的，比如下面的例子

button {
    width: 100px;
    height: 100px;
    background-color: yellow;
}

    

button是行内块元素，也就是默认display:inline-block，上面的黄色区域就是水平居中的，这个也比较特殊，水平居中并不针对文字

还是补充第45点：宽度固定的时候，margin: 0 auto;可以水平居中，但是如果父元素高度固定了，怎么同时设置垂直居中呢？比如父元素高度100px，而自身高度40px，那么上下的空白就是60px,那么我们设置margin: 30px auto;就可以同时水平垂直居中

次回----JavaScript

关注、留言，我们一起学习，您的收藏是我持续更新的动力！

 

===============Talk is cheap, show me the code================