2021年3月-杭州-阿里本地生活基础面试题

最新推荐文章于 2021-05-04 20:55:19 发布

大唐荣华

最新推荐文章于 2021-05-04 20:55:19 发布

阅读量713

点赞数 2

分类专栏：大前端面试题目文章标签：阿里面试题本地生活

本文链接：https://blog.csdn.net/weixin_40599109/article/details/115212044

版权

本文主要涵盖CSS面试中常见的知识点，包括z-index的层级关系、层叠上下文、水平垂直居中方法、BFC触发与用途、box-sizing属性、CSS优先级计算、flex布局的应用、display:none与visibility:hidden的区别、清除浮动的方法、伪元素的选择器区别、1像素边框的实现、rem与em的使用以及CSS3动画的实现步骤。

摘要由CSDN通过智能技术生成

一、z-index的层级关系及css中的层叠上下文

层叠上下文(stacking context)，是HTML中一个三维的概念。在CSS2.1规范中，每个盒模型的位置是三维的，分别是平面画布上的X轴，Y轴以及表示层叠的Z轴。一般情况下，元素在页面上沿X轴Y轴平铺，我们察觉不到它们在Z轴上的层叠关系。而一旦元素发生堆叠，这时就能发现某个元素可能覆盖了另一个元素或者被另一个元素覆盖。
如果一个元素含有层叠上下文，(也就是说它是层叠上下文元素)，我们可以理解为这个元素在Z轴上就“高人一等”，最终表现就是它离屏幕观察者更近。

二、尽量多的水平垂直居中

行内元素：父元素设置display:table-cell;和vertical-align:
middle;以及text-align:center; 快级元素：定位50%，反推50%。或者父元素设置flex，align-items:
center; justify-content: center; 已知高宽：position:absolute; top: 0;
right: 0; bottom: 0; left: 0; margin: auto;