全部学科

通用技术

redis git docker nginx mysql zookeeper rabbitmq

Web前端

TypeScript vue CSS HTML javascript pinia vite

JAVA后端

maven spring Mytatis SpringMVC SpringBoot java

Python全栈

GO后端

golang gorm gin

NodeJS全栈

小程序首页

📝 1 篇文章 21 道配套习题

CSS盒模型专题

专题说明

CSS盒模型是理解网页布局的核心基础。本专题深入讲解content、padding、border、margin四大组成部分，掌握标准盒模型与IE盒模型的区别，学会解决外边距折叠等常见问题。

学习目标

理解CSS盒模型四大组成部分的结构关系
掌握标准盒模型(content-box)与IE盒模型(border-box)的区别
熟练使用box-sizing属性切换盒模型类型
理解外边距折叠现象及解决方案

学习内容

本专题涵盖盒模型核心模块：

盒模型结构：content、padding、border、margin从内到外
盒模型类型：content-box与border-box的计算差异
内边距padding：简写语法、不可为负值
外边距margin：简写语法、负值应用、auto居中
边框border：三要素简写、单方向设置
外边距折叠：相邻折叠、父子折叠、解决方法

学习建议

先理解盒模型结构，再学习两种模型的计算差异
掌握padding/margin/border的简写语法（顺时针规则）
重点理解外边距折叠的成因和解决方法
现代开发推荐全局设置border-box，避免计算困扰

📝 发现内容有误？点击此处直接编辑

📝 配套习题（21 题）

1

单选题

CSS盒模型由哪四个部分组成（从内到外）？

A

content、padding、border、margin

B

content、border、padding、margin

C

padding、content、border、margin

D

margin、border、padding、content

2

单选题

在标准盒模型下，一个元素的CSS设置为 width: 200px; height: 100px; padding: 20px; border: 5px solid; margin: 10px;，该元素实际占据的宽度和高度分别是多少？

A

宽度270px，高度170px

B

宽度250px，高度150px

C

宽度230px，高度130px

D

宽度290px，高度190px

3

单选题

以下哪个CSS属性可以设置元素边框的宽度？

A

border-width

B

border-style

C

border-color

D

border-radius

4

填空题

请使用border简写属性，设置一个宽度为2px、样式为实线、颜色为红色的边框：border: _____________;

5

单选题

关于CSS的margin属性，以下说法正确的是？

A

margin的值只能为正数

B

margin不会影响元素的布局位置

C

margin可以设置为负值

D

margin是元素内容的一部分

6

填空题

margin简写属性 margin: 10px 20px 30px 40px; 分别设置了四个方向的外边距，其中上边距为 ______，右边距为 ______，下边距为 ______，左边距为 ______。

7

判断题

两个水平相邻的块级元素，它们的左右margin会发生折叠合并。

A

对

B

错

8

单选题

设置 box-sizing: content-box; 后，元素CSS为 width: 300px; padding: 20px; border: 10px solid;，该元素的内容区宽度和盒子总宽度分别是多少？

A

内容区宽度300px，盒子总宽度300px

B

内容区宽度300px，盒子总宽度360px

C

内容区宽度260px，盒子总宽度300px

D

内容区宽度300px，盒子总宽度340px

9

单选题

设置 box-sizing: border-box; 后，元素CSS为 width: 300px; padding: 20px; border: 10px solid;，该元素的内容区宽度和盒子总宽度分别是多少？

A

内容区宽度300px，盒子总宽度360px

B

内容区宽度260px，盒子总宽度300px

C

内容区宽度240px，盒子总宽度300px

D

内容区宽度300px，盒子总宽度300px

10

判断题

box-sizing: border-box; 模式下，设置的width值包含了content、padding和border，设置的高度值也同理。

A

对

B

错

11

多选题

关于 box-sizing 属性，以下说法正确的有？

A

content-box是默认值，width只表示内容区宽度

B

border-box模式下，padding和border不会增加盒子总宽度

C

border-box常用于响应式布局，便于计算元素实际占用空间

D

可以通过 * { box-sizing: border-box; } 为所有元素设置border-box

E

两种盒模型下，margin都会增加元素占据的总空间

12

填空题

在现代CSS开发中，通常使用以下代码将所有元素设置为border-box模式：*, *::before, *::after { ______________________; }

13

单选题

两个相邻的块级元素，上方的元素设置了 margin-bottom: 30px;，下方的元素设置了 margin-top: 20px;，它们之间的实际间距是多少？

A

50px

B

30px

C

20px

D

25px

14

单选题

一个父元素没有设置padding和border，其子元素设置了 margin-top: 50px;，结果发现父元素跟着子元素一起向下移动了50px，而不是子元素相对于父元素向下偏移。以下哪种方法不能解决这个问题？

A

给父元素添加 padding-top: 1px;

B

给父元素添加 border-top: 1px solid transparent;

C

给父元素设置 overflow: hidden;

D

给父元素添加 margin-top: 10px;

15

判断题

只有相邻的块级元素在垂直方向上才会发生外边距折叠，行内元素和浮动元素不会发生外边距折叠。

A

对

B

错

16

单选题

为什么设置 margin: 0 auto; 可以让块级元素水平居中？

A

auto值会自动计算为父元素宽度的一半

B

auto值会平分父元素剩余的可用宽度，左右两边各占一半

C

auto值会自动设置为元素的宽度

D

auto值会让元素脱离文档流

17

单选题

padding（内边距）位于CSS盒模型的哪个位置？

A

内容区域内部

B

内容区域和边框之间

C

边框外部

D

最外层区域

18

填空题

padding简写属性 padding: 10px 20px 30px 40px; 设置的内边距：上边距为 ______，右边距为 ______，下边距为 ______，左边距为 ______。

19

判断题

padding可以设置为负值，实现元素内容向边框方向挤压的效果。

A

对

B

错

20

填空题

一个元素设置了 width: 200px; padding: 15px; border: 5px solid;：（1）如果使用content-box，盒子总宽度为 ______；（2）如果使用border-box，内容区宽度为 ______。

21

多选题

以下关于CSS盒模型的说法，正确的有？

A

标准盒模型的width只包含content区域

B

IE盒模型的width包含content、padding和border

C

无论哪种盒模型，margin都不包含在width中

D

可以通过box-sizing属性切换盒模型类型

E

默认情况下，浏览器使用IE盒模型

📝 发现内容有误？点击此处直接编辑

想查看更多习题和详细解析？

小程序提供完整的题库和详细解析

长按或扫描二维码，立即体验