学习通CSS3页面布局

1【单选题】

在CSS中，为页面中的某个DIV标签设置样式div{width:200px;padding:0  20px;border:5px；}，则该标签的实际宽度为（ ）

• A、

  200px

• B、

  220px

• C、

  240px

• D、

  250px

我的答案：D

2【单选题】

下列设置“上边距：20px、下边距：30px、左边距：40px、右边距：50px”边距属性正确的是（   ）。

• A、

  margin:20px 30px 40px 50px

• B、

  border: 20px 30px 40px 50px

• C、

  margin:20px 50px 30px 40px

• D、

  margin-top:20px 30px 40px 50px

我的答案：C

3【单选题】

将一个盒子的上边框定义为1像素、蓝色、单实线，下列代码正确的是（ ）。

• A、

  border-top：1px solid #00f;

• B、

  border：1px solid #00f;

• C、

  border-top：1px dashed #00f;

• D、

  border：1px dashed #00f;

我的答案：A

4【多选题】

下列关于网页布局方式描述正确的是（）

• A、

  网页布局主要分为固定式布局、流式布局、响应式布局三种形式的布局方式

• B、

  固定式布局是指利用固定的大小宽度去布局网页的尺寸

• C、

  流式网页布局可以根据浏览器的宽度和屏幕的大小自动调整效果

• D、

  响应式网页布局是一种糅合了流式布局，再搭配媒体查询技术使用的网页布局方式

我的答案：ABCD

5【多选题】

在CSS中，下列选项（ ）属于BOX模型的属性。

• A、

  font

• B、

  margin

• C、

  border

• D、

  visible

我的答案：BC

6【多选题】

下列关于border的具体的参数设置描述正确的是（）。

• A、

   可以一次只设置一个属性（如top），也可以按“上à右à下à左”的顺序一起设置，各个属性取值之间用空格分隔

• B、

  当边框宽度有3个参数时，将按“上à左+右à下”的顺序作用到边框上

• C、

  当边框宽度有2个参数时，将按“上+下à左+右”的顺序作用到边框上

• D、

  当边框宽度有1个参数时，四个方向的边框宽度取值相同

我的答案：ABCD

7【判断题】

CSS盒模型是指在页面布局中，为了将页面元素合理有效地组织在一起，形成的一套完整、行之有效的原则和规范。

我的答案：√

8【判断题】

CSS盒主要是由margin（外边距）、border（边框）、padding（内边距）和content（内容）四个部分组成，此外，还有高度和宽度两个辅助属性。

我的答案：√

9【判断题】

内容区拥有width、height和overflow三个属性，其中overflow属性用来指定溢出内容的处理方式，属性取值主要有visible、hidden、scroll、auto四种

我的答案：√

10【判断题】

border（边框）是指围绕元素的内容和内边距的一条或多条线，拥有多种属性。可以利用这些属性分别对top（顶部）、right（右边）、bottom （底部）、left（左边）进行设置

我的答案：√

1【单选题】

在CSS中，可以通过float属性为元素设置浮动，以下选项中不属于float属性值的是（  ）。

• A、

  left

• B、

  center

• C、

  right

• D、

  none

我的答案：B

2【单选题】

在CSS中，如果要清除浮动层对文本的影响，下列说法正确的是（  ）。

• A、

  为浮动层增加clear属性，并设置其属性为both

• B、

  为浮动层增加clear属性，并设置其属性为none

• C、

  为放置文本的标签增加clear属性，并设置其属性为none

• D、

  为放置文本的标签增加clear属性，并设置其属性为both

我的答案：D

3【单选题】

CSS中position:fixed表示（  ）。

• A、

  相对于浏览器窗口进行定位

• B、

  相对于它在原文档流的位置进行定位

• C、

  相对于其上一个已经定位的父元素进行定位

• D、

  相对于父元素进行定位

我的答案：A

4【单选题】

使用float或position属性布局两栏或多栏内容时，会因为内容高度不同而使得底部很难对齐，CSS3中（  ）可以解决这个问题。

• A、

  columns

• B、

  columns-gap

• C、

   columns-rule

• D、

  columns-span

我的答案：A

5【多选题】

下列关于元素定位描述正确的是（  ）。

• A、

  元素定位主要是通过CSS定位实现网页元素的精确定位。元素的定位属性主要包括定位模式和边偏移两部分

• B、

  相对定位是将元素相对于它在标准文档流中的位置按指定偏移移动到新位置，移动后元素形状不变，原本位置所占空间也继续保留

• C、

  绝对定位是将元素依据最近的已经定位的父元素进行定位，若所有父元素都没有定位，依据body根元素（浏览器窗口）进行定位 ，移动后元素形状不变，原本位置所占空间不保留

• D、

  固定定位，其本质是绝对定位的一种特殊形式，它以浏览器窗口作为参照物来定义网页元素

我的答案：ABCD

6【判断题】

在CSS当中有三种基本的定位机制：普通流、浮动和绝对定位。其中普通流是默认的一种定位机制,浮动流和绝对定位分别通过float属性和position属性来定位。

我的答案：√

7【判断题】

元素定位主要就是通过CSS定位实现网页元素的精确定位。元素的定位属性主要包括定位模式和边偏两部分。

我的答案：√

8【判断题】

相对定位是将元素相对于它在标准文档流中的位置按指定偏移移动到新位置，移动后元素形状不变，原本位置所占空间也继续保留。

我的答案：√

9【判断题】

固定定位是将元素依据最近的已经定位的父元素进行定位，若所有父元素都没有定位，则依据body根元素（浏览器窗口）进行定位。移动后元素形状不变，原本位置所占空间不保留。

我的答案：×

10【判断题】

CSS3 弹性盒是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

我的答案：√

1【单选题】

采用DIV+CSS设计页面布局的优势不包括（    ）。

• A、

  减少页面冗余代码

• B、

  更容易修改和维护

• C、

  容易被搜索引擎收录

• D、

  可以轻松控制页面布局

我的答案：B

2【单选题】

下列（     ）不属于常见的页面布局的方式。

• A、

   流式布局

• B、

   固定布局

• C、

  静态布局

• D、

  弹性布局

我的答案：C

3【单选题】

在CSS中，为页面中的某个DIV标签设置样式div{width:200px;padding:0 20px; border:5px;}，则该标签的实际宽度为（    ）。

• A、

  200px

• B、

    220px

• C、

  240px

• D、

   250px

我的答案：D

4【单选题】

如果要使多个DIV并列排列，应使用（      ）。

• A、

  margin

• B、

   float

• C、

  content

• D、

  cle

我的答案：B

5【多选题】

下面情况下，哪些会发生margin属性的叠加（　　）。

• A、

  元素的顶边界与前面元素的底边界发生叠加

• B、

  元素的顶边界于父元素的顶边界发生叠加

• C、

    元素的顶边界于底边界发生叠加

• D、

  空元素中已经叠加的边界与另一个空元素的边界发生叠加。

我的答案：ABCD

6【多选题】

关于下列代码片段分析正确的是（　　）。

    <style type=”text/css”>

       a {display:inline-block;

            width:100px;

           height:30px;

           border:1px solid red;

          }

    </style>

• A、

  以上代码用于超链接标签的样式

• B、

   超链接将以块状方式显示

• C、

  超链接的宽度为100px,高度为30px

• D、

  超链接在同一行显示。

我的答案：ABD

7【判断题】

一个大div块里包含一个小的div，设置小的div与大div的左边距5px样式的标准写法是margin-left:5px。

我的答案：×

8【判断题】

定义盒模型的外间距时不能取负值。

我的答案：×

9【判断题】

nav标签通常代表网页中的导航区块。

我的答案：√

10【判断题】

div标签显示时将独占一行。

我的答案：√

1【单选题】

关于CSS3中的columns属性，下列说法正确的是（    ）。

• A、

  用于返回单元格的列号

• B、

   仅指定多列布局的列宽度

• C、

  仅指定多列布局的列数

• D、

  指定多列布局的列宽度和列数

我的答案：D

2【单选题】

样式代码div{columns-gap:10px}的含义是（     ）。

• A、

  多列布局的列宽度为10px

• B、

  多列布局的列间距为10px

• C、

  列间隔线宽为10px

• D、

  以上都不对

我的答案：B

3【单选题】

若父元素宽度为400px，列间距为20px，则样式代码div{columns:auto 4}设置的列宽度为（     ）。

• A、

  100px

• B、

  340px

• C、

  85px

• D、

  80px

我的答案：C

4【单选题】

在多列布局中，column-count属性用于设置列数，关于它的属性取值，下列说法正确的是（      ）。

• A、

  可取为auto

• B、

  可取0

• C、

  可取负值

• D、

  可取任意值

我的答案：A

5【多选题】

下列属性中，哪些属于多列设置的属性(　　）。

• A、

  column-rule-width

• B、

  column-count

• C、

  column-span

• D、

  column-rule-style

我的答案：ABCD

6【判断题】

多列布局设置列宽40px，列数为2，若浏览器宽度小于80px，则显示时缩减宽度，仍显示2列。

我的答案：×

7【判断题】

目前，并不是所有浏览器都支持多列布局的columns-span属性。

我的答案：√

8【判断题】

在多列布局设置中“column-gap: normal”规定列间距为一个常规的间隔，W3C建议的值是1px。

我的答案：×

9【判断题】

在多列布局设置中如果没有设置columns-rule属性，则默认其属性取值为：medium none black。

我的答案：√

10【判断题】

在多列布局设置中“ columns-span:all”规定横跨所有列。

我的答案：√

1【单选题】

若将弹性盒中的子元素按序正向从左到右横排，下列样式代码正确的是（      ）。

• A、

  flex-direction: row

• B、

  flex-direction: row-reverse

• C、

   flex-direction: column

• D、

  flex-direction: column-reverse

我的答案：A

2【单选题】

弹性子元素的样式代码“ justify-content: space-between”的含义是（    ）。

• A、

  子元素位于容器的中心

• B、

  子元素位于各行之间留有空隙的容器内

• C、

  子元素位于各行之前、之间、之后都留有空白的容器内

• D、

  子元素位于容器的开头

我的答案：B

3【单选题】

若设置弹性盒中子元素纵向的对齐方式，应选择（     ）属性。

• A、

  align-content

• B、

  align-self

• C、

  align-items

• D、

   justify-content

我的答案：C

4【单选题】

若父元素的宽度为800px，三个子元素的总宽度是400px,三个元素的flex属性分别设置如下

    元素1为“flex:1  1  100px;”

    元素2为“flex:2  0  200px;”

    元素3为“flex:1  1  100px;”

    则元素1显示的宽度为（    ）。

• A、

  100px

• B、

  200px

• C、

  300px

• D、

  400px

我的答案：B

5【多选题】

弹性盒子分为（      )布局形式。

• A、

  横向

• B、

  纵向

• C、

  前向

• D、

  后向

我的答案：AB

6【判断题】

定义某个选择器为弹性盒子的属性为flex。

我的答案：×

7【判断题】

子元素的属性“flex-wrap”默认值为nowrap。

我的答案：√

8【判断题】

order属性用于定义弹性盒子元素的排列顺序。

我的答案：√

9【判断题】

弹性盒子元素的flex属性设置为“flex :1 1 100px“代表该元素的宽度为100px，且不会因父元素宽度的变化而变化。

我的答案：×

10【判断题】

一旦将 display 属性设置为 flex ，无序列表中的每个列表项将自动变为从左到右横向排列。（

我的答案：√

1【单选题】

若将网页元素变成灰色，下列样式代码正确的是（      ）。

• A、

   filter: sepia（1）

• B、

  filter: grayscale(0.5) 

• C、

  filter: invert(0.5)

• D、

  filter: blur(0.5)

我的答案：A

2【单选题】

若想调整网页元素的对比度，下列样式代码正确的是（       ）。

• A、

  filter: brightness(0.5)

• B、

  filter: saturate(2)

• C、

  filter:contrast(2)

• D、

  filter:opacity(0.5)

我的答案：C

3【单选题】

若对网页元素进行缩放变换，可以采用（     ）属性进行恰当的设置来实现。

• A、

  transition

• B、

   filter

• C、

   background

• D、

   transform

我的答案：D

4【单选题】

在下列函数中，可将网页元素做旋转变换的是（      ）。

• A、

  translate（）

• B、

   rotate()

• C、

  scale()

• D、

  skew()

我的答案：B

5【多选题】

下列属性取值中，可作为过渡属性的速度类型设置的是（        )。

• A、

  skew

• B、

   linear

• C、

   ellipse

• D、

  ease

我的答案：BD

6【判断题】

filter: opacity(2)可实现网页元素的透明效果。

我的答案：×

7【判断题】

子元素的属性“flex-wrap”默认值为nowrap

我的答案：√

8【判断题】

order属性用于定义弹性盒子元素的排列顺序。

我的答案：√

9【判断题】

弹性盒子元素的flex属性设置为“flex :1 1 100px“代表该元素的宽度为100px，且不会因父元素宽度的变化而变化。

我的答案：×

10【判断题】

一旦将 display 属性设置为 flex ，无序列表中的每个列表项将自动变为从左到右横向排列。

我的答案：√