大学Web 前端开发基础（HTML/CSS/JavaScript）上册《CSS 布局与响应式》练习题

共 27 道沉淀题 · AI 对照课标原创 · 三重审校答案可核对

需要完整试卷（Web 前端开发基础（HTML/CSS/JavaScript）上册《CSS 布局与响应式》单元测试卷）？

按本单元考点 AI 生成整卷：正卷 + 答案页 + 逐题解析，PDF 精排 / Word 可编辑 / 打印装订寄到家。

本单元考点（5 个）

浮动与清除浮动弹性盒布局（Flexbox）网格布局（Grid）基础定位机制与层级媒体查询与响应式设计

本单元练习题（27 题）

选择题 ★ 精品详情 →

1. 某卡片容器使用 CSS Grid。要求容器始终分为两列等宽的网格轨道，列间距固定为 10px。下列哪项声明能直接实现该要求？ A. display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 10px; B. display: grid; grid-template-columns: 2fr 1fr; column-gap: 10px; C. display: grid; grid-template-columns: repeat(2, 1fr); row-gap: 10px; D. display: grid; grid-template-columns: 1fr; column-gap: 10px;

登录查看答案

填空题 ★ 精品详情 →

2. 某页面样式表按书写顺序依次包含以下三条媒体查询规则（浏览器视口宽度为 900px，均为满足条件即生效）：规则一：@media (max-width: 768px){ .box{ width: 100px; } }；规则二：@media (min-width: 769px){ .box{ width: 300px; } }；规则三：@media (max-width: 1200px){ .box{ width: 500px; } }。三条规则的 CSS 特异性相同。按层叠规则，.box 最终渲染的 width 为 ____px；若把视口宽度调整为 750px，满足条件的规则共 ____ 条。

登录查看答案

判断题 ★ 精品详情 →

3. 页面中，.cardA 与 .cardB 是同一父元素的子元素，均设置 position: relative；.cardA 的 z-index 为 1，.cardB 的 z-index 为 2。.cardA 内有一个与 .cardB 重叠的 .badge，设置 position: absolute 和 z-index: 9999。有人断言：.badge 的 z-index 数值更大，因此它一定绘制在 .cardB 上方。判断该断言正误。

登录查看答案

判断题 ★ 精品详情 →

4. 判断：容器甲与兄弟元素乙均设置 position: relative，甲的 z-index 为 2，乙的 z-index 为 3；甲内的子元素丙设置 position: absolute、z-index: 999，且丙与乙重叠。丙会因 z-index 数值更大而绘制在乙上方。

登录查看答案

判断题 ★ 精品详情 →

5. 判断：某元素的 opacity 为 0.5，其内部一个 position:absolute 且 z-index:999 的子元素，仍能凭借较大的 z-index 数值直接与该元素的兄弟元素（z-index:2）比较层叠顺序并覆盖对方。

登录查看答案

选择题 ★ 精品详情 →

6. 页面中有三个已定位的兄弟元素：.x1 设置 position:absolute; z-index:20；.x2 设置 position:relative; z-index:auto；.x3 设置 position:fixed; z-index:15，三者处于同一层叠上下文中且矩形区域两两重叠。仅凭 DOM 顺序无法直接判断时，若它们的 DOM 出现顺序为 .x1、.x2、.x3，则从下到上的层叠顺序是：A. .x2、.x3、.x1　B. .x1、.x3、.x2　C. .x3、.x1、.x2　D. .x2、.x1、.x3

登录查看答案

选择题 ★ 精品详情 →

7. 在同一个层叠上下文中，有四个已定位元素发生重叠：元素甲设置 position:absolute; z-index:auto；元素乙设置 position:relative; z-index:2；元素丙设置 position:fixed; z-index:2，且丙在 DOM 中位于乙之后；元素丁设置 position:absolute; z-index:-1。若四者的 z-index 与 DOM 顺序仅如上所述，最上层显示的元素是（　　）。A. 甲　B. 乙　C. 丙　D. 丁

登录查看答案

填空题 ★ 精品详情 →

8. 在响应式布局中，若希望当视口宽度不小于 1024px 时应用某组样式，应使用的媒体查询写法为 @media (____: 1024px) { ... }；若希望在视口宽度不大于 600px 时应用样式，则应使用特性名 ____（填 max-width 或 min-width）。

登录查看答案

判断题 ★ 精品详情 →

9. 判断：为父容器内的两个子元素设置 float: left 后，父容器高度可能塌陷，此时可给父容器添加 overflow: hidden（或使用 clear 属性的空元素）来清除浮动，使父容器高度恢复正常。

登录查看答案

填空题 ★ 精品详情 →

10. 某内容区在视口宽度不大于 43.75em 时采用单列布局，超过该宽度时采用双列布局。媒体查询中的 em 按初始字号 16px 换算，则该响应式布局的断点为 ____ px。

登录查看答案

选择题 ★ 精品详情 →

11. 若要使某个容器成为网格容器，并明确划分出 3 行 2 列的网格区域，下列哪组声明是正确的？ A. display: grid; grid-template-rows: repeat(3, 1fr); grid-template-columns: repeat(2, 1fr); B. display: flex; grid-template-rows: repeat(3, 1fr); grid-template-columns: repeat(2, 1fr); C. display: grid; grid-template-rows: repeat(2, 1fr); grid-template-columns: repeat(3, 1fr); D. display: grid; grid-row: repeat(3, 1fr); grid-column: repeat(2, 1fr);

登录查看答案

判断题 ★ 精品详情 →

12. 判断题：某开发者在样式表中先书写 @media (min-width: 768px) { .box { width: 50%; } }，再书写 @media (max-width: 768px) { .box { width: 100%; } }。当视口宽度恰好为 768px 时，由于两条规则同时满足条件且 .box 选择器优先级相同，最终 .box 的宽度由书写顺序靠后的 max-width 规则决定，即为 100%。此外，该开发者声称把两条规则中的数值都改为 767px 后，768px 视口下两条规则都不会生效，.box 将没有任何宽度值可用。

登录查看答案

填空题 ★ 精品详情 →

13. 页面中，.stage 设置 position: relative；其子元素 .rail 设置 position: absolute、z-index: 6；.rail 内的 .badge 设置 position: absolute、top: 12px、left: 8px、z-index: auto。.stage 的另一子元素 .notice 设置 position: relative、z-index: 5。假设 .rail 与 .notice 重叠，且没有其他层叠上下文干扰：.badge 的定位包含块是 ____，重叠处绘制在上方的是 ____。

登录查看答案

判断题 ★ 精品详情 →

14. 某容器设置 `display: grid; grid-template-columns: repeat(3, 1fr);`，其直接子元素均未单独设置网格位置。有人据此断言：该容器无论有多少个直接子元素，都会恰好生成三行。判断该断言是否正确。

登录查看答案

选择题 ★ 精品详情 →

15. 某页面的 Grid 容器将网格区域定义为 grid-template-areas: "top top side" "main main side" "foot foot foot"。子元素分别设置 grid-area: top、main、side、foot。设置为 side 的子元素覆盖哪些网格单元？ A. 第一行第三列与第二行第三列　B. 第一行第二列与第二行第二列　C. 第二行第三列与第三行第三列　D. 第一行第三列与第三行第三列

登录查看答案

选择题 ★ 精品详情 →

16. 某页面包含块内有两个浮动元素：左侧封面图 float:left 且高度为 140px，右侧推荐栏 float:right 且高度为 200px，两者顶部均与包含块顶部对齐。紧随其后的版权段落设置 clear:both 且 margin-top:30px，包含块从顶部到该段落顶部顶边框的垂直距离是多少？ A. 170px　B. 200px　C. 230px　D. 140px

登录查看答案

选择题 ★ 精品详情 →

17. 某容器设置 box-sizing: border-box; width: 520px; padding: 10px; border: 1px solid #333; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));，且其直接子项数量足够多。该容器最终会生成几个列轨道？ A. 2　B. 3　C. 4　D. 5

登录查看答案

选择题详情 →

18. 要在容器 .box 中启用 CSS Grid 布局，使子元素按网格排列，应设置哪个声明？ A. display: flex B. display: grid C. position: grid D. layout: grid

登录查看答案

填空题详情 →

19. 页面中某块元素前有一个 float: left 元素和一个 float: right 元素。为使该块元素从两侧浮动元素下方开始排布，应在该块元素的 CSS 规则中填写 ____。

登录查看答案

填空题详情 →

20. 某响应式页面的样式表包含规则 `@media (min-width: 40em) { ... }`。浏览器初始字号为 16px，媒体查询中的 `em` 按初始字号换算，视口宽度以 CSS 像素计。视口宽度达到 ____ px 时，该规则首次生效。

登录查看答案

判断题详情 →

21. 在 Flex 容器中，justify-content 用于控制项目沿交叉轴的对齐方式。判断该表述是否正确。

登录查看答案

判断题详情 →

22. 判断：在同一层叠上下文中，普通块级元素保持 position:static，即使设置 z-index:999，也会因该数值大于 1 而覆盖 DOM 顺序更靠后的 position:relative、z-index:1 的重叠元素。

登录查看答案

填空题详情 →

23. 一个不换行的 Flex 容器主轴尺寸为 840px，主轴方向为水平。三个项目的 flex-basis 依次为 180px、220px、260px，flex-grow 依次为 1、2、x；忽略内边距、边框及最小尺寸限制，且项目不发生收缩。布局后第三个项目宽 350px，则 x = ___。

登录查看答案

填空题详情 →

24. 两个均已定位且处于同一层叠上下文的元素发生重叠时，通常通过 CSS 属性 ____ 指定它们的层叠顺序。

登录查看答案

判断题详情 →

25. 在采用默认 flex-direction 设置的 Flex 容器中，justify-content: center 会使项目沿主轴居中；align-items: center 则会使项目沿交叉轴居中。判断该表述是否正确。

登录查看答案

选择题详情 →

26. 一张图片设置为 float: left，其后的提示段落不应环绕图片，而应从图片下方开始。提示段落应使用哪项 CSS 声明？ A. clear: left;　B. float: left;　C. clear: right;　D. float: right;

登录查看答案

填空题详情 →

27. 页面中有一个宽度为 184px、`float: left` 的目录栏和一个宽度为 236px、`float: right` 的工具栏。紧随其后的正文块宽度为 640px，且不设置浮动。要求正文块必须从两个浮动栏的下方开始，同时不得改变目录栏和工具栏的浮动状态。正文块应设置 `clear: ____;`。

登录查看答案

Web 前端开发基础（HTML/CSS/JavaScript）其他单元练习题

HTML 基础（9题）CSS 基础（27题）JavaScript 语法基础（27题）DOM 操作与事件（27题）表单与数据验证（27题）面向对象与ES6+（27题）综合实战项目（27题）

题目由 AI 对照课标原创生成并经机审+人审，如发现质量问题可联系我们。