【HTML、CSS练习题3】

一、单选题（共30题，每题2分）

1.以下哪个选择器可以对HTML根元素进行选择（）
A 、:root
B 、:empty
C 、.html
D 、#html
正确答案: A

2.使用弹性盒属性flex后子元素如果是内联元素,那个属性设置不管用（）
A 、width:200px;
B 、height:200px;
C 、float:left;
D 、都会失效
正确答案: C

3.此标签< div style="color:red"id=“yellow”>< /div>在浏览器中会显示哪个颜色?（）
A 、黄色
B 、红色
C 、上红下黄
D 、上黄下红
正确答案: B

4.定义对象内第一行的样式的选择器是哪个（）
A 、::after
B 、::first-letter
C 、::first-line
D 、::before
正确答案: C

5.以下关于透明度写法不正确的:（）
A 、opacity:0;
B 、opacity:100;
C 、opacity: 0.5;
D 、opacity: .5;
正确答案: B

6.CSS3中rem单位是根据( )的font-size来定义大小的（）
A 、body
B 、html
C 、父元素
D 、绝对大小
正确答案: B

7.表格的表头是以下哪一个标签呢?（）
A 、< title>< /title>
B 、< td>< /td>
C 、< th>< /th>
D 、< tr>< /tr>
正确答案: C

8.UI 元素状态伪类选择器选择可用元素正确的写法是（）
A 、E:enabled
B 、E:disabled
C 、E:checked
D 、E:input
正确答案: A

9.flex-direction设置子元素纵向反转排列的属性是（）
A 、row
B 、row-reverse
C 、column
D 、column-reverse
正确答案: D

10.层级选择器相邻兄弟选择器的写法是（）
A 、E<F
B 、E+F
C 、E>F
D 、E~F
正确答案: B

11.CSS3结构性伪类选择器选择3的倍数（）
A 、X:only-child(3n)
B 、X:nth-last-child(3n)
C 、X:nth-child(3n)
D 、X:nth-child(3)
正确答案: C

12.CSS3属性选择器指定属性名,并指定了该属性的属性值正确的写法是（）
A 、a[title-“value”]
B 、a[title:“value”]
C 、a[title=“value”]
D 、a[title=value]
正确答案: C

13.video 标签中的静音属性是（）
A 、controls
B 、muted
C 、autoplay
D 、poster
正确答案: B

14.HTML5新增表单属性（）
A 、type="text
B 、type=“submit”
C 、type=“file”
D 、type=“email”
正确答案: D

15.不属于HTML5新增标签的是（）
A 、section
B 、col
C 、header
D 、footer
正确答案: B

16.CSS圆角属性是（）
A 、border-radius
B 、radius-border
C 、border-circle
D 、circle-radius
正确答案: A

17.下面不是video标签支持的视频格式（）
A 、mp4
B 、avi
C 、ogg
D 、webM
正确答案: B

18.设置过渡延迟时间的属性是哪个（）
A 、transition-property
B 、transition-duration
C 、transition-timing-function
D 、transition-delay
正确答案: D

19.下面选项中,线性渐变linear-gradient书写正确的是（）
A 、background-image:linear-gradient(360deg red ,yellow)
B 、background-image:linear-gradient(to 360deg red yellow)
C 、background-image:linear-gradient( to top,red yellow)
D 、background-image:linear-gradient( to top,red,yellow)
正确答案: D

20.以下选项中书写正确的是（）
A 、background-image:-webkit-linear-gradient(to top,red,yellow)
B 、webkit-background-image:linear-gradient(to top,red,yellow)
C 、background-image:-mos-linear-gradient(to top,red,yellow)
D 、mos-background-image:linear-gradient(to top,red,yellow)
正确答案: A

21.下面关于渐变的说法正确的是（）
A 、可以通过百分比控制颜色分布比例
B 、渐变的颜色不能超过4种
C 、因为渐变有平铺,所以不需要背景平铺
D 、如果使用渐变需要在背景属性的前面加浏览器前缀
正确答案: A

22.下面选项中哪一个代码效果是绕X轴旋转（）
A 、transform:rotate(30deg);
B 、transform:rotateX(30deg);
C 、transform:rotate(0,0,1,30deg);
D 、transform:rotate3d(0,0,1,30deg);
正确答案: B

23.下面写法正确的是（）
A 、transformX:200px;
B 、translateX:200px;
C 、transform:translatex:200px
D 、transform:translate(200px) ;
正确答案: D

24.3D动画中,元素沿着X、Z轴旋转90deg的方法（）
A 、transform: scale3d(0,1,0,90deg);
B 、transform: scale3d(1,0,1,90deg);
C 、transform: rotate3d(0,1,0,90deg);
D 、transform: rotate3d(1,0,1,90deg);
正确答案: D

25.以下哪个选项是指定嵌套元素在3d空间中呈现的（）
A 、transform-style: preserve-3d;
B 、transform-style: 3d-prespective;
C 、transform-style: prespective-3d;
D 、transform-style: 3d-preserve;
正确答案: A

26.默认情况下2D变形里面的旋转是绕哪个轴旋转的（）
A 、X轴
B 、Y轴
C 、没有任何规律
D 、绕着中心点顺时针或者逆时针旋转
正确答案: D

27.以下哪个不是transform属性的取值（）
A 、transition
B 、translate
C 、scale
D 、rotate
正确答案: A

28.下面定义动画关键帧语法正确的（）
A 、@-mos-keyframes myMove{ }
B 、@-webkit-keyframes myMove{ }
C 、-presto-keyframes myMove{ }
D 、-mo-keyframes myMove{ }
正确答案: B

29.下面关于动画的描述正确的是（）
A 、动画的帧与帧之间一定有过渡
B 、动画的帧与帧之间的过渡可以设置
C 、css3动画里面没有帧
D 、以上都不对
正确答案: B

30.动画是通过哪个属性来定义的（）
A 、media
B 、animation
C 、fontface
D 、keyframes
正确答案: D

二、多选题(不定项选择)（共20题，每题2分）

1.怪异盒模型的总宽高不包括（）
A 、padding
B 、border
C 、content
D 、margin
正确答案: D

2.以下哪种方式用来自定义动画关键帧（）
A 、@font-face
B 、@keyframes
C 、@media
D 、@charset
正确答案: B

3.使用transform的哪个属性可以实现关于元素居中的问题（）
A 、translate
B 、scale
C 、rotate
D 、skew
正确答案: A

4.box-sizing的可选属性值有哪些（）
A 、border-box
B 、content-box
C 、padding-box
D 、margin-box
正确答案: A,B

5.实现背景原点在padding区域,背景在border区域可见,正确设置为（）
A 、background-origin:padding-box; background-clip:border-box;
B 、background-origin:border-box; background-clip:content-box;
C 、background-origin:padding-box; background-clip:padding-box;
D 、background-origin:content-box; background-clip:border-box;
正确答案: A

6…当给父元素设置了display:flex;后,子元素的哪些属性会失效（）
A 、float
B 、clear
C 、vertical-align
D 、text-align
正确答案: A,B,C

7.定义子元素在3D空间中呈现的属性（）
A 、transform-style:preserve-3d;
B 、transform-style:flat;
C 、transform-style:flat-3d;
D 、transform-origin:center;
正确答案: A

8.以下对background-size属性值描述正确的是（）
A 、background-size:cover; 背景图会超出容器,背景不会发生变形
B 、background-size:contain; 背景图会超出容器,背景不会发生变形
C 、background-size:100% 100%; 背景图会发生变形,背景图不会超出容器
D 、background-size:100%; 背景图不会超出容器,不会变形
正确答案: A,C

9.input哪种类型可以定义滑块控件（）
A 、search
B 、controls
C 、slider
D 、range
正确答案: D

10.justify-content可选属性值有哪些（）
A 、flex-start
B 、flex-end
C 、center
D 、space-between
E 、space-around
正确答案: A,B,C,D,E

11.在html中,以下关于css样式中文本属性的说法,正确的是（）
A 、font-size用来设置文本字体的大小
B 、font-family用来设置文本字体的类型
C 、font-color 用来设置文本字体的颜色
D 、text-align 用来设置文本的水平对齐方式
正确答案: A,B,D

12.背景在content区域可见,背景原点的定位区域是border部分,以下写法正确的是（）
A 、background-clip:content-box; background-origin:border-box;
B 、background-clip:text; background-origin:content-box;
C 、background-clip:padding-box; background-origin:content-box;
正确答案: A

13.css3背景属性background-size的哪个值既不会被裁切也不会变形（）
A 、cover
B 、contain
C 、100% auto
D 、100% 100%
正确答案: B

14.以下代码 < div class=“a”>< /div> < div class=“b”>< /div> 其中css中定义如下 .a{width: 200px;height: 200px;background-color: #f00;float: left;} .b{width: 300px;height: 300px;background-color: #ff0;overflow: hidden;}
A 、两个盒子会发生重叠
B 、元素a在元素b上方
C 、两个元素不会重叠
D 、两个元素将左右排列
正确答案: C,D

15.清除浮动的方法有（）
A 、父元素添加margin
B 、父元素添加overflow:hidden
C 、父元素加position:relative
D 、父元素添加padding
正确答案: B

16.关于BFC的规则的说法正确的是（）
A 、子元素不会影响到外面的元素
B 、BFC计算高度时,浮动元素也参与计算
C 、BFC的区域与浮动区域重合
D 、以上说法都对
正确答案: A,B

17.以下能使表格实现偶数列变色的是（）
A 、tr:nth-child(2n){ }
B 、tr:nth-child(2n+1){ }
C 、tr:nth-child(even){ }
D 、tr:nth-child(odd){ }
正确答案: A,C

18.以下属于表格行分组的是（）
A 、colgroup
B 、thead
C 、tbody
D 、tfoot
正确答案: B,C,D

19.以下不是伪元素选择符的选项是（）
A 、::after
B 、:hover
C 、:focus
D 、:link
正确答案: B,C,D

20.css3中transform的可选属性值有哪些?（）
A 、transition
B 、rotate
C 、translate
D 、scale
正确答案: B,C,D