第一题
下列选项中对视口属性的作用描述不正确的是( D )
A: width=device-width:设置视口的宽度和当前设备的宽度一致
B: maximum-scale=1.0:允许用户缩放的最大比例为1.0
C: initial-scale=1.0:设置视口的默认缩放比例为1.0
D: user-scalable=yes:不允许用户自行缩放
解析:
content="width=device-width
表示 页面的可视区域的宽度是设备宽度(逻辑像素宽度)
initial-scale=1.0
表示分辨率的缩放比,1.0 == 100%,不缩放*
initial-scale
初始缩放。即页面初始缩放程度。这是一个浮点值,是页面大小的一个乘数。例如,如果你设置初始缩放为“1.0”,那么,web页面在展现的时候就会以target
density分辨率的1:1来展现。如果你设置为“2.0”,那么这个页面就会放大为2倍。
maximum-scale
最大缩放。即允许的最大缩放程度。这也是一个浮点值,用以指出页面大小与屏幕大小相比的最大乘数。例如,如果你将这个值设置为“2.0”,那么这个页面与target
size相比,最多能放大2倍。
user-scalable
用户调整缩放。即用户是否能改变页面缩放程度。如果设置为yes则是允许用户对其进行改变,反之为no。默认值是yes。如果你将其设置为no,那么minimum-scale
和maximum-scale
都将被忽略,因为根本不可能缩放。
所有的缩放值都必须在0.01–10的范围之内。
第二题
关于flex布局主轴描述错误的是( D )
A: flex布局默认的主轴是X轴
B: flex-direction取值为row,可以将主轴设置为X轴
C: flex-direction取值为column,可以将主轴设置为Y轴
D: flex-direction默认取值是column
解析:
flex布局默认是横向排列,即: flex-direction默认取值是
row
第三题
如何将flex布局的主轴设置为Y轴( A )
A: flex-direction:column;
B: flex-direction:row;
C: flex-direction: row- reverse;
D: flex-direction:column- reverse;
解析:
修改主轴方向为垂直方向 :
flex-direction: column;
第四题
align-content如何实现侧轴方向子元素平分剩余空间排列( C )
A: align-content:center;
B: align-content:flex-start;
C: align-content:space-around;
D: align-content:flex-end;
解析:
详情请点击:
flex布局中的align-content属性
第五题
align-items和align-content的区别描述错误的是( C )
A: 单行设置用 align-items
B: 多行设置用 align-content
C: 两者没有区别,用谁都可以
D: 使用的时候需要看是单行还是多行,使用场景不一样
解析:
最明显的区别是
align-content
适用于多行,align-items
则是适用于单行。align-content(单行无效)可以设置上对齐、下对齐、居中、拉伸、平分剩余空间;align-items上对齐、下对齐、居中、拉伸。
第六题
下列有关flex布局的相关属性描述错误的是( D )
A: flex-direction属性可以控制弹性盒子中子元素的布局方向
B: justify-content属性可以控制主轴对齐方式
C: align-self属性可以控制单个子元素侧轴对齐方式
D: align-items属性可以控制多行侧轴对齐方式
解析:
align-content
适用于多行,align-item
则是适用于单行。
第七题
使用CSS的flexbox布局,不能实现以下哪一个效果( D )
A: 多列布局,随容器宽度等宽弹性伸缩
B: 多列布局,平均分配宽度
C: 多列布局,左列宽度像素数确定,中、右列随容器宽度等宽弹性伸缩
D: 多列布局, 不占有位置
解析:
不能实现:实现多个宽高不等的元素,且实现无缝瀑布流布局
不占位置(脱标),但flex布局是不脱标的
第八题
伸缩布局中,以下不属于flex-direction的属性值的是( A )
A: flex-start
B: row
C: row-reverse
D: column
解析:
第九题
父元素设置为 flex布局时,子元素的宽度和高度会( C )
A: 宽度和高度不变
B: 宽度变为100% ,高度由内容撑开
C: 宽度由内容撑开,高度变为 100%
D: 宽度和高度都变为 100%
解析:
父元素为flex布局时: 没有设置高度的子元素与父元素高度一致。
1,如果父元素设置固定高度,则子元素中没有设置高度的元素将继承父元素的高度;但是如果父元素的align-items设置以后那么子元素的高度则会有自身内容决定
2,如果父元素没有设置高度,其高度由最高的子元素决定。 代码中可以将.father的高度注释一下对比。
第十题
下面关于Flex布局原理描述错误的是(D )
A: 给父级盒子添加flex属性(display:flex;),来控制子盒子的位置和排列方式
B: 开启了flex布局的父级盒子我们称之为容器,子级盒子我们成为项目
C: 父盒子设为 flex 布局以后,子元素的 float、clear 和 vertical-align 属性将失效
D: 父盒子设为 flex 布局以后,子元素的 float、clear 和 vertical-align 属性都会生效
解析:
当我们为父盒子设置为flex布局以后,子元素的float、clear、vertical-align属性将失效