测验

第 6 周概念自测，题目取自本周十篇概念文档——渲染基础（定型、定位、关键渲染路径）、布局演化（前现代布局、弹性盒子布局、栅格盒子布局）、响应式（屏幕、媒体查询、响应式设计）与 Web UI。提交后立即看答案与解析。

单选

1. 给 span 设上下 padding 20px 想撑开行距，实际结果是？

行框被撑开，行距变大 边框画出来了，但行框高度不变——内联盒的垂直内外边距不参与行框高度计算 浏览器报错，内联元素不能设垂直方向 padding 上下的 padding 直接被忽略，连边框都不画

2. 想隐藏一个元素但保留它占的位置，应该用？

display:none——从渲染树拿走，不分配空间 visibility:hidden——仍参与定位和布局，只是不显示 两者都可以，效果等价 clear:both——清除它的显示

3. 一个 div 设 width 200px、左右 padding 各 20px——content-box 与 border-box 下它的占位宽分别是多少？

都是 200px——width 就是占位宽 content-box 占 240px（width 只算内容区，占位还得加 padding），border-box 占 200px（padding 向内挤） content-box 占 200px，border-box 占 240px——border-box 把 padding 加在外面 两个都占 240px，box-sizing 只影响内容区显示

4. 图片设了 position:relative 并向下偏移 60px 后，紧跟其后的段落会怎样？

段落上移填补图片原来的位置，两个元素换位 段落仍从图片的原位置下方开始排——相对定位参与常规流，原空间保留 段落与图片重叠，因为相对定位脱离了文档流 浏览器自动给段落加 clear，避开偏移后的图片

5. 子元素设 position:absolute 后，它的坐标原点是谁？

总是直接的父元素 最近的非静态定位祖先；所有祖先都是静态时，以 body 或 html（页面根）为准 总是 body，与祖先无关 屏幕可视区域

6. 明明设了 z-index:999，就是盖不住别人。机制上的答案是？

999 超出了 z-index 的上限 层叠上下文——z-index 只在同一个层叠上下文里比大小，分属不同上下文的元素先比它们所在上下文的层级 浏览器按代码顺序渲染，z-index 只对 fixed 定位生效 需要同时设 position:relative 才能生效

7. 页面引用了一个很大的外链 CSS，它下载期间 HTML 的解析会停吗？

会停——CSS 是渲染阻塞资源，DOM 构建必须等 CSSOM 完成 不停——CSS 只阻塞渲染成像，DOM 的构建照常进行 会停，但只在遇到样式表引用的那一刻 取决于 CSS 文件是否超过一定大小

8. 「现代规范禁止用表格做布局」，下列理解正确的是？

连 display:table 也一并禁用，布局只能用 flex 和 grid 被禁的是拿 table 语义标记做布局；表格布局的特性（等高列、垂直居中）已由 display:table 收回样式层 表格布局从未真的被用过 禁令只对 HTML5 页面生效

9. 想让一个 div 盒子自身在页面里水平居中，text-align:center 够吗？

够，text-align 就是居中属性 不够——text-align 只管盒子内部内容的水平对齐，盒子自身要靠 margin auto 或 flex 够，但要先给盒子设 display:block 不够，text-align 只对图片和文字生效

10. 同为 1920×1080 分辨率，5 英寸手机和 24 英寸显示器谁的显示更精细？

一样精细——分辨率相同 手机——同分辨率下屏幕越小 PPI 越高，约是显示器的五倍 显示器——大屏工艺更先进 无法比较，取决于操作系统

11. 嵌套布局里某栏写了 width:60%，这个 60% 相对谁而言？

屏幕宽度 浏览器窗口宽度 包含块——最近的块级祖先（父元素）的内容宽度，嵌套时逐级传递 body 的宽度，无论嵌套多深

12. 按界面形态分类，Web 界面的准确描述是？

纯 GUI——像素级自由绘制的图形界面 纯 TUI——和终端一样的字符界面 混血——页面在窗口容器中运行，但主要基于文本模式渲染，canvas 才补上像素级绘制 NUI 的先驱——以语音手势等自然交互为核心

多选

1. BFC（块级格式化上下文）是独立排版环境，下列哪些是它的硬性质？（多选）

内部浮动被它包住——浮动子元素也参与它的高度计算 与外界的垂直外边距不折叠 内外布局互不影响 内联盒的上下 padding 参与行框高度计算 相邻块盒的上下 margin 会合并取大值

2. 关于关键渲染路径（HTML/CSS 到像素的流水线），下列说法正确的有哪些？（多选）

DOM 与 CSSOM 两条线并行构建，互不等待 渲染树只收可见节点——display:none 的节点不进入 布局算位置与大小，绘制把盒子填成文本颜色图像，合成合并各图层 CSSOM 必须等 DOM 构建完成才能开始 display:none 的节点也进渲染树，只是画成透明

3. 关于布局方法的演化史，下列说法正确的有哪些？（多选）

浮动最初为文字环绕图片而生，拿它做布局是后来的挪用 960 栅格的词汇沿用至今——container、column、gutter 栅格是一种设计理念而非具体技术，早期基于 float 实现，如今由 flex/grid 承载 Grid 的 fr 份额单位按份分配剩余空间，是声明式的——对比 960.css 预先写死的列宽 高度塌陷的现代修复是给每个浮动元素自身加 clear

4. 关于响应式设计，下列说法正确的有哪些？（多选）

文档宽于可视区，滚动条出现——横向滚动条在手机上是体验灾难 viewport 元标记 width=device-width 让页面按设备真宽度渲染，统一桌面与移动的窗口差异 移动优先是先保障小屏体验、再用 min-width 断点向大屏增强的策略 移动优先就是只做手机版，桌面版另做一套 视网膜屏 DPR 为 2 或 3，用 2 倍图或矢量图保证锐利

5. 关于 flex 与 grid，下列说法正确的有哪些？（多选）

justify-content 管主轴分布，align-items 管交叉轴对齐 子项的 flex:3 是 flex-grow:3 的简写，按份分配剩余空间 flex 容器里子项的 float、clear、vertical-align 一律失效——不是被覆盖，是不参与那套方案 flex 与 grid 是竞争替代关系，学了 grid 就不必学 flex 选型经验——一维用 flex，二维用 grid；不确定就先 grid 搭骨架、flex 排行内