移动Web实训-flex布局测试题1

第一题

下列选项中对视口属性的作用描述不正确的是( 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属性将失效