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
解析: