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

Q1:姓名

填空1

Q2:班级（4位数字）

填空1

Q3:对于一个设置了float:left;的元素，下列说法正确的是 ( )。

该元素会立即转换为行内元素（inline)，并占据行高

该元素的display属性会变为block，即使原来不是block

该元素会完全“消失”，不占据任何视觉空间

只有设置了宽高的元素才能进行浮动

Q4:在下列选项中，能最准确描述浮动对后续元素影响的是 ( )。

浮动元素完全脱离文档流，后续的所有元素（包括文本）都会忽略其存在

浮动元素部分脱离文档流，后续的块级元素会忽略其位置，但内联内容（如文本）会环绕

浮动元素不脱离文档流，只是移动到新的位置

浮动元素会强制父元素改变其display类型

Q5:在使用.clearfix::after {content:;display:block;clear:both;}方法清除浮动时，这个::after伪元素应该被添加到 ( ) 上。

第一个浮动元素

最后一个浮动元素

所有受到浮动影响的兄弟元素

浮动元素的父容器

Q6:关于position:absolute;的定位基准，下列结论正确的是 ( )。

总是相对于浏览器视口（viewport）的左上角

总是相对于其父元素的左上角，无论父元素是什么定位

相对于最近一个设置position属性且值不是static的祖先元素的边框边缘

相对于自身原本在文档流中的位置

Q7:下列哪种情况可能导致z-index属性不生效？ ( )

元素的position值为static

元素的opacity值小于1

元素使用了transform属性

元素的display值为inline-block

Q8:当一个position:fixed;的固定导航栏遮盖了页面主要内容时，最常见的修复方法是为主要内容区域设置 ( ) 。

display:flex;

z-index值大于导航栏

padding-top或margin-top

position: relative;

Q9:使用float属性实现传统多栏布局的主要缺点是 ( ) 。

无法实现元素居中

代码过于复杂，难以书写

容易引发父元素高度塌陷和布局错乱，需要额外的代码清除浮动

在所有浏览器中都不支持

Q10:在现代CSS3布局中，更推荐使用 ( ) 技术来替代浮动技术，以解决多栏布局和复杂的空间分布等问题。

更多嵌套的div和margin、padding

更复杂的position绝对定位计算

Flexbox布局和Grid布局

inline-block和vertical-align组合

Q11:若需让元素在父容器（假设父容器已设置position:relative;）中实现水平、垂直均居中，常用的方法是为该元素设置 ( ) 。

position: absolute; margin: auto;

position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto;

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

以上方法都可行，但情境和效果略有不同

Q12:下列关于position:sticky;的说法，错误的是 ( ) 。

它必须配合至少一个方向（如top、left）的阈值使用才能生效

在未达到滚动阈值前，其表现类似于position:relative；

它完全脱离文档流，从设置开始就固定不动

其父容器的overflow属性可能会影响效果

Q13:为了解决浮动导致的父元素高度塌陷问题，一种常用且推荐的技术是为父元素添加::after伪元素并设置____:both;属性。

填空1

Q14:当多个同级元素都设置float:left;时，它们从左向右、从上向下依次排列，直到遇到父容器边框或另一个浮动元素的边框。这种行为可以用来制作____或图片墙。

填空1

Q15:position:absolute;元素要实现在其父容器内的定位，需要为父容器设置position:____;来建立定位上下文。

填空1

Q16:模态对话框（modal）通常使用position:____;使其覆盖在整个页面上方，并配合z-index来控制其层级。

填空1

Q17:在现代CSS3布局方案中，display:flex;主要用于控制____维度的布局，而display:grid;则是强大的____维布局系统。

填空1

填空2

Q18:float属性和position:absolute;一样，会让元素完全脱离文档流，原有的空间被后续元素完全占据。

正确

错误

Q19:z-index属性可以对所有元素生效，用来控制它们在页面上的前后顺序。

正确

错误

Q20:可以通过同时为元素设置top:50%;和bottom:50%;的方式来实现垂直居中。

正确

错误

Q21:position:sticky;是position:fixed;的简单替代，在IE浏览器中能完美适配。

正确

错误

Q22:清除浮动的主要目的是让浮动元素的父容器可以正确包含其浮动子元素，恢复其应有的高度。

正确

错误

Q23:说明在复杂布局中如何结合使用浮动技术和定位技术，并举例说明可能遇到的冲突及对应的解决方案。

填空1

Q24:比较Flexbox布局与传统浮动布局在实现多栏等高布局时的优点及缺点。

填空1

Q25:请使用HTML和CSS3，模拟实现一个简单的模态对话框（modal）。具体需求：（1）模态框应覆盖整个浏览器视口，背景为半透明的黑色遮罩[如rgba(0,0,0,0.5)]；（2）对话框内容应在屏幕中水平、垂直均居中，对话框宽度为400px，高度自适应内容，白色背景，有内边距和圆角效果；（3）使用合适的定位技术，确保页面滚动时模态对话框始终保持在屏幕中央；（4）在代码中体现定位上下文的管理，以及对层叠顺序（z-index）的控制。

填空1