《网页设计与制作》模块04基础 - 在线考试测评模板

Q1:姓名

填空1

Q2:班级（4位数字，如：2518）

填空1

Q3:CSS3盒子模型从外到内的正确层级顺序是 ( )。

内容区→内边距→边框→外边距

外边距→边框→内边距→内容区

外边距→内边距→边框→内容区

边框→外边距→内边距→内容区

Q4:浏览器默认采用的CSS3盒子模型尺寸计算规则对应的box-sizing属性值是 ( )。

border-box

content-box

padding-box

margin-box

Q5:当设置box-sizing:border-box；属性值时，元素的width属性值包含 ( )。

仅内容区的宽度

内容区＋内边距的宽度

内容区＋内边距＋边框的宽度

内容区＋内边距＋边框＋外边距的宽度

Q6:要实现块级元素在父容器中水平居中，正确的margin设置是 ( )。

margin:auto 0;

margin: 0 auto;

margin: auto;

margin: 0 0 0 auto;

Q7:两个垂直相邻的块级元素，分别设置margin-bottom:25px；属性值和 margin-top:15px；属性值，合并后的实际间距是 ( )。

40px

25px

15px

20px

Q8:在下列选项中， ( ) 属性用于控制背景图像的绘制范围。

background-origin

background-clip

background-size

background-position

Q9:display:inline-block；元素的核心特性是 ( )。

独占一行，不可设置宽高

不独占一行，不可设置宽高

不独占一行，可设置宽高

独占一行，可设置宽高

Q10:在下列选项中， ( ) 属性值可以清除元素的边框。

border: 1px;

border: none;

border:transparent;

border: hidden;

Q11:开发中统一页面所有元素的CSS3盒子模型计算规则，最常用的CSS3选择器是( )。

body {box-sizing:border-box;}

*{box-sizing:border-box;}

div (box-sizing:border-box;}

.container (box-sizing:border-box;}

Q12:要实现多个卡片等宽、等高且均匀分布，最适合的布局方式是 ( )。

普通流布局

Flex弹性布局

浮动布局

定位布局

Q13:在下列选项中， ( ) 属性用于处理元素内容超出容器尺寸的显示问题。

overflow

overflow-x

overflow-y

all of the above

Q14:下列关于padding属性的说法，错误的是 ( )。

可以设置4个方向的内边距

取值可以为百分比

取值可以为负数

复合写法遵循顺时针顺序（上→右→下→左）

Q15:在Grid布局中，用于定义网格列数和列宽的属性是 ( )。

grid-template-rows

grid-template-columns

grid-columns

grid-rows

Q16:在下列选项中， ( ) 不会发生外边距合并。

垂直相邻的两个块级元素

嵌套的父子块级元素（无隔离）

水平相邻的两个块级元素

空块级元素的上下外边距

Q17:在Flex布局中，用于设置子元素在主轴上对齐方式的属性是 ( )。

align-items

justify-content

align-content

justify-items

Q18:要给元素添加圆角效果，正确的CSS3属性是 ( )。

border-radius

radius

comer-radius

border-comer

Q19:在下列选项中， ( ) 属性可以实现元素类型转换。

type

display

position

float

Q20:在Grid布局中，用于设置网格项目之间间距的属性是 ( )。

margin

padding

gap

space

Q21:行内元素（inline）的特点是 ( )。

宽、高由内容决定，可设置上、下外边距

宽、高由内容决定，不可设置上、下外边距

宽、高可自定义，不可设置上、下外边距

宽、高可自定义，可设置上、下外边距

Q22:在下列选项中， ( ) 属性用于设置边框的样式。

border-width

border-color

border-style

border-radius

Q23:CSS3盒子模型的4层结构从外到内依次是________、________、________、________。

填空1

填空2

填空3

填空4

Q24:在设置box-sizing:border-box；属性值后，元素的width属性值包含________、________和________。

填空1

填空2

填空3

Q25:垂直相邻块级元素的外边距合并现象的英文简称为________。

填空1

Q26:要使元素4个角的圆角半径为10px,CSS3代码应为________。

填空1

Q27:background-clip属性的________值表示背景仅在内容区域绘制。

填空1

Q28:当元素内容超出容器尺寸时，设置________:hidden；属性值可以裁剪超出的部分。

填空1

Q29:margin: 15px auto；属性值的作用是让块级元素在父容器中________对齐。

填空1

Q30:在Flex布局中，________ 属性用于设置子元素的放大比例，默认值为0。

填空1

Q31:在Grid布局中，使用________函数可以简化重复的列宽或行高设置，如repeat(3，1fr)。

填空1

Q32:行内块元素之间的默认间隙是由________导致的。

填空1

Q33:border-radius属性只能设置4个角相同的圆角值。（）

正确

错误

Q34:margin:0 auto；属性值可以实现块级元素的水平居中。（）

正确

错误

Q35:标准CSS3盒子模型的box-sizing属性值为content-box，是浏览器默认值。（）

正确

错误

Q36:padding属性的取值可以为负数。（）

正确

错误

Q37:background-clip:padding-box；属性值表示背景绘制到内边距外沿，边框区域不显示背景。（）

正确

错误

Q38:overflow:hidden；属性值可以用于清除浮动带来的影响。（）

正确

错误

Q39:border-image 属性必须当border-width〉0时才能生效。（）

正确

错误

Q40:负margin会导致元素脱离文档流。（）

正确

错误

Q41:块级元素默认会独占一行，宽度撑满父容器。（）

正确

错误

Q42:在Flex布局中，justify-content:center；属性值可以实现子元素在交叉轴上居中对齐。（）

正确

错误

Q43:CSS3盒子模型

填空1

Q44:外边距合并

填空1

Q45:Flex布局

填空1

Q46:Grid布局

填空1

Q47:元素类型转换

填空1

Q48:简述标准盒子模型（content-box）与怪异盒子模型（border-box）的核心差异。

填空1

Q49:在实际开发中，为什么推荐全局设置box-sizing:border-box；属性值？

填空1

Q50:简述行内块元素之间默认间隙的产生原因及解决方案。

填空1

Q51:列举至少三种解决外边距合并问题的方法，并简要说明原理。

填空1

Q52:对比Flex布局与Grid布局的适用场景。

填空1

Q53:使用CSS3盒子模型属性创建一个横向导航栏，要求如下。（1）导航栏背景色为线性渐变（#393f46 0%,#6271d3 100%）。（2）导航项横向排列，间距均匀，鼠标悬停时背景色为半透明［rgba(240,240,240,4)]．（3）导航项文本无下画线，颜色为白色，内边距为8px15px。（4）导航栏整体上、下内边距为20px，左侧内边距为100px。

填空1

Q54:使用Flex布局实现一个三列卡片布局，要求如下。（1）三个卡片横向均匀分布，间距为20px。（2）卡片宽度自适应，最小宽度为250px。（3）卡片内部文本垂直居中，内边距为20px。（4）卡片添加边框、圆角（8px）和阴影效果。（5）每个卡片顶部有不同颜色的边框（红、绿、蓝）。

填空1

Q55:使用Grid布局实现一个复杂卡片布局，要求如下。（1）网格布局为三列，每列宽度均等（1fr）。（2）卡片间距为20px。（3）第一个卡片跨两列，背景色为＃2c3e50。（4）第二个卡片跨两行，背景色为＃3498db。（5）其余卡片背景色为＃42b983。（6）所有卡片文本颜色为白色，居中显示，内边距为15px。

填空1