【网页设计】期末复习（三）

pitytheriver

已于 2024-07-16 18:48:49 修改

阅读量424

点赞数 4

分类专栏：网页设计文章标签： css html 前端

于 2024-07-16 18:47:02 首次发布

本文链接：https://blog.csdn.net/qq_64077978/article/details/140473929

版权

网页设计专栏收录该内容

15 篇文章 0 订阅

订阅专栏

1、

系统提供

下面的选项中, 表示元素距离上下左右的外边距都是10px的是哪一项（）？

修改

{padding:10px;}
{margin: 10px 0;}
{padding: 10px 0;}
{margin: 10px;}

参考答案:

答案解析:

在CSS中，表示外边距的属性是margin，如果元素距离四个方向的外边距为相同的值10px，可以表示为“margin:10px;”。

2、

系统提供

下列选项中，用于改变盒子模型外边距的是（）。

修改

margin
padding
type
border

参考答案:

答案解析:

无

3、

系统提供

在下列选项中，background-position属性值书写正确的是（）。

修改

p{ background-position:left top; }
p{ background-position:left 10; }
p{ background-position:10 top ;}
p{ background-position:top 10 ;}

参考答案:

答案解析:

背景图像在元素中的对齐方式有3中，分别是使用数值、使用预定义的关键字、使用百分比。但是在定义元素对齐方式中，数值、关键字和百分比不能混用。

4、

系统提供

<div>标记是网页布局中最常用的标记，其显示类型为（）。

修改

块级类型
行内类型
行内块类型
浮动类型

参考答案:

答案解析:

常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标记是最典型的块元素，常用于网页布局和网页结构的搭建。

5、

系统提供

下列样式代码中，可以将块元素转换为行内元素的是（）。

修改

display:none;
display:block;
display:inline-block;
display:inline;

参考答案:

答案解析:

display属性常用的属性值及含义如下：
inline：此元素将显示为行内元素（行内元素默认的display属性值）。
block：此元素将显示为块元素（块元素默认的display属性值）。
inline-block：此元素将显示为行内块元素，可以对其设置宽高和对齐等属性，但是该元素不会独占一行。
none：此元素将被隐藏，不显示，也不占用页面空间，相当于该元素不存在。

6、

系统提供

如果有两个上下并列关系的盒子，上面盒子的下外边距是30px，下面盒子的上外边距是20px，那么这两个盒子之间的间距是（）。

修改

30像素
20像素
50像素
10像素

参考答案:

答案解析:

根据外边距合并的原理，会以最大外边距的为准，因此这里是30像素。

7、

系统提供

下列选项中，用于更改元素左内边距的是（）。

修改

text-indent
padding-left
margin-left
padding-right

参考答案:

答案解析:

在CSS中padding属性用于设置内边距，方法如下：
padding-top:上内边距;
padding-right:右内边距;
padding-bottom:下内边距;
padding-left:左内边距;

8、

系统提供

下列样式代码中，用于定义盒子上边框为1像素、蓝色、单实线的是（）。

修改

border-top:1px solid blue;
border:1px solid blue;
border-top:1px dashed blue;
border:1px dashed blue;

参考答案:

答案解析:

在CSS中边框属性包括边框样式属性（border-style）、边框宽度属性（border-width）、边框颜色属性（border-color）、单侧边框的属性、边框的综合属性。
对本题中几个单词的解释如下：
border-top:上边框
solid:边框为单实线
dashed:边框为虚线

9、

系统提供

在下列选项中，对代码“ margin:10px 0 20px;”解释正确的是（）。

修改

上间距10px，左右间距0，下间距20px
上间距10px，左间距0，右间距20px
上下间距10px，左间距0，右间距20px
上间距10px，左间距0，右下间距20px

参考答案:

答案解析:

使用复合属性margin定义外边距时，必须按顺时针顺序采用值复制，一个值为四边、两个值为上下/左右，三个值为上/左右/下。

10、

系统提供

关于盒子模型中的宽度和高度属性，下面说法正确的是（）。

修改

盒子模型中的宽度和高度属性适用于所有元素
盒子模型中的宽度和高度属性仅适用于行内元素
盒子模型中的宽度和高度属性仅适用于块级元素
以上说法都正确

参考答案:

答案解析:

宽度属性width和高度属性height仅适用于块级元素，对行内元素无效（<img />标记和<input />除外）。

11、

系统提供

以下属性中，不能增加盒子尺寸的属性是（）。

修改

height
width
padding
text-decoration

参考答案:

答案解析:

text-decoration是文本修饰属性，它不能增大盒子的尺寸。

12、

系统提供

关于样式代码“.box{width:200px; padding:15px; margin:20px;}”下列说法正确的是（）。

修改

.box的总宽度为200px
.box的总宽度为 270px
.box的总宽度为 235px
以上说法均错误

参考答案:

答案解析:

盒子的总宽度= width+左右内边距之和+左右边框宽度之和+左右外边距之和
所以，.box的总宽度= width（200px）+左右内边距（15px*2）+左右外边距（20px*2） =270px

13、

系统提供

一个盒子的宽（width）和高（height）均为300px，左内边距为30px，同时盒子有3px的边框，请问这个盒子的总宽度是多少（）？

修改

333px
366px
336px
363px

参考答案:

答案解析:

盒子的总宽度= width+左右内边距之和+左右边框宽度之和+左右外边距之和
所以，盒子的总宽度= width（300px）+左内边距（30px）+左右边框宽度之和（3px*2） =336px

14、

系统提供

在下面的程序中，第一个div和第二个div之间的垂直间距是（）。
<style type="text/css">
div{
   width:200px;
   height:60px;
   background:red;
}
.one{ margin-bottom:20px;}
.two{ margin-top:40px;}
</style>
</head>
<body>
<div class="one">第一个div</div>
<div class="two">第二个div</div>
</body>

修改

20px
40px
60px
80px

参考答案:

答案解析:

第一个div和第二个div之前的垂直外边距会发生合并，合并后的外边距为margin-bottom与margin-top中的较大者，因此在上面的程序中两个div之间的垂直间距为40px。

15、

系统提供

当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距是（）。

修改

margin-top的值。
margin-bottom的值。
margin-bottom与margin-top之和。
margin-bottom与margin-top中的较大者。

参考答案:

答案解析:

当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则它们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者。

16、

系统提供

在CSS中，提供了背景图像属性用来设置背景。在下列选项中，设置背景图片格式正确的是（）。

修改

body{ background: url(1.png);}
body{ background-image: url(1.png);}
body{ background-color: url(1.png);}
body{ background-repeat: url(1.png);}

参考答案:

[ "A", "B" ]

答案解析:

background属性和background-image属性都可以设置背景图属性。

17、

系统提供

下列选项中，可用于定义背景颜色的是（）。

修改

background-color:red;
background-color:#f00;
background-color:rgb(255,0,0);
color:#f00;

参考答案:

[ "A", "B", "C" ]

答案解析:

在CSS中，网页元素的背景颜色使用background-color属性来设置，其属性值与文本颜色的取值一样，可使用预定义的颜色、十六进制#RRGGBB、RGB代码rgb(r,g,b)。

18、

系统提供

下列选项中，属于边框样式常用属性值的是（）。

修改

solid
dashed
dotted
none

参考答案:

[ "A", "B", "C", "D" ]

答案解析:

边框样式用于定义页面中边框的风格，常用属性值如下：
none：没有边框即忽略所有边框的宽度（默认值）
solid：边框为单实线
dashed：边框为虚线
dotted：边框为点线
double：边框为双实线

19、

系统提供

下面选项中，属于盒子模型主要属性的是（）。

修改

padding
margin
type
border

参考答案:

[ "A", "B", "D" ]

答案解析:

盒子模型的主要属性有：内边距padding、外边距margin、边框border、背景background等。

20、

系统提供

下列选项中，属于盒子模型背景属性的是（）。

修改

color
background-image
background-repeat
background

参考答案:

[ "B", "C", "D" ]

答案解析:

盒子模型的背景属性包括背景颜色(background-color)、背景图片(background-image)、背景位置(background-position)、背景平铺(background-repeat)、背景定位(background-attachment)及复合属性(background)。

21、

系统提供

下列样式代码中，可用于设置背景图像平铺方式的是（）。

修改

background-repeat:no-repeat;
background-attachment:fixed;
background-attachment:scroll;
background-repeat: repeat-x;

参考答案:

[ "A", "D" ]

答案解析:

background-repeat属性用于控制背景图像的平铺，其取值如下：
repeat：沿水平和竖直两个方向平铺（默认值）
no-repeat：不平铺（图像位于元素的左上角，只显示一次）
repeat-x：只沿水平方向平铺
repeat-y：只沿竖直方向平铺

22、

系统提供

下列样式代码中，用于定义盒子上边框为2像素、单实线、灰色的是（）。

修改

border-top:2px solid #CCC;
border-top:2px dashed #CCC;
border:2px solid #CCC;
border-top-style:solid; border-top-width:2px; border-top-color:#CCC;

参考答案:

[ "A", "D" ]

答案解析:

当只需单独定义某一侧的边框时，可以使用单侧边框的综合属性，也可以针对该边分别设置样式、宽度和颜色。

23、

系统提供

下列选项中，可用于更改元素左外边距的是（）。

修改

text-indent
margin-left
margin
padding-right

参考答案:

[ "B", "C" ]

答案解析:

设置外边距的方法如下：
margin-top:上外边距;
margin-right:右外边距;
margin-bottom:下外边距;
margin-left:上外边距;
margin:上外边距 [右外边距下外边距左外边距]; 。

24、

系统提供

盒子模型有多个属性，其中元素内容与边框之间的距离通常被称为（）。

修改

内边距
内填充
外边距
外填充

参考答案:

[ "A", "B" ]

答案解析:

常常需要给元素设置内边距，以调整内容在盒子中的显示位置。所谓内边距指的是元素内容与边框之间的距离，也常常称为内填充。

25、

系统提供

在盒子模型中边框是一个重要的属性，下列选项中属于边框属性的是（）。

修改

border-style
border-height
border-width
border-color

参考答案:

[ "A", "C", "D" ]

答案解析:

边框的主要属性有：边框样式属性（border-style）、边框宽度属性（border-width）、边框颜色属性（border-color）。

26、

系统提供

下列选项中，可清除元素默认内外边距的是（）。

修改

font-size:0;
line-height:0;
padding:0;
margin:0;

参考答案:

[ "C", "D" ]

答案解析:

制作网页时，可使用如下代码清除元素的默认内外边距：
*{
padding:0; /*清除内边距*/
margin:0; /*清除外边距*/
}

27、

系统提供

下面选项中，属于盒子模型基本属性的是（）。

修改

内边距
边框
外边距
宽和高

参考答案:

[ "A", "B", "C", "D" ]

答案解析:

盒子模型拥有内边距、边框、外边距、宽和高这些基本属性。

28、

系统提供

关于外边距的合并问题，下列说法正确的是（）。

修改

外边距合并是所有浏览器的一个共同特性。
外边距合并上下左右边距都会有问题。
外边距合并只限于嵌套关系的盒子。
外边距合并可以用overflow属性去解决。

参考答案:

[ "A", "D" ]

答案解析:

当两个相邻或嵌套的块元素相遇时，其垂直方向的外边距会自动合并，发生重叠。所以，只有垂直方向才会出现外边距合并的问题，另外，上下并列关系和嵌套关系的盒子都会出现外边距的问题。

29、

系统提供

关于内边距属性padding，下列说法正确的是（）。

修改

padding属性是复合属性
必须按顺时针顺序采用值复制原则定义4个方向的内边距
其取值可为1到4个值
padding的取值不能为负

参考答案:

[ "A", "B", "C", "D" ]

答案解析:

使用复合属性padding定义内边距时，必须按顺时针顺序采用值复制，一个值为四边、两个值为上下/左右，三个值为上/左右/下。实际工作中padding属性最常用的值是像素px，不允许使用负值。

30、

系统提供

下面选项中，关于内边距的说法正确的是（）。

修改

内边距指的是元素内容与边框之间的距离，也常常称为内填充
在CSS中设置盒子的内边距，需要使用padding属性
内边距属性padding是一个复合属性
padding属性取值方法很多，但是不允许使用三值写法

参考答案:

[ "A", "B", "C" ]

答案解析:

内边距指的是元素内容与边框之间的距离，也常常称为内填充。在CSS中padding属性用于设置内边距，同边框属性border一样，padding也是复合属性。使用复合属性padding定义内边距时，必须按顺时针顺序采用值复制，一个值为四边、两个值为上下/左右，三个值为上/左右/下。所以，可以采用三值写法。

31、

系统提供

关于样式代码“padding:20px 30px 10px;”，下列说法正确的是（）。

修改

该元素上下方向的内边距均为20px
该元素的上内边距为20px，左右内边距为30px，下内边距为10px
该样式等价于"padding:20px 30px 10px 30px;"
以上说法均正确

参考答案:

[ "B", "C" ]

答案解析:

使用复合属性padding定义内边距时，必须按顺时针顺序采用值复制，一个值为四边、两个值为上下/左右，三个值为上/左右/下。

32、

系统提供

使块级元素水平居中，需要遵循以下哪些条件（）。

修改

为元素设置高度height
为元素设置宽度width
将元素左右外边距的值设置为auto
使元素浮动float

参考答案:

[ "B", "C" ]

答案解析:

当对块级元素应用宽度属性width，并将其左右的外边距都设置为auto时，可使块级元素水平居中，实际工作中常用这种方式进行网页布局。

33、

系统提供

关于内边距属性的赋值方式，下列说法正确的是（）。

修改

padding:10px;表示盒子四个方向padding均为10px
padding:10px 20px 30px;表示上为10px，右20px，下30px，左0px
padding:10px 20px;表示上下为10px，左右为20px
padding:10px 20px 30px 40px;表示上右下左内边距分别为10px、20px、30px、40px

参考答案:

[ "A", "C", "D" ]

答案解析:

使用复合属性padding定义内边距时，必须按顺时针顺序采用值复制，一个值为四边、两个值为上下/左右，三个值为上/左右/下。

34、

系统提供

在CSS中设置边框综合属性时，各个属性的值之间需要使用空格隔开。( )

修改

参考答案:

对

答案解析:

设置边框的综合属性的时候，宽度、样式、颜色顺序任意，不分先后，可以只指定需要设置的属性，各个属性的值之间使用空格隔开。

35、

系统提供

在设置边框宽度和边框颜色时，必须同时设置边框样式。（）

修改

参考答案:

对

答案解析:

在设置边框宽度或边框颜色时，必须同时设置边框样式，如果未设置样式或设置为none，则不论宽度设置为多少或设置何种颜色，都不会有任何边框效果。

36、

系统提供

在CSS中border属性是一个复合属性。（）

修改

参考答案:

对

答案解析:

像border、border-top等这样，能够一个属性定义元素的多种样式，在CSS中称之为复合属性。常用的复合属性有font、border、margin、padding和background等。

37、

系统提供

默认情况下块元素会独自占据一整行或多整行。（）

修改

参考答案:

对

答案解析:

块元素在页面中以区域块的形式出现，其特点是，每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。

38、

系统提供

内边距出现在盒子模型内容区域的周围。（）

修改

参考答案:

对

答案解析:

内边距出现在内容区域的周围，当给元素添加背景色或背景图像时，该元素的背景色或背景图像也将出现在内边距中。

39、

系统提供

宽度属性width和高度属性height对块元素无效。（）

修改

参考答案:

错

答案解析:

宽度属性width和高度属性height仅适用于块级元素，对行内元素无效（<img />标记和<input />除外）。

40、

系统提供

盒子模型中，外边距合并问题是IE6独有的一个BUG，需要专门解决。（）

修改

参考答案:

错

答案解析:

盒子模型中关于外边距合并的问题，是所有主流浏览器都有的特性，不是IE6独有的BUG。

41、

系统提供

外边距属性的取值不可以为负值。（）

修改

参考答案:

错

答案解析:

外边距可以使用负值，使相邻元素重叠。

42、

系统提供

所有的标签都可以设置宽度和高度属性。（）

修改

参考答案:

错

答案解析:

对行内元素设置宽度和高度是不生效的，它们的尺寸只和内容有关。

43、

系统提供

一个div的高度为200px，内边距为10px，边框为1px，那么它的总高度尺寸为222px。（）

修改

参考答案:

对

答案解析:

padding和border的尺寸都包括上下两个部分，所以最终结果不是211px，而是222px。

44、

系统提供

每个元素都必须定义内边距、边框、外边距等盒子模型的基本属性。（）

修改

参考答案:

错

答案解析:

盒子模型拥有内边距、边框、外边距、宽和高这些基本属性，但是并不要求每个元素都必须定义这些属性。

45、

系统提供

外边距指的是元素边框与相邻元素之间的距离。（）

修改

参考答案:

对

答案解析:

无

46、

系统提供

<div>标记最大的意义在于和浮动属性float配合，实现网页的布局。（）

修改

参考答案:

对

答案解析:

无

47、

系统提供

在HTML中，盒子模型的总高度等于“height+padding+margin”的尺寸总和。（）

修改

参考答案:

错

答案解析:

盒子模型的总高度还应该包括border的尺寸。

48、

系统提供

默认情况下子元素会继承父元素的背景。（）

修改

参考答案:

对

答案解析:

无

49、

系统提供

在CSS中，background-color是用来设置背景图像位置的属性。( )

修改

参考答案:

错

答案解析:

background-color是设置背景颜色的属性。

50、

系统提供

在CSS中，在给块元素设置宽度的前提下，使块元素水平居中的代码为“margin: 0 auto;”。( )

修改

参考答案:

对

答案解析:

当对块级元素应用宽度属性width，并将左右的外边距都设置为auto，可使块级元素水平居中。

51、

系统提供

网页是多个盒子模型嵌套排列的结果。（）

修改

参考答案:

对

答案解析:

无

52、

系统提供

在CSS中，代码“margin:10px 0;”表示左右间距是10px，上下间距是0。 ( )

修改

参考答案:

错

答案解析:

如果margin属性只有两个值，那么第一个值代表上下的间距，第二个值代表左右的间距。

53、

系统提供

padding属性用于设置内边距。在实际工作中，内边距属性单位通常为px，并可以取负值。( )

修改

参考答案:

错

答案解析:

内边距padding相关属性的取值可为auto自动（默认值）、不同单位的数值、相对于父元素（或浏览器）宽度的百分比%，实际工作中最常用的是像素值px，不允许使用负值。

54、

系统提供

行内元素和块元素可以相互嵌套。（）

修改

参考答案:

错

答案解析:

行内元素通常嵌套在块元素中使用，而块元素却不能嵌套在行内元素中。

55、

系统提供

默认情况下，背景图像会自动向水平和竖直两个方向平铺。（）

修改

参考答案:

对

答案解析:

无

56、

系统提供

使用复合属性padding定义内边距时，必须按顺时针顺序采用值复制，一个值为四边、两个值为上下/左右，三个值为上/左右/下。( )

修改

参考答案:

对

答案解析:

使用复合属性padding定义内边距时，必须按顺时针顺序采用值复制，一个值为四边、两个值为上下/左右，三个值为上/左右/下。

57、

系统提供

在CSS中，边框属性包括边框样式属性、边框宽度属性、边框颜色属性、单侧边框的属性以及边框的综合属性。( )

修改

参考答案:

对

答案解析:

在CSS中，边框属性包括边框样式属性（border-style）、边框宽度属性（border-width）、边框颜色属性（border-color）、单侧边框的属性、边框的综合属性。

58、

系统提供

<span>是一个行内元素，它需要设置display属性值为block后才能设置宽高。（）

修改

参考答案:

对

答案解析:

行内元素不能设置宽高，转换成块元素才可设置宽高。

59、

系统提供

想拉开盒子与盒子之间的距离，合理地布局网页，就需要为盒子设置【】，即元素边框与相邻元素之间的距离。

修改

参考答案:

["外边距"]

答案解析:

网页是由多个盒子排列而成的，要想拉开盒子与盒子之间的距离，合理地布局网页，就需要为盒子设置外边距，所谓外边距指的是元素边框与相邻元素之间的距离。

60、

系统提供

块元素和行内元素可以互相转换，在CSS中将块元素转换为行内元素的样式代码是【】。

修改

参考答案:

["display;inline;"]

答案解析:

无

61、

系统提供

在CSS中，提供了背景图像属性用来设置背景。其中设置背景图像位置的属性为【】。

修改

参考答案:

["background-position"]

答案解析:

在CSS属性中，background-position用来设置背景图像的位置。

62、

系统提供

在CSS中，padding属性用于设置【】, 也常常称为内填充。

修改

参考答案:

["内边距"]

答案解析:

在CSS中，padding属性用于设置内边距，内边距指的是元素内容与边框之间的距离，也常常称为内填充。

63、

系统提供

请阅读下面的代码，根据注释中的要求填写代码。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>边框属性</title>
<style type="text/css">
.box{
   width:300px;
   height:300px;
   _____________________;        /*设置顶部边框线为1px，实线，黑色;*/
   _____________________;        /*设置右侧边框线为2px，虚线，红色;*/
   _____________________;        /*设置底部边框线为4px，实线，绿色;*/
   _____________________;          /*设置左侧边框线为8px，虚线，蓝色;*/
}
</style>
</head>
<body>
<div class="box">我是带边框的盒子</div>
</body>
</html>

修改

参考答案:

border-top:1px solid #000;
border-right:2px dashed red;
border-bottom:4px solid green;
border-left:8px dashed blue;

答案解析:

CSS提供了综合设置边框的属性，具体如下：
border-top:上边框宽度样式颜色;
border-right:右边框宽度样式颜色;
border-bottom:下边框宽度样式颜色;
border-left:左边框宽度样式颜色;
border:四边宽度样式颜色;
上面的设置方式中，宽度、样式、颜色顺序任意，不分先后，可以只指定需要设置的属性，省略的部分将取默认值（样式不能省略）。

64、

系统提供

请阅读下面的代码，根据注释中的要求填写代码。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>内边距属性</title>
<style type="text/css">
.box01{
   width:300px;
   height:300px;
   _____________________   /*盒子四个方向的内边距相同，均为10px*/
   border:1px solid #000;
}
.box02{
   width:300px;
   height:300px;
   _____________________;   /*盒子上内边距为10px，左右内边距为20px，下内边距为30px*/
   border:1px solid #000;
}
</style>
</head>
<body>
<div class="box01"></div>
<div class="box02"></div>
</body>
</html>