大学Web 前端开发基础（HTML/CSS/JavaScript）上册《CSS 基础》练习题

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

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

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

本单元考点（5 个）

CSS选择器与优先级盒模型与元素尺寸字体与文本样式背景与边框属性CSS继承与层叠规则

本单元练习题（27 题）

选择题 ★ 精品详情 →

1. 某元素采用 CSS 默认的 content-box 盒模型，左右内边距均为 12px，左右边框均为 3px，且不计外边距。若要求其从左边框外沿到右边框外沿的宽度为 300px，CSS 属性 width 应设为多少？ A. 270px　B. 276px　C. 288px　D. 300px

登录查看答案

填空题 ★ 精品详情 →

2. 某元素的 CSS 中设置 width:280px; padding:20px; border:5px; 且使用默认的 content-box 盒模型，则该元素占据的总宽度为____px；若将盒模型改为 border-box 且其余样式不变，其内容区宽度将变为____px。

登录查看答案

选择题 ★ 精品详情 →

3. 某块级元素应用如下 CSS 声明：width: 200px; padding: 20px; border: 5px solid #333; margin: 10px; box-sizing: content-box; 则该元素在水平方向占据的总宽度（内容区 + 左右内边距 + 左右边框，不含外边距）为多少像素？ A. 220px　B. 240px　C. 250px　D. 260px

登录查看答案

判断题 ★ 精品详情 →

4. 判断题：某元素的 box-sizing 为 content-box，width 为 100px，左右 padding 各 10px，左右 border 各 5px；若改为 box-sizing: border-box 并保持 width: 100px 不变，则该元素左右边框外沿之间的总宽度将保持 100px 不变。

登录查看答案

判断题 ★ 精品详情 →

5. 判断：某 div 的 color 属性被类选择器设为红色，同时其父元素的 color 为蓝色。由于类选择器直接命中该 div，而继承值不参与选择器优先级比较，所以该 div 最终显示红色。

登录查看答案

填空题 ★ 精品详情 →

6. 页面中有 `重点`，CSS 为 `.note { font-size: 18px; text-decoration: underline; }`、`p.note { font-size: 20px; }`、`#key { font-size: 0.8em; text-decoration: none; }`。忽略浏览器默认样式，`span` 中“重点”的实际字号为____，显示时____（填写“带下划线”或“不带下划线”）。

登录查看答案

选择题 ★ 精品详情 →

7. 某页面样式表中先后定义了以下针对同一 元素的四条规则（均无 !important，且为外部样式表按顺序加载）：① div p.txt；② #box .txt；③ p.txt.line；④ .wrap p.txt。已知该 元素的结构为：div.wrap > div#box > p.txt.line。若四条规则中的 color 属性值互不相同，则最终 元素的文字颜色由哪条规则决定？ A. 规则①　B. 规则②　C. 规则③　D. 规则④

登录查看答案

选择题 ★ 精品详情 →

8. 某元素设置 `width: 120px; height: 60px; padding: 10px; border: 4px solid; box-sizing: content-box; background-origin: border-box; background-clip: content-box;`，且不考虑外边距。其背景色实际绘制区域的宽度是多少？ A. 120px　B. 140px　C. 148px　D. 156px

登录查看答案

填空题 ★ 精品详情 →

9. 在 CSS 中，某元素的父元素 font-size 为 20px，该元素设置 font-size: 1.6em，则该元素实际渲染的字号为 ____ px；若此时又将该元素的 text-indent 设置为 2em，则首行缩进为 ____ px。

登录查看答案

判断题 ★ 精品详情 →

10. 某元素设置样式：box-sizing:content-box; width:200px; height:100px; padding:20px; border:5px solid #000; background-color:#eee; background-clip:border-box; background-origin:padding-box。甲同学认为：该元素总宽度为 250px；乙同学认为：背景颜色绘制区域左上角位于边框盒左上角，背景定位区域（background-position:0 0 时背景图片参考点）的左上角位于内边距盒左上角。请判断甲、乙两名同学的看法是否都正确。

登录查看答案

判断题 ★ 精品详情 →

11. 判断：在默认的 content-box 盒模型下，元素设置 width:150px; padding:10px; border:2px solid，则其内容区宽度为 150px。

登录查看答案

选择题 ★ 精品详情 →

12. 某 article 元素的 color 为 navy，其子元素 em 带有 class="hint" 和 id="key"。样式表中有规则 .hint { color: teal; } 和 #key { color: olive; }。该 em 元素最终显示什么颜色？ A. navy　B. teal　C. olive　D. 浏览器默认颜色

登录查看答案

选择题 ★ 精品详情 →

13. 某元素依次应用以下声明：`font-style: oblique; font-variant: small-caps; font-weight: 600; font-size: 18px; font-family: serif; font: italic 700 20px/1.4 Arial; font-size: 16px;`。最终该元素的字体样式、字重、字号和字体族依次是什么？ A. italic、700、16px、Arial　B. oblique、600、16px、serif　C. italic、600、20px、Arial　D. normal、700、16px、Arial

登录查看答案

判断题 ★ 精品详情 →

14. 判断：某样式表中同时存在规则 .menu { font-size: 14px; } 和 #top .menu { line-height: 1.5; }，作用于同一元素。若再为该元素的内联 style 设置 font-size: 20px，则最终该元素的 font-size 为 20px；这是因为层叠规则中内联样式的优先级高于任何选择器声明的样式，而 line-height 未被内联样式声明、仍按规则生效。

登录查看答案

选择题 ★ 精品详情 →

15. 某元素的样式为 `background-color: #e8f0ff; border: 0.15rem dotted #345;`，页面根元素的字号为 20px。该元素的背景色以及边框宽度、样式和颜色分别是什么？ A. #e8f0ff；3px；dotted；#345　B. #e8f0ff；0.15px；dotted；#345　C. #345；3px；dotted；#e8f0ff　D. #e8f0ff；3px；solid；#345

登录查看答案

填空题 ★ 精品详情 →

16. 某元素设置 box-sizing: border-box; padding-left: 15px; padding-right: 15px; border-left-width: 6px; border-right-width: 6px; 且最终内容区（content）宽度为 138px。在 border-box 模型下，其 width 属性应设置为 ____ px。

登录查看答案

判断题 ★ 精品详情 →

17. 设某 HTML 文档中有一个段落元素：，样式表中仅有以下两条规则（均无 !important）：① p#intro.note { color: red; }　② .note.main { color: blue; }。有同学判断：规则②含两个类选择器，而规则①只有一个类选择器，故规则②优先级更高，该段落最终显示为蓝色。请判断这一说法是否正确。

登录查看答案

填空题 ★ 精品详情 →

18. 某段落元素设置了样式 `p { font-size: 15px; border: 0.2em double #063; border-bottom-width: 5px; background-color: #fff8ee; }`，则该段落上边框的宽度为____px，下边框的宽度为____px。

登录查看答案

填空题详情 →

19. 在 CSS 中，若未通过任何选择器为 p 元素设置 color 属性，则 p 会继承其父元素的 color 值；若某元素被 id 选择器和标签选择器同时设置了 color，则优先级高的规则生效，这体现了 CSS 的____机制。已知 .text{color:red}（class 选择器）和 p{color:blue}（标签选择器）同时命中同一元素，则该元素文字颜色为____。

登录查看答案

填空题详情 →

20. 某卡片设置 `box-sizing: border-box; width: 286px; padding-left: 19px; padding-right: 27px; border-left: 2px solid; border-right: 4px solid`，且无其他影响尺寸的样式。该卡片内容区域的宽度为 ____。

登录查看答案

判断题详情 →

21. 判断：CSS 属性 `text-align: center;` 用于设置元素内文本的水平对齐方式。

登录查看答案

判断题详情 →

22. 某元素设置 `box-sizing: border-box; width: 240px; padding-left: 17px; padding-right: 23px; border-left: 2px solid; border-right: 4px solid`，且不计外边距。有人据此断言该元素的内容区宽度为 198px。判断该断言是否正确。

登录查看答案

选择题详情 →

23. 在标准 CSS 盒模型下，父元素设置 `width:480px; padding:12px; border:4px solid; box-sizing:border-box`，子元素设置 `width:75%; padding:6px; border:2px solid`，且子元素未设置 `box-sizing`。子元素的 border-box 宽度是多少？ A. 336px　B. 348px　C. 352px　D. 384px

登录查看答案

判断题详情 →

24. 判断：CSS 属性 `text-weight: bold;` 可以设置文本为粗体。

登录查看答案

填空题详情 →

25. 某元素设置 `box-sizing: border-box; width: 320px; padding: 24px; border: 3px solid;`，其内容区宽度为 ___。

登录查看答案

选择题详情 →

26. 某段 HTML 中，父元素的 color 为蓝色，其子元素是带有 note 类的 span。样式表中有规则 span { color: green; } 和 .note { color: red; }。子元素最终显示什么颜色？ A. 蓝色　B. 绿色　C. 红色　D. 浏览器默认颜色

登录查看答案

填空题详情 →

27. 在 CSS 中，若要为一段文本添加删除线，应将 `text-decoration` 属性的值设置为 ____。

登录查看答案

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

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

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