下列关于Flex布局的说法,错误的是 ( )。
Flex布局是一维布局模型
flex:1;等价于flex:1 1 auto;
justify-content控制子元素在交叉轴上的对齐方式
flex-wrap:wrap;属性值可以实现子元素自动换行
在Grid布局中,用于设置网格项目跨列的属性是 ( )。
grid-row
grid-column
grid-span
grid-col-span
在下列选项中, ( ) 属性值可以让背景图像从内边距外沿开始绘制。
background-origin: content-box;
background-origin: padding-box;
background-origin:border-box;
background-origin: margin-box;
要实现元素的垂直居中, ( ) 方法最适合现代布局。
使用 vertical-align:middle;
使用margin-top负值
使用Flex布局的align-items:center;
使用定位+transform
下列关于外边距合并的说法,正确的是 ( )。
水平相邻的块级元素会发生外边距合并
嵌套的父子块级元素一定不会发生外边距合并
外边距合并后取两个外边距的最大值
行内元素会发生外边距合并
在Flex布局中,用于控制子元素在交叉轴上对齐方式的属性是 ( )。
justify-content
align-items
align-self
justify-items
在下列选项中, ( ) 属性用于设置网格的行高。
grid-template-columns
grid-template-rows
grid-row-height
grid-row-size
要实现响应式卡片布局,当屏幕缩小时自动换行,最适合的方法是 ( )。
固定宽度+浮动布局
Grid布局+auto-fit+minmax
行内块布局+媒体查询
普通流布局+百分比宽度
下列关于overflow属性的说法,错误的是 ( )。
visible是默认值,内容会溢出容器
hidden会裁剪溢出内容,不显示滚动条
scroll会始终显示滚动条,无论内容是否溢出
auto会根据内容是否溢出自动显示滚动条,仅支持垂直方向
在下列选项中, ( ) 方法不能解决行内块元素之间的默认间隙。
父容器设置font-size:0;
删除HTML元素之间的换行和空格
子元素设置 margin-left:-3px;
父容器设置display:flex;
解决外边距合并问题的常用方法有添加边框、内边距或创建________。
border属性的复合写法顺序为________、________、________。
填空1 ____________
填空2 ____________
填空3 ____________
Flex布局的核心由________和________两部分组成。
填空1 ____________
填空2 ____________
元素的________属性用于控制背景图像的绘制起始位置。
负margin的常见用途是实现元素________效果或调整元素位置。
inline-block元素兼具块级元素和行内元素的特性。 ( )
外边距(margin)不会影响元素自身的尺寸,只会影响与其他元素的间距。 ( )
Grid布局是一种二维布局方式,可同时控制行和列的排列。 ( )
行内元素的padding属性在水平方向有效,垂直方向无效。 ( )
box-sizing属性的默认值是border-box。 ( )
详细说明box-sizing:border-box;属性值在实际开发中的优势及应用场景。
分析Flex布局和Grid布局的核心差异及各自的适用场景。
简述在响应式布局中,如何结合CSS3盒子模型和现代布局方式实现适配。
综合运用CSS3盒子模型和Grid布局实现一个商品列表页布局,要求如下。 (1)顶部导航栏采用Flex布局,两端对齐,包含logo和导航菜单。 (2)商品列表区采用Grid布局,列宽最小为280px,最大为1fr,卡片间距为20px。 (3)商品卡片包含图片(宽度为100%、高度为200px)、标题、价格和“加入购物车”按钮。 (4)卡片内边距为15px,添加圆角(8px)和阴影效果。 (5)底部版权区文本水平居中,上、下内边距为20px。
实现一个复杂的多模块页面布局,要求如下。 (1)页面包含顶部导航、面包屑导航、教学目标卡片、特色资源卡片4个模块。 (2)顶部导航采用Flex布局,横向排列,悬停效果为背景半透明。 (3)面包屑导航使用inline-block布局,分隔符为“〉”。 (4)教学目标卡片采用Flex布局,三列均匀分布,顶部有不同颜色的边框。 (5)特色资源卡片采用Grid布局,三列等宽,包含图标、列表和按钮。 (6)整体页面宽度最大为1200px,居中显示,各模块间距合理。