习题

前现代布局

1. "禁止表格布局"禁的到底是什么？display: table 为什么不算违规？（再认）
2. 高度塌陷是怎么发生的？clearfix 为什么能在不添加 HTML 标记的情况下解决它？（辨析）
   • 提示：塌陷的直接原因是父元素里"没有"留在文档流中的子元素了
3. clear 在规范里的定义是什么？clearfix 由 ::after 生成的那个空盒，靠这条定义如何把父元素的高度撑回来？（辨析）
   • 提示：挂 clear 的盒子的上边缘，必须低于此前的什么盒子
4. 960.css 把布局从"手拼浮动"变成"声明占几列"，这与 HTML 从汇编式走向标记式是同一种进步，都是哪种编程范式的胜利？（迁移）
   • 提示：回忆前现代布局栅格系统一节"声明式 vs 命令式"的说法

定位

5. 相对定位偏移后，兄弟元素会补进它原来的位置吗？绝对定位呢？（再认）
6. 绝对定位盒子的包含块如何确定？"父元素 relative + 子元素 absolute"这组常见搭配，从包含块的角度怎么解释？（辨析）
7. 固定定位的包含块是谁？百分比宽度的参照物与包含块是什么关系？（辨析）
8. z-index 设了很大的值却盖不住另一个元素，机制上可能是什么原因？（辨析）
   • 提示：z-index 只在同一个什么范围内比大小
9. 顶部导航滚动不动、角标钉在卡片右上角、图片轻微压住标题，各用哪种定位？（迁移）

定型与关键渲染路径

10. 给内联元素设置上下 padding，边框画出来了、行高却没变——为什么？（再认）
11. box-sizing: border-box 下，width: 200px、左右 padding 各 20px 的盒子占位多宽？content-box 下呢？工程实践为什么普遍重置为前者？（再认）
12. display: none 与 visibility: hidden，哪个的元素不进渲染树？从关键渲染路径的角度说出理由。（辨析）
    • 提示：渲染树只收"可见节点"
13. CSS 被称为"渲染阻塞资源"，为什么浏览器还是要把 CSS 放在 <head> 里尽早加载，而不是延迟到页面底部？（辨析）
    • 提示：级联要求样式表完整才能算出最终样式，先渲染再改会怎样

弹性盒子与栅格盒子

14. justify-content 与 align-items 各管哪根轴？换了 flex-direction: column 之后呢？（再认）
15. 垂直置中这个"传统盒子时代的面试名题"，flex 用两行声明就解决了。它解决的根本机制是什么？（辨析）
16. 导航条、页面骨架、卡片瀑布墙、一行图标排布——各更适合 flex 还是 grid？说理由。（迁移）
    • 提示：一维轴线与二维网格各管一摊

响应式

17. 流体布局与响应式布局都"随屏幕变"，差别在哪？流体布局自己解决不了什么？（再认）
18. 百分比宽度相对的是屏幕宽度吗？min-width/max-width 在流体布局里兜的是什么底？（再认）
19. 桌面浏览器窗口可拖、手机"窗口"不可拖，viewport 元标记如何弥合这个差异？（辨析）
20. "先写手机版样式，再用 min-width 断点逐步增强"与"先写桌面版再给手机打补丁"，为什么说前者每一层都更干净？（迁移）
    • 提示：从约束的角度想，哪种环境的约束最紧