### 关于CSS盒模型、外边距、Flex布局、ID与Class规则、块元素的相关选择题
#### 1
. CSS盒模型
CSS盒模型描述了一个
HTML元素的
结构，它由四个部分组成：内容区域（content）、填充（padding）、边界（border）和外边距（margin）。这些部分共同决定了元素在页面上的大小和位置。
- **题目**: 下列哪一项
不属于标准CSS盒模型的一部分？
- A
. Content
(内容
)
- B
. Padding
(内边距
)
- C
. Border-radius
(圆角半径
)
- D
. Margin
(外边距
)
- **答案**: C
`Border-radius` 是用于定义边框圆角的一个属性，并不是盒模型的标准
组成部分[^2]。
---
#### 2
. 外边距（Margin）
外边距是指围绕在一个元素周围的空白区域。相邻两个兄弟元素之间的垂直方向上只会保留较大的那个外边距值，这种现象称为“外边距折叠”。
- **题目**: 当两个垂直排列的块级元素上下相邻时，它们之间会发生什么情况？
- A
. 它们的顶部和底部外边距会相加
- B
. 只有较大者生效
- C
. 边界重叠并取平均值
- D
. 不发生任何变化
- **答案**: B
当两个垂直排列的块级元素上下相邻时，如果两者都有外边距，则只保留其中较大的那一个，这就是所谓的“外边距折叠”效应。
---
#### 3
. Flex布局
Flexbox是一种强大的布局机制，允许开发者轻松创建动态调整尺寸的内容容器。通过设置父容器为 `display: flex;` ，可以控制子项沿主轴或交叉轴分布的方式。
- **题目**: 使用Flex布局实现左侧固定宽度而右侧自动扩展的效果应如何配置样式？
- A
. 左侧设为 `width: auto;` , 右侧设为 `flex-grow: 0;`
- B
. 左侧设定具体宽度, 如 `width: 200px;`, 右侧应用 `flex: 1;`
- C
. 对两侧均施加相同的 `flex-basis` 属性
- D
. 将整个容器划分为网格单元格来分别指定比例
- **答案**: B
为了达到一侧定宽另一侧自适应伸缩的目的，在实际开发中通常给左栏赋予固定的像素单位宽度，右栏则启用 `flex: 1;` 来占据剩余可用空间[^3]。
```css
.outer {
display: flex;
}
.left {
width: 200px; /* 固定宽度 */
background-color: lightblue;
}
.right {
flex: 1; /* 自动填满剩下的地方 */
background-color: pink;
}
```
---
#### 4
. ID与Class规则
ID 和 Class 是两种常用的
HTML 元素标识符。每个
文档中的 id 应该是唯一的；class 则可重复应用于多个标签实例之上。
- **题目**:
下面关于ID和CLASS的说法错误的是哪个选项?
- A
. 同一网页里不允许存在相同名字的id
- B
. CLASS可以选择器形式如 `
.classname {}`
- C
. 单独某个DOM节点只能拥有唯一的一个CLASS名
- D
. 查询特定ID可以直接用document
.getElementById
('theid'
)
- **答案**: C
虽然单个 DOM 节点确实可以通过其 unique 的 id 进行快速定位访问，但是它可以同时属于若干不同的 classes 。因此说某节点仅能有一个 class 名字显然是不正确的[^1]。
---
#### 5
. 块元素
(Block-level Elements
)
块级元素总是独自占用一行或多行的空间，并且默认情况下具有一定的高度和宽度。
- **题目**: 下述哪些
HTML标记属于典型的块级元素?
(多选
)
- A
. `<p>`
- B
. `<span>`
- C
. `<h1>` 至 `<h6>`
- D
. `<img>`
- **答案**: AC
像段落
(`<p>`
)或者标题系列
(`<h*>`
)这样的都是典型意义上的块状展示型组件，而 `<span>` 和 `<img>` 更倾向于作为行内
(in-line
)表现形式呈现出来。
---
###
扫一扫
601
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
