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

Q1:姓名

填空1

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

填空1

Q3:CSS3浮动技术的原始设计目的是 ( )。

实现PC端复杂的多栏布局

实现页面元素的绝对居中

让文字环绕图片

创建网格系统

Q4:当一个元素设置为float:left;后，其表现类似于 ( )。

行内元素（inline）

内联块元素（inline-block）

块级元素（block）

表格元素（table）

Q5:下列关于浮动元素特性的描述，正确的是 ( )。

浮动元素完全脱离文档流，不占据任何空间

浮动元素会脱离正常的文档流，但文本内容会环绕其周围

浮动元素不会影响后续任何元素的布局

浮动元素无法设置宽度和高度

Q6:浮动元素会一直移动，直到其外边缘碰到 ( ) 为止。

浏览器视口的边框

父容器的内边距边缘

父容器的边框或另一个浮动元素的边框

页面的body元素

Q7:在CSS3中， ( ) 是float属性的有效值。

center

top

bottom

inherit

Q8:当父元素内的所有子元素都浮动时，可能导致的最常见问题是 ( )。

子元素无限循环

父元素高度塌陷

浏览器崩溃

子元素自动变为绝对定位

Q9:在下列选项中， ( ) 不是常用的清除浮动以解决父元素高度塌陷的方法。

为父元素设置overflow:hidden;

在浮动元素后添加一个设置clear:both;的空标签

为父元素设置position:relative;

使用.clearfix::after伪元素

Q10:清除浮动的clear属性不能接受 ( )。

left

right

middle

both

Q11:下列关于相对定位（position:relative;）的描述，正确的是 ( )。

元素脱离文档流，原空间被释放

元素相对于浏览器视口进行定位

元素相对于自身在文档流中的原始位置进行偏移

元素必须设置top属性和left属性才能生效

Q12:绝对定位（position:absolute;）元素的定位基准点是 ( )。

文档的body元素

其直接父元素，无论父元素是否定位

最近一个定位（非static）的祖先元素

浏览器视口的左上角

Q13:若要将一个元素固定在浏览器视口，不随页面滚动，则应使用 ( )。

position: static;

position: relative;

position: absolute;

position: fixed;

Q14:层叠顺序属性z-index对以下哪种position值的元素有效？ ( )

static

relative

对所有position值都有效

仅对fixed有效

Q15:当同时设置top:10px;和bottom:20px;时，一个position:absolute;元素最终会如何偏移？ ( )

同时应用top属性和bottom属性

bottom属性优先级更高

top属性优先级更高

产生冲突，元素不显示

Q16:如何为一个元素建立定位上下文，使其成为内部position:absolute;子元素的参照容器？ ( )

为该元素设置float:left;

为该元素设置position:static;

为该元素设置position:relative;（不设置偏移）

为该元素设置z-index:1;

Q17:当使用固定定位（position:fixed;）实现顶部导航栏时，常遇到的副作用是 ( )。

导航栏无法单击

导航栏后面的主要内容被遮盖

导航栏颜色改变

页面无法滚动

Q18:要实现一个元素在已定位的父容器内水平、垂直均居中，常用的方法是 ( )。

margin: auto;

position: relative; top: 50%; left: 50%;

position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);

float: center;

Q19:浮动布局相比Flexbox布局或Grid布局，在现代网页开发中的主要定位是 ( )。

主流的、首选的布局方案

已完全被淘汰的技术

主要用于维护遗留项目或简单的图文环绕

实现三维效果的核心技术

Q20:粘性定位（position:sticky;）要生效，必须设置 ( ) 属性。

z-index

至少一个方向（top/right/bottom/left）的阈值

display:table;

float:none;

Q21:下列关于清除浮动技术中伪元素法的描述，正确的是 ( )。

原理是为父元素添加一个看不见的块级元素并清除两侧浮动元素

会显著增加页面的HTML标签数量

代码不可复用，每个地方都需要重写

必须配合overflow属性使用

Q22:当一个元素设置为position:absolute;后，该元素对兄弟元素布局的影响是 ( )。

向左侧挤压兄弟元素

使其后的兄弟元素上移，占据它原来的空间

使其前的兄弟元素下移

对兄弟元素没有任何影响

Q23:使元素向左浮动的CSS3属性声明是float:____;。

填空1

Q24:清除浮动影响的CSS3属性是____。

填空1

Q25:使元素相对于浏览器视口进行定位的position属性值是____。

填空1

Q26:若要使一个position:absolute;的子元素能够相对于其父元素定位，通常需要为父元素设置position:____;。

填空1

Q27:控制已定位元素层叠顺序的CSS3属性是____。

填空1

Q28:浮动元素会完全脱离文档流，导致父元素高度塌陷，且所有后续内容都无法感知到它的存在。

正确

错误

Q29:position:relative;的元素在进行偏移后，其在文档流中原本占据的空间会被保留。

正确

错误

Q30:position:absolute;的元素默认是相对于body标签的左上角进行定位的。

正确

错误

Q31:z-index属性可以应用于任何HTML元素，无论其是否定位。

正确

错误

Q32:当使用float属性实现多栏布局时，各栏宽度的总和可以略微超过父容器的宽度。

正确

错误

Q33:浮动（float）

填空1

Q34:相对定位（position:relative;）

填空1

Q35:绝对定位（position:absolute;）

填空1

Q36:请简述浮动元素导致父容器高度塌陷的原因，并写出至少两种解决方法。

填空1

Q37:解释position:relative;和position:absolute;的主要区别，并举例说明各自的应用场景。

填空1

Q38:使用浮动技术实现一个包含header、左侧导航栏（宽度为200px）、主内容区和footer的三栏布局，要求左侧导航栏和主内容区并排显示，footer在最底部。

填空1

Q39:编写CSS3代码，使用position:relative;和position:absolute;相结合的方式，实现一个图片上方叠加文字说明的效果。

填空1