DEV Community
·
你应该了解CSS：提升你CSS技能的问题
💡
原文英文，约1600词，阅读约需6分钟。
📝
内容提要
本文讨论了CSS中的高级概念，包括计算值、选择器特异性和布局属性等。作者提出了一系列适合经验丰富开发者的问题，涵盖选择器特异性、元素显示形状、计算宽高和边距合并等，强调理解这些概念对开发的重要性。
🎯
关键要点
- CSS是一个包含多个主题的语言，开发者不需要了解所有内容。
- 计算值是DevTools计算选项卡中看到的属性值。
- 选择器:is()的特异性为0, 1, 0, 0，计算值为红色。
- display: inline时，宽高属性无效，元素不会显示为正方形。
- 块级元素的宽度等于父元素的宽度，flex项的宽度根据内容计算。
- 伪元素的display属性计算值为block和flex，inline-*值会转为block替代。
- flex布局中的子元素按行显示，grid布局中的子元素按列显示。
- 子元素的宽度等于父元素的宽度，高度在grid布局中均分。
- 子元素的边距不会超出父元素的边界。
- margin合并在display: inline-flex和display: inline-grid中不起作用。
- 伪元素在grid布局中水平和垂直居中。
- min-width的初始值为auto，子元素的min-width值为auto。
- gap属性可以替代margin属性来设置间距。
- 绝对定位或固定定位的元素会从正常文档流中移除，导致父元素高度为0。
- isolation属性创建新的堆叠上下文，影响z-index的显示顺序。
- 伪元素在grid布局中居中后，使用绝对定位会改变其位置。
- flex-basis优先于width属性，但需在min-width和max-width范围内。
- 使用CSS自定义属性时，必须定义所有部分，否则计算值为0。
- CSS自定义属性会从父元素继承值，未定义时使用回退值。
❓
延伸问答
CSS中的计算值是什么？
计算值是DevTools计算选项卡中看到的属性值。
选择器:is()的特异性是多少？
选择器:is()的特异性为0, 1, 0, 0。
display: inline时，元素的宽高属性有什么影响？
当元素的display为inline时，宽高属性无效，元素不会显示为正方形。
flex布局和grid布局中子元素的显示方式有什么不同？
在flex布局中，子元素按行显示；而在grid布局中，子元素按列显示。
如何使用gap属性替代margin属性？
可以为.parent元素定义gap属性来设置间距，替代margin属性。
绝对定位的元素对父元素的高度有什么影响？
绝对定位或固定定位的元素会从正常文档流中移除，导致父元素高度为0。
➡️
