DEV Community
·
🧠 前端开发面试中的10个棘手CSS问题（附答案与示例）
内容提要
CSS看似简单，但深入后会遇到复杂问题。文章列出10个高级CSS问题及解答，如margin自动居中、单位差异、堆叠上下文和flex容器溢出等。掌握CSS需理解浏览器行为，而非仅仅记忆属性。
关键要点
-
CSS看似简单，但深入后会遇到复杂问题。
-
文章列出10个高级CSS问题及解答。
-
margin: auto不能垂直居中，需使用flex或grid。
-
em、rem、%、vw/vh单位的区别及使用场景。
-
新的堆叠上下文在特定条件下形成。
-
overflow: hidden在flex容器中不总是有效。
-
display: contents移除元素的盒子，但保留其子元素。
-
CSS的特异性是四部分得分系统。
-
visibility: hidden、opacity: 0和display: none的区别。
-
制作响应式正方形div的方法。
-
position: sticky不工作的常见原因。
-
transition: all对display无效，需使用visibility和opacity进行过渡。
-
掌握CSS需理解浏览器行为，而非仅仅记忆属性。
延伸解读
CSS单位的使用场景
在选择CSS单位时，理解它们的相对性至关重要。比如，em单位会根据当前元素的字体大小而变化，可能导致嵌套元素的字体大小意外增大。相比之下，rem单位则是基于根元素的字体大小，更加稳定，适合用于响应式设计。
堆叠上下文的形成
堆叠上下文是CSS中一个重要的概念，影响元素的层叠顺序。新堆叠上下文的形成条件包括使用特定的定位属性和z-index。了解这些条件可以帮助开发者更好地控制元素的显示顺序，避免意外的视觉问题。
CSS特异性的理解
CSS特异性是影响样式应用的重要因素。它由四个部分组成，理解这一点可以帮助开发者更有效地解决样式冲突问题。通过比较不同选择器的特异性，开发者可以更清晰地知道哪些样式会被应用，哪些会被覆盖。
延伸问答
为什么margin: auto不能垂直居中一个div？
margin: auto只能在特定条件下垂直居中，比如父元素有定义的高度，子元素不能使用position: static或relative，并且子元素有固定高度。通常需要使用flex或grid来实现垂直居中。
em、rem、%和vw/vh单位有什么区别？
em是相对于当前元素的字体大小，rem是相对于根元素的字体大小，%是相对于父元素的尺寸，而vw/vh是相对于视口的宽度和高度。使用em时，嵌套的值会累积，可能导致意外的布局问题。
什么是堆叠上下文，何时会形成新的堆叠上下文？
新的堆叠上下文在元素具有position属性（absolute、relative或fixed）且z-index不为auto时形成，或者当opacity小于1、使用transform、filter等属性时也会形成。
为什么overflow: hidden在flex容器中不总是有效？
在flex容器中，子元素如果使用position: absolute或min-height: auto，可能会导致溢出，overflow: hidden不会生效。需要确保子元素不使用position: absolute，并移除min-height: auto。
display: contents的作用是什么？
display: contents会移除元素的盒子，但保留其子元素在DOM和样式流中。使用时需谨慎，因为某些辅助工具可能会忽略display: contents。
如何制作一个响应式的正方形div？
可以使用aspect-ratio属性，或者使用padding-top技巧来实现响应式正方形div。比如，设置宽度为100%并使用padding-top: 100%。
