在CSS3中， ( ) 属性值不能建立定位上下文。
position:relative;
position:fixed;
position:static;
position:sticky;
当使用Flexbox布局时， ( ) 属性用于控制子元素在交叉轴上的对齐方式。
justify-content
align-items
flex-direction
flex-wrap
下列哪种情况会导致z-index失效？ ( )
元素设置position:relative;
父元素设置z-index:0;
元素设置opacity:0.5;
元素设置float:left;
在Grid布局中， ( ) 属性用于定义网格列的宽度。
grid-template-rows
grid-template-columns
grid-column
grid-gap
下列哪种清除浮动的方法不会增加额外的HTML元素？ ( )
空div法
overflow:hidden;法
伪元素法
clear属性法
下列关于position:sticky;的说法，正确的是 ( )。
始终相对于视口定位
在滚动到阈值前表现为relative定位
不受父元素overflow属性影响
完全适配IE浏览器
在响应式布局中， ( ) 媒体查询表示屏幕宽度小于768px。
@media(min-width:768px;)
@media(max-width:768px;)
@media(width:768px;)
@media(min-device-width:768px;)
在下列选项中， ( ) 属性值可以创建一个BFC。
display:inline-block;
position:relative;
float:none;
margin:0 auto;
使用Grid布局实现一个三列等宽布局，正确的代码是 ( )。
grid-template-columns:1fr 1fr 1fr;
grid-template-columns:33% 33% 34%;
grid-template-columns:auto auto auto;
grid-template-columns:repeat(3, 100px);
关于Flexbox布局和Grid布局的区别，下列说法错误的是 ( )。
Flexbox布局是一维布局，Grid布局是二维布局
Flexbox布局用于组件内部布局，Grid布局用于整体页面布局
Flexbox布局和Grid布局不能混合使用
Grid布局是可以同时控制行和列的布局
在Grid布局中，____属性用于设置网格项占据的列数。
BFC的中文全称是____，它可以解决浮动元素导致的父容器高度塌陷问题。
在响应式设计中，____单位可以根据视口宽度自动调整元素大小。
使用____属性可以让flex容器的子元素自动填充剩余空间。
在CSS3中，____函数可以根据不同的屏幕尺寸返回不同的值，实现响应式布局。
Grid布局可以实现Flexbox布局的全部效果。
设置float属性的元素会自动转换为block元素。
position:sticky;的元素在达到滚动阈值后会变为position:fixed;。
比较Flexbox布局和Grid布局的适用场景，并举例说明何时选择Grid布局而非Flexbox布局。
综合布局实现。现有一个容器（.container)，其内部需包含：（1）一个标题（<h1>）和一段引言文本（<p>），它们应处于正常文档流；（2）三张产品图片（<img>），要求它们向左浮动，并在容器内横向等间距排列；（3）一个“固定”在页面顶部的导航栏（.fixed-nav)，其宽度为100%，高度为60px；（4）一个“关于我们”的弹窗（.popup)，要求其在浏览器视口中水平、垂直均居中显示。任务要求：编写HTML结构；编写CSS3实现三张图片的浮动排列；为浮动图片的父元素添加清除浮动（推荐伪元素法）；实现固定导航栏并为body设置合适的上边距；使用position:absolute;配合transform:translate(-50%,-50%);实现弹窗的居中。
模拟顶部导航栏“吸顶”效果。实现一个导航栏（.sticky-nav)，其默认状态为position:relative;。当页面滚动、导航栏的上边缘距浏览器视口顶部为0时，导航栏变为position:fixed;，形成“吸顶”效果。任务要求：（1）编写一个高度足够长的HTML页面，以确保可以发生滚动；（2）编写CSS3代码，为.sticky-nav设置position:sticky;和top:0;；（3）观察并描述在滚动过程中导航栏行为的变化（何时开始固定，固定后对后续文档流内容的影响）。
实现“返回顶部”按钮。创建一个“返回顶部”按钮（#backToTop)，要求其始终固定在浏览器视口的右下角。当滚动条向下滚动超过200px时，按钮淡入显示；单击该按钮时，页面平滑滚动至顶部。任务要求：（1）使用CSS3将#backToTop按钮设置为position:fixed;并放置于右下角（如bottom:20px;right:20px;）；（2）初始时设置按钮为隐藏（如opacity:0;display:none;）；（3）使用JavaScript监听页面滚动事件，当滚动距离（scrollTop）大于200px时显示按钮（淡入效果），小于200px时隐藏按钮；（4）为按钮绑定点击事件，单击后使用window.scrollTo({top:0,behavior:'smooth'})实现平滑滚动至顶部。