《网页设计与制作》模块04进阶

Q1:姓名

Q2:班级（4位数字）

Q3:下列关于Flex布局的说法，错误的是 ( )。

Q4:在Grid布局中，用于设置网格项目跨列的属性是 ( )。

Q5:在下列选项中， ( ) 属性值可以让背景图像从内边距外沿开始绘制。

Q6:要实现元素的垂直居中， ( ) 方法最适合现代布局。

Q7:下列关于外边距合并的说法，正确的是 ( )。

Q8:在Flex布局中，用于控制子元素在交叉轴上对齐方式的属性是 ( )。

Q9:在下列选项中， ( ) 属性用于设置网格的行高。

Q10:要实现响应式卡片布局，当屏幕缩小时自动换行，最适合的方法是 ( )。

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

Q12:在下列选项中， ( ) 方法不能解决行内块元素之间的默认间隙。

Q13:解决外边距合并问题的常用方法有添加边框、内边距或创建________。

Q14:border属性的复合写法顺序为________、________、________。

Q15:Flex布局的核心由________和________两部分组成。

Q16:元素的________属性用于控制背景图像的绘制起始位置。

Q17:负margin的常见用途是实现元素________效果或调整元素位置。

Q18:inline-block元素兼具块级元素和行内元素的特性。 ( )

Q19:外边距（margin）不会影响元素自身的尺寸，只会影响与其他元素的间距。 ( )

Q20:Grid布局是一种二维布局方式，可同时控制行和列的排列。 ( )

Q21:行内元素的padding属性在水平方向有效，垂直方向无效。 ( )

Q22:box-sizing属性的默认值是border-box。 （ ）

Q23:详细说明box-sizing:border-box；属性值在实际开发中的优势及应用场景。

Q24:分析Flex布局和Grid布局的核心差异及各自的适用场景。

Q25:简述在响应式布局中，如何结合CSS3盒子模型和现代布局方式实现适配。

Q26:综合运用CSS3盒子模型和Grid布局实现一个商品列表页布局，要求如下。（1）顶部导航栏采用Flex布局，两端对齐，包含logo和导航菜单。（2）商品列表区采用Grid布局，列宽最小为280px，最大为1fr，卡片间距为20px。（3）商品卡片包含图片（宽度为100％、高度为200px）、标题、价格和“加入购物车”按钮。（4）卡片内边距为15px，添加圆角（8px）和阴影效果。（5）底部版权区文本水平居中，上、下内边距为20px。

Q27:实现一个复杂的多模块页面布局，要求如下。（1）页面包含顶部导航、面包屑导航、教学目标卡片、特色资源卡片4个模块。（2）顶部导航采用Flex布局，横向排列，悬停效果为背景半透明。（3）面包屑导航使用inline-block布局，分隔符为“〉”。（4）教学目标卡片采用Flex布局，三列均匀分布，顶部有不同颜色的边框。（5）特色资源卡片采用Grid布局，三列等宽，包含图标、列表和按钮。（6）整体页面宽度最大为1200px，居中显示，各模块间距合理。