前端程序员面试分类真题6

前端程序员面试分类真题6一、单项选择题1.

下面可以被子元素继承的CSS属性是______A.borderB.marginC.colorD.width正确答案：C[考点]选择器和层叠[（江南博哥）解析]与元素外观相关的属性(如字体、颜色、对齐方式等)能被继承，与布局相关的属性(如边框、外边距、内边距、尺寸等)就不能被继承。除了选项C之外，其余3个选项都是布局属性。

2.

以下与角度相关的单位是______A.pcB.exC.chD.turn正确答案：D[考点]选择器和层叠[解析]与角度相关的单位有4种，如下表所列。选项D中的turn表示转数，1turn相当于360deg；选项A中的派卡(pc)是印刷行业常用的绝对长度单位；而另外两个选项中的ex和ch都是相对长度单位，ex通常表示字体的一半高，ch相当于数字0的宽度。角度单位单位名称说明deg度一个圆有360deggrad百分度常用于建筑或土木工程的角度测量，一个圆有400gradrad弧度一个圆大约有6.28rad，与度的换算公式为1rad=π/180degturn转数转一圈是1turn，1turn相当于360deg

3.

在下面的选项中，表示Web安全色的是______A.#BF4519B.#FF6600C.#CF6D78D.#90ED34正确答案：B[考点]值和单位[解析]Web安全色是指在各种平台下显示效果与预期一致。如果不是安全色，操作系统可能在处理颜色的时候产生抖动(抖动就是混合几种颜色，模拟出系统没有的颜色)，这样形成的颜色在不同平台中会有色差，例如在Mac中显示为深绿，而在Thinkpad中却显示为淡绿。当用十六进制标记法表示Web安全色时，需要用00、33、66、99、CC或FF组合的值。在这6个数中选3个，正好有216种(即6的三次方)组合方式，并且所有的安全色都可用简写。根据以上规则可知，只有选项B中的#FF6600是安全色，它还能简写为#F60。

4.

执行下面的代码后，span元素的宽度是______

span{

position:absolute;

top:10px;

left:20px;

width:100px;

height:50px;

padding:10px;

}A.120pxB.100pxC.60pxD.由内容决定正确答案：A[考点]CSS属性浮动和定位[解析]绝对定位(absolute)会使元素脱离正常流，并且会将元素变为块级元素。由于块级元素默认都是W3C盒模型，因此如果元素有内边距(padding)或边框(border)，那么在计算宽度时还要包含这两个属性值，由此得出span元素的宽度是120px。

5.

假设有一个宽和高都是100px的div元素，它有两个子元素section，宽和高都是50px。第一个设为绝对定位，第二个设为固定定位，代码如下所示。当两个元素都偏移到了父元素的外面，并且父元素设置了溢出内容会被裁剪时，第一个section元素会______，第二个section元素会______

＜style＞

.container{

position:relative;

overflow:hidden;

}

.absolute{

position:absolute;

left:120px;

top:10px;

}

.fixed{

position:fixed;

left:10px;

top:120px;

}

＜/style＞

＜divclass="container"＞

＜sectionclass="absolute"＞absolute＜/section＞

＜sectionclass="fixed"＞fixed＜/section＞

＜/div＞A.裁剪显示B.裁剪裁剪C.显示显示D.显示裁剪正确答案：A[考点]CSS属性浮动和定位[解析]为父元素设置溢出内容裁剪后，固定定位的元素仍然会显示，但换成绝对定位，就会被裁剪。第一个section元素被设为绝对定位，第二个section元素被设为固定定位，因此，选项A正确。

6.

假设4个section元素处于相同的层叠上下文中，并且都被设为绝对定位，然后分别给4个section元素定义z-index属性，代码如下所示。叠放在最上面的背景色是______

.zindex1{

background:blue;

z-index:auto;

}

.zindex2{

background:red;

z-index:-1;

}

.zindex3{

background:black;

z-index:0;

}

.zindex4{

background:yellow;

z-index:1;

}A.blueB.redC.blackD.yellow正确答案：D[考点]CSS属性浮动和定位[解析]CSS属性z-index用于改变元素的层叠顺序，属性值是一个无单位的数字(包括正数和负数)或auto(auto相当于0)。当元素处在相同的层叠上下文中时，z-index属性的值越大越不容易被覆盖。由于选项D中的数字最大，所以叠放在最上面的背景色是yellow，正确答案是D。

7.

能让元素中的文本强制换行的是______A.overflow:scrollB.word-break:break-allC.text-overflow:ellipsisD.word-wrap:normal正确答案：B[考点]CSS属性文本和字体[解析]选项A会在内容溢出时，在容器中显示滚动条。选项C会把溢出内容替换为省略号。如果把选项D中的word-wrap属性设为break-word，那么也能实现文本强制换行。

8.

要在文本下面添加一条红色的波浪线，需要为元素设置______A.text-decoration:underlinewavyredB.text-decoration:overlineC.text-decoration-style:wavyD.text-decoration-color:red正确答案：A[考点]CSS属性文本和字体[解析]CSS3将文本装饰(text-decoration)拆分为3个属性，分别为文本装饰的类型(text-decoration—line)、形状(text-decoration-style)和颜色(text-decoration-color)。根据题目的要求，需要设置这3个属性，只有选项A满足条件。

9.

使用CSS属性white-space的______关键字可以保留HTML文档中的空格、换行和Tab制表符A.normalB.preC.nowrapD.pre-line正确答案：B[考点]CSS属性文本和字体[解析]white-space属性与其他属性不同，不会影响元素的样式，它影响的是HTML文档中的空格、换行和Tab制表符。white-space属性总共有5个关键字可供选择，只有选项B中的pre才会保留HTML文档中的空格、换行和Tab制表符，下表罗列了另外4个关键字的行为。white-space属性的关键字关键字空白符制表符换行符normal合并合并忽略nowrap合并合并忽略pre-wrap保留保留保留pre-line合并合并保留

10.

CSS属性vertical-align的默认值是______A.superB.topC.baselineD.text-bottom正确答案：C[考点]CSS属性文本和字体[解析]CSS属性vertica-align用于行内元素和单元格元素的垂直对齐，选项C中的baseline是它的默认值，可将元素的基线与父元素的基线对齐。

11.

能够缩放背景图像的CSS属性是______A.background-clipB.background-attachmentC.background-positionD.background-size正确答案：D[考点]CSS属性边框和背景[解析]选项A中的background-clip属性用于定义裁剪背景区。选项B中的background-attachment属性可指定背景图像附着内容的方式。选项C中的background-position属性能指定背景图像的位置。选项D中的background-size属性是CSS3新增的属性，可指定背景图像的尺寸或把原图像缩放到合适大小，适应元素的背景区。

12.

把CSS3新增的background-size属性设为下面的______，能在保持原图像宽高比的前提下，缩放到能放进背景区的尺寸A.autoB.containC.coverD.100%100%正确答案：B[考点]CSS属性边框和背景[解析]选项A中的auto会将背景图像保持为原始尺寸；选项C中的cover能完全覆盖住背景区，但不会保持原图像的宽高比；选项D中的两个100%分别表示背景图像的宽和高，相当于使用cover关键字。

13.

把CSS属性background-attachment设为下面的______，能把背景图像附着到内容上，使得图像会随着内容一起滚动A.localB.scrollC.fixedD.auto正确答案：A[考点]CSS属性边框和背景[解析]如果使用选项B中的scroll，那么背景图像不会随着内容一起滚动。如果使用选项C中的fixed，那么背景图像会附着到视口上，图像也不会随着内容一起滚动。选项D中的auto是一个无效值。

14.

以下选项能实现无数次循环的动画是______A.animation:drift2sinfinitebothB.animation:color1s5ssteps(3)C.animation:drift2s0bothD.animation:color0salternate正确答案：A[考点]CSS3属性变形、过度和动画[解析]动画(animation)有8个子属性(如下表所列)，只有当animation-iteration-count属性被定义为infinite时，动画才可以被循环无限次。4个选项只有选项A包含infinite关键字，因此选择该选项。动画的子属性属性描述animation-name动画名称，名称不能定义为其他子属性的关键字animation-duration动画的持续时间animation-delay动画的延迟时间animation-timing-function缓动函数，下面会详细介绍一下steps()函数animation-iteration-count循环次数，可以用数字表示，也可以用关键字表示animation-direction播放方向animation-play-state动画的状态，运行(running)或暂停(paused)animation-fill-mode动画开始之前或结束之后的状态

15.

transform属性的值是一个变形函数，下面选项表示倾斜函数的是______A.translate()B.scale()C.skew()D.rotate()正确答案：C[考点]CSS3属性变形、过度和动画[解析]选项A中的translate()是一个位移函数；选项B中的scale()是一个缩放函数；选项D中的rotate()是一个旋转函数。

二、多项选择题1.

下面关于border:none以及border:0的描述中，错误的是______A.当border为none的时候，边框无外观B.当border为0的时候，边框宽度为0C.当border为none的时候，边框宽度为0D.只要定义了边框宽度，就能显示边框正确答案：CD[考点]CSS属性边框和背景[解析]当border为none的时候，宽度和颜色会被覆盖，宽度变为默认值medium，颜色变为默认的前景色(元素的CSS属性color的值)，代码如下所示。本题的选项C中，边框宽度为0，显然不符合事实。

div{

border:none;

/*等效于*/

border-width:medium;

border-style:none;

border-color:前景色;

}

当border为0的时候，外观和颜色会被覆盖，外观变为默认值none，颜色同样变为默认的前景色，代码如下所示。在选项D中，因为只定义了宽度值，默认的外观是none，所以不会显示边框。

div{

border:0;

/*等效于*/

border-width:0;

border-style:none;

border-color:前景色;

}

2.

过渡(transition)的子属性包括______A.transition-propertyB.transition-durationC.transition-delayD.transition-timing-function正确答案：ABCD[考点]CSS3属性变形、过度和动画[解析]过渡是为了让元素从一个状态到另一个状态的时候能更连贯、更平滑、更细腻，给用户减少一触即发的感觉。以上4个选项都是它的子属性。选项A中的transition-property用于设置参与过渡的属性名；选项B中的transition-duration表示过渡持续时间；选项C中的transition-delay表示过渡开始之前的延迟时间；选项D中的transition-timing-function用于设置缓动函数。

3.

在下面的选项中，表示媒体查询中的媒体特性的有______A.max-widthB.aspect-ratioC.device-pixel-ratioD.device-width正确答案：ABCD[考点]CSS3属性媒体查询[解析]有些媒体特性能和前缀min(最小)或max(最大)组合，拼接成一个新的媒体特性，选项A中的max-width就是这类媒体特性。选项B中的aspect-ratio表示视口宽度和高度的比值。选项C中的device-pixel-ratio表示设备像素比。选项D中的device-width表示设备宽度。

4.

在一条媒体查询中，有可能包含一些操作符，在下面选项中，合法的操作符是______A.orB.andC.notD.all正确答案：BC[考点]CSS3属性媒体查询[解析]选项A和选项D是无效的操作符。选项B中的and操作符用来连接媒体类型和媒体特性表达式，将它们组合成一条媒体查询。选项C中的not操作符用来否定整条媒体查询，但要注意，不能否定查询中的某个部分。

5.

以下选项中，属于CSS预处理器Sass语法的是______A.混合B.继承C.闭包D.函数正确答案：ABD[考点]预处理器和框架[解析]Sass中的混合(mixin)用于提取通用的声明块(即样式)或CSS规则。函数(function)与混合最大的区别是需要有返回值，这个值可以是任何类型的数据，但不能是声明块或CSS规则。Sass允许一个选择器能够继承另一个选择器中的声明块。

三、简答题1.

在CSS中使用background:transparent与opacity:0有什么区别?正确答案：transparent关键字相当于rgba(0,0,0,0)，作为background的属性值，它仅仅是将元素的背景设为透明，而元素中的内容还能显示。opacity会把元素和内容当成一个整体，当定义为0时，两者都会透明。[考点]值和单位

2.

请说说你对元素浮动(float)的理解。正确答案：浮动(float)最初仅仅是为了让内容环绕在浮动元素周围，后来利用它的特点逐渐将其用于布局。浮动元素让布局多样化，但它会脱离正常流，造成一些副作用(如高度塌陷)，如果不加以解决，那么会直接影响整体布局。浮动有3个关键字可以选择，left为向左浮动，right为向右浮动，none为不浮动。[考点]CSS属性浮动和定位

3.

执行下面的代码，效果如下图所示，虽然给p元素定义了15px的上外边距，但为何失效了?

＜style＞

div{

float:left;

width;80px;

height:80px;

background:#FFCC00;

}

p{

clear:both;

margin-top:15px;

}

＜/style＞

＜section＞

＜div＞＜/div＞

＜p＞已设置上外边距＜/p＞

＜/section＞

上外边距失效正确答案：浮动元素会脱离正常流，clear属性会让元素增加上外边距，使其在浮动元素的下面。在上面的代码中，浮动元素的高是80px，所以clear属性会给p元素增加80px的上外边距，比定义的15px要大，因此最终的