前端一阶段易错题集合

css有三种样式表：分别为：内部样式表 <style type="text/css"></style> 外部样式表的连接方法<link rel="stylesheet" type="text/css" href="/link/to?link=https://blog.csdn.net/qq_44930306/article/details/外部样式表地址"/> 内嵌/行间样式表<div style="css属性"></div>

2.在HTML中引入css内部样式表使用
A style B p C link D strong

解析:

内部样式表的语法 <style type="text/css"> </style>

3.能实现背景平铺效果,对应的CSS为

A div{background-image:url(images/bg.gif);}

B div{background-image:url(images/bg.gif) repeat-x;}

C div{background-repeat:url(images/bg.gif) repeat-y;}

D div{backgroud-repeat:url(images/bg.gif) no-repeat;}

解析:

background-image属性后面只能添加图片路径的属性值，因为他不是复合式写法，不能同时添加平铺属性值。当只添加背景图时，背景图默认平铺。

4.关于样式表的优先级说法正确的是

A 直接定义在标记上的css样式级别最高

B 内部样式表次之

C 外部样式表级别最低

D同一个选择器中,设置样式时,设置相同的属性,后设的属性值起作用

5.以下css属性设置语法正确的有

A text-indent:-999px;

B margin-left:-10px;

C padding-left:-10px;

D width:100%;

解析:

text-indent,margin的属性允许属性值为负数，padding的属性值不可以为负数，width可以写百分比

6.下列哪些标准是由W3C(万维网联盟)制定的

A html B css C xhtml D javascript

7.选出你认为最合理的定义标题的方法

A <span class=""heading"">文章标题</span>

B <h2>文章标题</h2>

C <h3>文章标题</h3>

D <strong>文章标题</strong>

解析:h1-h6文本标题标签

9.下列属于input标签的属性有

A name B selected C rows D value

10.下列属于a标签的属性有

A title B target C src D href

其中css中定义如下 .a{width: 200px;height: 200px;background-color: #f00;float: left;} .b{width: 300px;height: 300px;background-color: #ff0;} 以下说法正确的是()">11.以下代码 <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;} 以下说法正确的是()

A 两个盒子会发生重叠

B 元素a在元素b上方

C 元素b在元素a上方

D 两个元素将左右排列

解析:

float:left原理添加float:left的元素会把右侧的空间做“预留”，等待下个添加浮动的元素的站位

11.下列哪些标签能够实现加粗效果

A b标签 B strong标签 C h标签 D i标签

12..如果想跳转到同一目录下的名为res.html文件的名为show的锚点,下列( A )写法是正确的?

A <a href="/link/to?link=https://blog.csdn.net/qq_44930306/article/details/res.html">跳转</a>

B <a href="/link/to?link=https://blog.csdn.net/qq_44930306/article/details/124333457">跳转</a>

C <a href="/link/to?link=https://blog.csdn.net/qq_44930306/article/details/res">跳转</a>

D <a src="https://blog.csdn.net/qq_44930306/article/details/res.html">跳转</a>

解析:

锚点语法<标签 id=""></标签> <a href="/link/to?link=https://blog.csdn.net/qq_44930306/article/details/124333457"></a>

13.用HTML CSS开发商业网站测试分析,在制作网页时,关于overflow属性说法错误的是( B )

A overflow属性的常见值有visible、hidden、scroll、auto

B 当属性值为hidden时,如果内容被修剪,则浏览器会显示滚动条以便查看其余内容

C 可以使用overflow属性与盒子宽度配合使用,清除浮动来扩展盒子的高度

D 如果页面中有绝对定位元素,并且绝对定位的元素超出了父级的范围,使用overflow属性则不合适

解析:

overflow：hidden;是溢出隐藏不会有滚动条

14.给strong标签设置以下哪些css属性,可以在浏览器中能正常显示?(strong是内联元素)

A margin:100px auto;

B padding:20px 30px;

C margin-left:40px;margin-right:40px;

D padding-left:40px;padding-right:40px;

解析:

margin和padding对于行内元素span这类的标签垂直方向设置不会影响位置

15.行内元素的特征有哪些

A 此元素可以和其他行内元素在一行内逐个显示

B 可以设置宽度和高度

C 此元素的宽度和高度跟据内容而定

D 可以使用盒模型中的margin,padding属性,但是垂直方向的显示不正常

16.overflow属性的属性值有哪些

A hidden B visible C scroll D auto

17.以下哪个标签是属于table表格的行分组的标签?

A tfoot B col C caption D colgroup

解析:

表格行分组是thead tbody tfoot所以选择A；col和colgroup是列分组，caption是表格标题

18.可以解决图片底部间隙的问题的方法正确的是

A display:inline-block

B margin:0;

C padding:0;

D display:block;

解析:

题目问的是图片撑大3像素的兼容问题，解决方法有2个，1是给img设置display：block；或者vertical-align：top;。

19.在HTML中,以下关于position属性的设定值描述错误的是( B )

A static为默认值,没有定位,元素按照标准流进行布局

B relative属性值设置元素的相对定位,垂直方向的偏移量使用up或down属性来指定

C absolute表示绝对定位,需要配合top、right、bottom、left属性来实现元素的偏移量

D 用来实现偏移量的left和right等属性的值,可以为负数

解析:

absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 relative 生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。 static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

20.CSS哪些属性没有继承性( D )

A font-size B font-family C color D height

解析:

CSS 继承是指我们设置上级(父级)的CSS样式，上级（父级）及以下的子级（下级）都具有此属性，一般只有文字文本具有继承特性，如文字大小、文字加粗、文字颜色、字体等。

21.如何让元素高度自适应?(父元素的高度由内容撑开)

A 给元素设置height:100%

B 给元素设置height:auto

C 高度不写

D 给元素设置height:content;

解析:

height:auto或者高度不写，父元素的高度由内容撑开

22.以下哪些属性,可以让元素不论本身是什么元素类型,设置之后都会产生块级框(块级框就是元素可以设置宽高)

A display:block

B position:fixed

C float:left

D position:absolute

解析:

例如span默认不可以设置宽高，一旦浮动或者使用绝对定位和固定定位，就可以设置了

23.给strong标签设置以下哪些css属性,可以在浏览器中能正常显示?(strong是内联元素)

A margin:100px auto;

B padding:20px 30px;

C margin-left:40px;margin-right:40px;

D padding-left:40px;padding-right:40px;

解析:

margin和padding对于行内元素span这类的标签垂直方向设置不会影响位置

24.position定位属性设置哪些属性值,添加z-index属性会有效

A static B absolute C relative D fixed

解析:

z-index必须结合position属性才生效

25.盒子内的文本溢出盒子范围,以下选项中可以隐藏溢出文本且不产生滚动条的选项是?

A overflow:auto;

B overflow-xy:hidden;

C overflow-x:hidden;overflow-y:hidden;

D overflow:hidden;

解析:

overflow:hidden是隐藏，overflow-x:hidden;针对x轴，overflow-y:hidden;针对y轴

26.不属于vertical-align的属性值

A middle B center C top D bottom

27.层级选择器相邻兄弟选择器的写法是

A E<F B E F C E>F D E~F

28.属于H5新增的表单属性的是

A value B checked C placeholder D selected

29.下面关于transition-delay的说法不正确的是

A transition-delay如果是0,那么可以省略不写

B transition-delay必须写在过渡的最后

C transition-delay是过渡的执行时间

D transition-delay是过渡的等待时间

30.下面关于渐变的说法不正确的是

A 渐变的颜色最多不能超过5种

B 线性渐变和径向渐变可以同时使用

C 渐变中的色标位置可调

D 渐变同样支持过渡

31.以下选项中书写正确的是

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)

32.以下哪些方法能解决img把父元素高度撑大3~6像素的问题

A font-size:0

B html代码不换行

C vertical-align:top

D float:left

33.以下对background-size属性值描述正确的是

A background-size:cover; 背景图会超出容器,背景不会发生变形

B background-size:contain; 背景图会超出容器,背景不会发生变形

C background-size:100% 100%; 背景图会发生变形,背景图不会超出容器

D background-size:100%; 背景图不会超出容器,不会变形

34.h5新增的表单属性有哪些

A required B checked C pattern D placeholder

35.以下对order属性描述正确的是

A 数值越小,排列越靠前

B 数值越大,排列越靠前

C order可以改变HTML结构顺序

D 以上描述都不正确

36.以下哪些条件可以触发BFC

A 将元素转换成display:inline-block或table-cell

B 设置元素的position属性,任何属性值都可以

C 设置元素的overflow属性,任何属性值都可以

D 元素设置宽度高度及边框就可以

37.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);

38.以下设置不正确的有

A padding:-10px;

B margin-top:-10px;

C z-index:-1;

D text-shadow:5px -5px -5px gray;

39.阅读下面HTML代码,若要使<dt>和<dd>标签在同一行显示,下面选项中的CSS书写正确的是( C ). <dl> <dt>用户名:</dt> <dd><input type="text" name="userName" /></dd> </dl>

A dl dt { float:left;｝

B dl dd { float:left;｝

C dl dt, dl dd { float:left;｝

D dl { display:inline;｝

39.以下设置背景图片不会发生变形的有

A background-size:100% 100%;

B background-size:cover;

C background-size:100%;

D background-size:contain;

40.关于盒模型的描述,正确的是

A 标准盒模型的总宽度=width 左右padding 左右border 左右margin

B 标准盒模型的总宽度=width 左右margin

C 怪异盒模型的总宽度=width 左右padding 左右border

D 怪异盒模型的总高度=height 上下margin

41..css3背景属性background-size的哪个值既不会被裁切也不会变形

A cover B contain C 100% auto D 100% 100%

42.以下代码 <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 两个元素将左右排列

42.以下属于表格行分组的是

A colgroup B thead C tbody D tfoot

43.当子元素的margin-top传递到父元素上时,以下哪个属性可以解决

A font-size:0 B float:left C overflow:hidden

44.以下选项中的伪元素选择符有

A :active B ::after C :visited D ::before

备注：图片插入容器会自带3-5间距的解决方法：

1.img的css中以下三选一

display:block;

vertical-align:top;

vertical-align:bottom;

2.图片外层DIV的CSS添加

font-size:0;

这篇好文章是转载于：学新通技术网