HTML、CSS基础题、练习题、面试题三

1.两个上下排列的div元素。上面的div设置margin-bottom:130px;下面的div设置margin-top:50px; 那么这两个之间的间距为（）
A 180px
B 130px
C 50px
D 80px
正确答案: B
解析:
bfc排版逻辑规定。同属一个bfc里面的两个相邻的子元素上下之间的margin值会按照最大值去设置

2.将鼠标样式为手型的属性是（ ）
A crosshair
B hand
C pointer
D move
正确答案: C
解析:
Cursor : pointer
pointer为兼容性属性值。hand属性值在高版本浏览器中是不解析的

3.图片间隙bug的解决方法是？（ ）
A 为img设置准确的宽高
B 为父元素添加overflow:hidden
C 父元素添加float:left;
D 为img 设置display : block;
正确答案: D
解析:
img标签的问题：在图片的默认情况下，img和文本一样，会在下方产生大约3像素的间距。这样把图片转成块状元素能解决此问题

4.以下哪些元素默认不带有边框: （ ）
A fieldset
B table
C input
D 都不带边框
正确答案: B
解析:
html元素中，有默认边框的是fieldset，input，textarea，select，iframe等

5.设置弹性子元素缩小比例的属性是？（ ）
A flex-small
B flex-big
C flex-shrink
D flex-grow
正确答案: C
解析:
flex-small：无此属性，flex-big：无此属性，flex-shrink：弹性子元素缩小比例，flex-grow：子元素所占剩余空间比例

6.以下对order属性描述正确的是？（ ）
A 数值越小，排列越靠前
B 数值越大，排列越靠前
C order可以改变HTML结构顺序
D 以上描述都不正确
正确答案: A
解析:
数值越小，排列越靠前

7.align-items设置弹性盒子元素在侧轴居中属性值是？（ ）
A stretch
B flex-end
C center
D flex-start
正确答案: C
解析:
stretch侧轴中拉伸，flex-end弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界，center弹性盒子元素在该行的侧轴（纵轴）上居中放置，flex-start弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界

8.flex-direction设置子元素横向排列的属性是（ ）
A row
B row-rerse
C column
D column-reverse
正确答案: A
解析:
row横向排列，row-reverse横向翻转，column纵向排列，column-reverse纵向排列翻转

9.rgba 颜色模式中的a表示什么？（ ）
A a表示色调
B a表示饱和度
C a表示亮度
D a表示透明度
正确答案: D
解析:
a表示透明度

10.不属于Background-clip的属性值是？（ ）
A border-box
B padding-box
C content-box
D margin-box
正确答案: D
解析:
margin-box
background-clip 属性规定背景的绘制区域

11.盒子的阴影属性？（ ）
A text-shadow
B box-shadow
C shadow-box
D shadow-text
正确答案: B
解析:
box-shadow

12.从网页优化的角度上说，img标签必不可少的属性是（）
A alt
B tiltle
C src
D 以上都是
正确答案: A
解析:
注意是网页优化的角度

13.单元格标题是（）
A
B
C
D
正确答案: C

CSS是利用XHTML标签（ ）构建网页布局？
A
_B

C

D 

正确答案: B

解析:

div常用的布局标签

15.IE浏览器使用的内核是什么？（ ）
A Trident
B Gecko
C Presto
D Webkit
正确答案: A

16.关于表格的数据分组标签,说法正确的是 ( )？
A 分别表示表头，表格数据主体，表格尾部
B 必须包含表头标签
C 和标签只能包含一行数据
D 由行组成，所以一般不包含标签
正确答案: A

17.以下属性写法不正确的有: （ ）？
A padding：-10px；
B padding:10px；
C margin:10px
D margin:-10px；
正确答案: A
padding没有负值
18.下面的描述正确的是( )？
A menu是标签选择器
B menu是元素选择器
C menu是类选择器
D menu是ID选择器
正确答案: D

19.在HTML中，下面( )不属于HTML文档的基本组成部分？
A
B
C
D
正确答案: D

20.以下关于HTML当中常用的基本标签说法正确的是
A HTML共提供了６级标题，

字号最小，

字号最大
B 段落标签

中可以包含多行文字，文字内容将随浏览器窗口大小自动换行
C 水平线标签
的作用是为了让版面更加清晰直观
D 标签……的作用是使字体加粗并斜体显示
正确答案: B
解析:
HTML共提供了６级标题，

字号最大，

字号最小
水平线标签为

---

标签……的作用是使字体斜体并不能加粗

21.下列哪个属性是表格里合并单元格的间距属性
A cellspacing
B cellpadding
C rowspan
D colspan
正确答案: A
解析:
cellspacing单元格与单元格之间的间距
cellpadding 单元格与内容之间的间隙
rowspan 合并单元格行数
colspan 合并单元格列数

22.在HTML中，在网页中创建表单用
A input
B select
C table
D form
正确答案: D
解析:
form表单域
input,select为表单元素
table为表格标签

23.在HTML中引入css内部样式表使用
A style
B p
C link
D strong
正确答案: A
解析:
内部样式表的语法

24.下列css属性中,用于指定背景图片的是
A background-color
B background-image
C background-position
D background-repeat
正确答案: B
解析:
background-color 设置背景色属性，
background-image添加背景图属性，
background-position 设置背景图位置属性，
background-repeat 设置平铺属性。顾选择B

25.以下关于HTML中段落标签的说法错误的是
A 段落标签

可以成对出现，也可以单独出现在页面中。
B 一个段落中可以包含一行文字
C 一个段落中可以包含多行文字
D 如果一个段落中包含多行文字，文字内容将随浏览器窗口的大小自动换行
正确答案: A
解析:
p标签为常规标记，必须成对出现

26.在网页中有一个id为content的div，设置它的宽度为200像素，高度为100像素，并且向左浮动， 以下选项正确的是？
A #content{width:200px;height:100px;float:left;}
B #content{width:100px;height:200px;clear:left;}
C #content{width:200px;height:100;clear:left;}
D #content{width:100px;height:200px;float:left;}
正确答案: A
解析:
id的语法为#，宽度width高度height浮动float

27.关于背景图和img的说法正确的是
A 背景图和img一样，都是在网页中占空间的
B 背景图的显示需要根据其所在元素的区域显示
C 背景图和img都属于对页面样式的渲染
D img标签在页面中和背景图都是不占据空间的
正确答案: B
解析:
背景图属于css样式、img属于html结构。

28.在HTML中，将表单中input元素的TYPE属性值设置为什么，用于创建重置按钮
A set
B reset
C text
D button
正确答案: B
解析:
重置按钮

30.下面选项中( )可以设置网页中某个标签的右外边距为10像素？
A margin:0 10px;
B margin:10px 0 0 0;
C margin:0 10px 0 0px;
D padding-right:10px;
正确答案: C

二、多选题（共20题，每题2分）
得分：0分
1.表单验证中h5新增的属性有 （ ）
A href
B autocomplete
C action
D novalidate
正确答案: B,D
解析:
h5新增属性：
autocomplete
autofocus
form
form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)
height 和 width
list
min, max 和 step
multiple
pattern (regexp)
placeholder
required

2.关于盒子阴影的说法正确的是（）
A 阴影可以添加内阴影，只需要加属性值inset即可
B 阴影大小是不占物理位置的
C 阴影大小是占物理位置的
D 阴影是css3新增属性，在老版本的浏览器中不兼容
正确答案: A,B,D
解析:
因为阴影大小是不占物理位置的，所以C项错误

3.以下关于弹性布局说法正确的是（）
A 弹性布局什么浏览器都兼容
B 弹性布局非常适合书写移动端
C 弹性布局属于css2 版本
D 弹性父元素只能影响子元素，无法影响所有的后代元素
正确答案: B,D
解析:
弹性布局属于css3 只兼容高版本浏览器

4.关于网页优化的做法正确的是（）
A 结构与样式分离
B 在写超链接时尽量使用纯文本，不要使用图片热点链接
C 在写超链接时尽量不要使用纯文本，使用图片热点链接
D 图片越大越清晰，所有图片越大越好
正确答案: A,B
解析:
优化网页需要机构样式分离 存文本超链接搜索引擎越喜欢 图片大小适中最好 越大打开页面越慢

5.关于背景的说法正确的是（ ）
A css3 背景可以设置多个
B 背景图大小是css2的属性
C 渐变属于背景的一种
D css3 背景图可以设置显示区域
正确答案: A,C,D
解析:
ACD

6.overflow属性的属性值有哪些（)
A hidden
B visible
C scroll
D auto
正确答案: A,B,C,D
解析:
overflow属性的属性值有：hidden、visible、scroll、auto；选择A、B、C、D

7.以下哪些元素是置换元素（）
A input
B a
C span
D img
正确答案: A,D
解析:
置换元素元素本身一般拥有固有尺寸（宽度，高度，宽高比）的元素，且display值为inline-block，input和img的display的属性值都为inline-block，选A、D
得分：0分
8. z-index结以下哪些选项一起使用有效（）
A position:absolute
B position:fixed
C position:static
D position:relative
正确答案: A,B,D
解析:
定位position的属性值一共有四个，position:absolute、绝对定位，position:fixed、固定定位，position:relative相对定位都可以设置z-index属性

9.以下不是伪元素选择符的选项是（）
A :first-letter
B :hover
C :focus
D :link
正确答案: B,C,D
解析:
CSS2中的伪元素大家以前看过：:first-line,:first-letter,:before,:after;那么在CSS3中，他对伪元素进行了一定的调整，在以前的基础上增加了一个“：”也就是现在变成了“::first-letter,::first-line,::before,::after”另外他还增加了一个“::selection”，题目中问的不是伪元素选择符，所以选择BCD。

10.下面选项中对替换元素描述正确的是（）
A 元素本身拥有固有尺寸，宽度，高度，宽高比
B 都带有边框
C 浏览器根据元素的属性，来决定元素的具体显示内容
D 元素会将内容直接表现给用户端
正确答案: A,C
解析:
替换元素就是浏览器根据元素的标签和属性，来决定元素的具体显示内容。替换元素是其内容不受CSS视觉格式化模型控制的元素，也叫置换元素，浏览器会根据元素的标签类型和属性来显示这些元素。替换元素也在其显示中生成了框。所以，替换元素通常有其固有的尺寸：一个固有的宽度，一个固有的高度和一个固有的比率例如img , input , textarea , select , object都是替换元素 ，所以选择AC
得分：0分
11.以下选项中,语法正确的是（）
A div:after{content:”xxx”}
B div:before{content:url(./img/1.jpg)}
C div:first-letter{display:block;}
D div::active{color:#f00}
正确答案: A,B,C
解析:
:after 与content属性一起使用，定义在对象后的内容，如果对象的内容引入的图片可以不需要添加双引号。
:before 与content属性一起使用，定义在对象前的内容，如果对象的内容引入的图片可以不需要添加双引号。
:first-letter 定义对象内第一个字符的样式，注：该伪元素只能用于块元素
:first-line 定义对象内第一行的样式，注：该伪元素只能用于块元素，ie6以下版本浏览器不支持伪对象选择符，CSS2中的伪元素大家以前看过：:first-line,:first-letter,:before,:after;那么在CSS3中，他对伪元素进行了一定的调整，在以前的基础上增加了一个“：”也就是现在变成了“::first-letter,::first-line,::before,::after”另外他还增加了一个“::selection”。选择项D，active是伪类选择器
伪类选择器只有一个冒号，不存在双冒号的写法。所以最终的答案是ABC。

12.以下属于css中的控制文本或字体的属性有:
A float
B margin
C color
D font-weight
正确答案: C,D
解析:
color文本颜色 font-weight文本加粗

13.属于表格元素的有
A table
B hr
C select
D tr
正确答案: A,D
解析:

14.下列可以设置内容大小写的属性有
A text-transform
B word-spacing
C text-indent
D font-variant
正确答案: A,D
解析:

15.下列css选择器的优先级正确的有
A id:0100
B class:0001
C 标记选择器：0010
D class:0010
正确答案: A,D
解析:

16.下列属于input标签的属性有
A name
B selected
C rows
D value
正确答案: A,D
解析:

17.的伪类选择符不包括
A a:link
B a:onfouce
C a:visited
D a:onclick
正确答案: B,D
解析:

18.关于样式表的优先级说法正确的是
A 直接定义在标记上的css样式级别最高
B 内部样式表次之
C 外部样式表级别最低
D 同一个选择器中，设置样式时，设置相同的属性，后设的属性值起作用
正确答案: A,D
解析:
样式表优先级
得分：2分
19.块状元素的特征有哪些（）
A 可以设置宽度和高度
B 一般作为容器使用
C 此元素会独占一行，自动换行
D 默认情况下，可以和其他标签在一行内逐个显示
正确答案: A,B,C
解析:
块状元素的特征有:可以设置宽度和高度,一般作为容器使用,此元素前会独占一行，自动换行;选择A、B、C

20.如下代码

两张图片之间会产生左右间距，如何解决（）
A *{padding:0;margin:0;}
B img{overflow:hidden;}
C img{float:left}
D img的html代码不换行
正确答案: C,D
解析:
默认情况下img的display的属性值为inline( inline-block ); 两张图片之间会产生间距
解决方法：
给图片转成块状元素然后添加浮动
图片之间不存在回车键