HTML & CSS 能力测试卷
选择题（每题2分，共20分）
-
下列哪个HTML5标签用于定义文档的导航链接？
A)<nav>
B)<navigate>
C)<navbar>
D)<navigation> -
CSS中哪个属性用于设置元素的透明度？
A)visibility
B)opacity
C)transparency
D)alpha -
以下哪个CSS选择器优先级最高？
A)div p
B).container
C)#main
D)div -
在Flexbox布局中，哪个属性用于控制项目在主轴上的对齐方式？
A)align-items
B)justify-content
C)flex-direction
D)flex-wrap -
哪个HTML标签用于创建有序列表？
A)<ul>
B)<ol>
C)<li>
D)<list> -
在CSS中，
position: relative相对于什么定位？
A) 浏览器窗口
B) 文档流中的正常位置
C) 最近的已定位祖先元素
D) 父元素 -
哪个CSS属性用于创建响应式网格布局？
A)display: flex
B)display: grid
C)display: table
D)display: block -
以下哪个不是CSS盒模型的组成部分？
A) content
B) padding
C) margin
D) outline -
在HTML中，哪个属性用于指定图像无法显示时的替代文本？
A)title
B)alt
C)src
D)placeholder -
哪个CSS伪类用于设置鼠标悬停在元素上时的样式？
A):active
B):hover
C):focus
D):visited
简答题（每题10分，共50分）
-
解释CSS中盒模型的工作原理，并说明
box-sizing: border-box和box-sizing: content-box的区别。 -
描述Flexbox布局和Grid布局的主要区别，并各举一个适合使用它们的场景示例。
-
什么是CSS选择器优先级？请按照优先级从高到低的顺序列出常见选择器类型。
-
解释HTML5语义化标签的意义，并列举5个常用的语义化标签及其用途。
-
如何实现一个响应式布局？请描述至少三种不同的技术方法及其适用场景。
答案
选择题答案：
-
A)
<nav> -
B)
opacity -
C)
#main -
B)
justify-content -
B)
<ol> -
B) 文档流中的正常位置
-
B)
display: grid -
D) outline
-
B)
alt -
B)
:hover
简答题参考答案：
-
盒模型：CSS盒模型由内容(content)、内边距(padding)、边框(border)和外边距(margin)组成。
box-sizing: content-box是默认值，元素的宽度和高度只包含内容；box-sizing: border-box则包含内容、内边距和边框，使布局计算更直观。 -
Flexbox vs Grid：
-
Flexbox是一维布局系统，适合组件内部排列（如导航菜单）
-
Grid是二维布局系统，适合整体页面布局（如杂志式布局）
-
Flexbox示例：导航栏项目排列
-
Grid示例：产品卡片网格展示
-
-
选择器优先级：
从高到低：内联样式 > ID选择器 > 类选择器/属性选择器/伪类 > 元素选择器/伪元素 > 通用选择器 -
语义化标签：
-
<header>：页眉 -
<nav>：导航 -
<main>：主要内容 -
<article>：独立内容 -
<footer>：页脚
意义：提高可访问性、SEO友好、代码可读性
-
-
响应式布局实现：
-
媒体查询(@media)：根据不同屏幕尺寸应用不同样式
-
弹性布局(Flexbox)：元素自动调整大小和位置
-
网格布局(Grid)：创建灵活的网格系统
-
相对单位(rem/vw)：基于视口大小的缩放
-
图片响应式(max-width:100%)：图片自适应容器
-
补充学习CSS3 transform 属性 | 菜鸟教程