align-items是单行条件下决定侧轴的对齐方式，align-content是多行条件下决定侧轴的对齐方式，justify-content是设置主轴上元素的排列方式，flex-direction是

1.下列CSS选择器正确的是？ D 

A、.body .5（数字不能作为类名） B、.about body（body不能写在子代选择器中） C、title a（title不是标签） D、.about .body

解：这道题运用了CSS复合选择器的知识点。

交集选择器：

第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，如h3.special。（即h3和.special共有的属性）

找到的标签必须满足：既有标签一的特点，也有标签二的特点。

并集选择器：

如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为它们定义相同的CSS

样式。类似于和的意思，例如：.class,h3。(即.class有的属性，h3也有)

后代选择器：

后代选择器又称为包含选择器，用来选择元素或元素组的后代，其写法就是把外层标签写在前面，

内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。子孙

后代都可以这么选择。 或者说，它能选择任何包含在内 的标签。例如：.class h3 （即.class中所有的h3的标签都有此属性）

子元素选择器：

子元素选择器只能选择作为某元素子元素的元素。其写法就是把父级标签写在前面，子级标签写在

后面，中间跟一个 > 进行连接，注意，符号左右两侧各保留一个空格。例如：.class>h3。

（即.class这个父元素的所有子元素，不包括孙子代的元素所有的属性）

相邻选择器：

语法: 选择器1 + 选择器2 {属性:值; 属性: 值;}

是为了选择 选择器1后边的选择器2,例如：h3+p （即与h3标签相邻的p标签）

2.文本尺寸12px，下列哪些可以实现2倍行高？ ABCD 

A、line-height：2rem B、line-height：24px

C、line-height：2 （倍数） D、line-height：200%；

以上是行高的实现方式。

3.如何产生带有正方形项目的列表？D 错

A、list-type: square B、type: 2 C、type: square D、list-style-type: square

解：通过list-style-type可以设置无序列表的样式。

4.下列哪些样式值可以移动元素本身位置？ ACD 错

A、margin-left B、padding-left（撑大自己） C、left D、translatex

5.Flex布局中哪个是定义垂直居中？ AB

A、align-items B、align-content C、justify-content D、flex-direction

解：

align-items是单行条件下决定侧轴的对齐方式，当align-items：center时，在侧轴垂直居中。

align-content是多行条件下决定侧轴的对齐方式，当align-content：center时，在侧轴垂直居中。

justify-content是设置主轴上元素的排列方式，当justify-conten：center时，在主轴方向水平居中。

flex-direction是设置主轴的方向，默认值时x轴，当flex-direction：column时，设置的主轴方向为y轴。

6.根据下列代码.about的高是多少? B 

.about { maring: 0 auto; }
​
.about-img { float: left; height: 200px; }
​
.about-text { height: 100px; }
​
<div class=”about”>
​
        <div class=”about-img”></div>
​
    <div class=”about-text”></div>
​
</div>

A、0 B、100px C、200px D、300px;

解: .about-img浮动，所以脱离了标准流，他不能撑开父盒子.about的高度。.about-text在父盒子内，他撑开了父盒子.about的高度，所以父盒子的高度是100px。

7.阅读以下代码说明.box的DIV实际大小是多少？ C 

.box{
​
      box-sizing: content-box;
​
      width: 200px;
​
      height: 200px;
​
      padding: 20px;  上下左右四个方向
​
      background-color: green;
​
      border: 5px dotted red;  四个方向
​
    }
​
<div class="box"></div>

A、200px B、225px C、250px

解：

box-sizing: content-box 盒子大小为 width + padding + border content-box:此值为其默认值，其让元素维持W3C的标准Box Mode 

box-sizing: border-box 盒子大小为 width 就是说 padding 和 border 是包含到width里面的。

所以代码中的box大小是width+padding+border的值，因为各自四个方向都有padding和border的

值，所以box的大小是200px+20px+20px+5px+5px=250px.

8.有关CSS外边距margin说法错误的是 B 

A、围绕在元素边框的空白区域是外边距

B、margin设置为auto相当于设置为0   (auto是自动的意思不代表0)

C、设置外边距会在元素外创建额外的“空白”

D、设置外边距使用 margin 属性，可以接受任何长度单位、百分数值甚至负值。

9.关于标签，下列说法错误的是 B 错

A、<video>标签中controls属性决定是否向用户显示控件

B、<audio>与</audio>之间插入的内容是用来解释控件的  （不可以插入内容）

C、<datalist>标签可以和input标签配合进行使用，来显示列表

D、<progress>标签不填写max和value会自动滑动

10. C

 A、blue / red / blue / red / blue / orange

B、blue / red / blue / red / blue / blue

C、blue / red / blue / blue / red / blue

D、red / blue / blue / blue / blue / red

解：

.list>p:nth-child(even) img：这句话的意思是由p标签找到.list的是偶数的p儿子全部选中，所以代码

中第二个和第五个p被选中，颜色为蓝色。

.list>p:last-child img：这句话的意思是找到由p标签找到.list的最后一个儿子且是p标签的被选中，但是因为.list最后一个儿子不是p而是div，所以这句话无法找到满足条件的p，也因此不生效。

11.下列说法正确的有：AB 

A、visibility:hidden;所占据的空间位置仍然存在，仅为视觉上的完全透明；

B、display:none;不为被隐藏的对象保留其物理空间；

C、visibility:hidden;与display:none;两者没有本质上的区别；

D、visibility:hidden;产生reflow和repaint（回流（布局不改变）与重绘(布局发生改变)）

解：

visibility:hidden 隐藏后其所占的位置仍然存在

display:none 隐藏后其所占的位置不存在

12.阅读以下代码选择出正确答案 B 

 var num1=10;
​
 var num2='20'；
​
 var num3=num1+(num2>10)；
​
 console.log(num3);

A、1020  B、11  C、undefined  D、10true true用1表示

解：

num2 = ‘20’，num2>10输出结果为true，true用1表示，所以输出的num3的值为num1+1=11。

13.JavaScript是一种（ ）语言 C 

A．汇编语言 B．高级语言

C．脚本语言. (一行一行执行) D．近似语言