全部学科
Python全栈
python
NodeJS全栈
nodejs

CSS盒模型

20 题 40 分钟 难度:★★

考察知识点

  • CSS盒模型组成结构(content、padding、border、margin)
  • 标准盒模型与IE盒模型的区别
  • box-sizing属性的使用
  • margin外边距折叠现象
  • padding和border的简写语法
💡 参考答案在文末
判断题
1

box-sizing: content-box; 是CSS盒模型的默认值,设置width时只表示内容区域的宽度。

A

B

2

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

A

B

3

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

A

B

4

无论使用content-box还是border-box,元素最终在页面中占据的总空间(包含margin)都是相同的。

A

B

5

border(边框)会增加元素盒模型的总尺寸,属于盒模型的一部分。

A

B

6

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

A

B

单选题
7

关于CSS的margin属性,以下说法正确的是?

A

margin的值只能为正数

B

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

C

margin可以设置为负值

D

margin是元素内容的一部分

8

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

A

10px

B

-10px

C

20px

D

-30px

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

CSS盒模型由哪四个部分组成(从内到外)?

A

content、padding、border、margin

B

content、border、padding、margin

C

padding、content、border、margin

D

margin、border、padding、content

11

CSS的 box-sizing 属性用于控制元素的盒模型计算方式,以下哪个不是它的有效值?

A

content-box

B

border-box

C

padding-box

D

inherit

12

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

A

宽度270px,高度170px

B

宽度250px,高度150px

C

宽度230px,高度130px

D

宽度290px,高度190px

13

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

A

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

B

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

C

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

D

auto值会让元素脱离文档流

14

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

A

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

B

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

C

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

D

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

15

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

A

50px

B

30px

C

20px

D

25px

16

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

A

border-width

B

border-style

C

border-color

D

border-radius

多选题
17

以下关于CSS盒模型的说法,正确的有?

A

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

B

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

C

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

D

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

E

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

18

关于 box-sizing 属性,以下说法正确的有?

A

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

B

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

C

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

D

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

E

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

填空题
19

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

20

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

参考答案
1.正确 2.错误 3.正确 4.正确 5.正确 6.正确 7.C 8.B 9.C 10.A 11.C 12.A 13.B 14.B 15.B 16.A 17.A;B;C;D 18.A;B;C;D;E 19.2px solid red 20.box-sizing: border-box
想在手机上练习这套试卷?
使用微信卷王开发者小程序,打开首页顶部扫码功能识别二维码
← 上一套试卷 CSS渲染与布局原理
下一套试卷 → CSS选择器专题测试
扫码体验小程序
加载中
想在手机上刷题学习?
使用微信卷王开发者小程序,打开首页顶部扫码功能识别二维码