这是网易微专业之《前端工程师》CSS单元测试题,我做了两次,第一次在没上课之前做的,全靠边写边测试,错了五六题吧,这次学完课后,没有动用浏览器测试,全部都是根据掌握的知识点推到的。
(一)
已知这样一段HTML:
<div class="a"><div class="b"></div></div>
如果应用了这样一段CSS:
.a{ width:100px; padding:10px; box-sizing:border-box; }
.b{ width:100%; height:10px; background-color:red; }
那么红色区域的宽度为
A.110px ;B.120px;C.100px;D.80px
解:这题考的是盒模型的怪异模式,也就是当盒模型定义的box-sizing:border-box;的时候,.a的width=内容宽度+padding+border。所以.a的真正内容区的宽度是80px,所以子元素.b:width:100%,就是父元素内容区的宽度,是80px。所以选D。
(二)
(单选)以下哪个box-shadow能模拟出border:1px solid #000; 的效果
A.box-shadow:1px 1px 1px #000;
B.box-shadow:0 0 0 1px #000;
C.box-shadow:1px 1px #000;
D.box-shadow:0 0 1px #000;
解:box-shadow的语法是
box-shadow: h-shadow v-shadow blur spread color inset;
值 | 描述 |
---|---|
h-shadow | 必需。水平阴影的位置。允许负值。负值的话就是反方向水平向左的阴影 |
v-shadow | 必需。垂直阴影的位置。允许负值。负值的话是反方向垂直向上的阴影 |
blur | 可选。模糊距离。比如这里填3px,模糊距离就会向内1.5px的羽化,向外1.5px的羽化。 |
spread | 可选。阴影的尺寸。类似在外面加层边框 |
color | 可选。阴影的颜色。 |
inset | 可选。将外部阴影 (outset) 改为内部阴影。 |
所以答案就是B了。
(三)
(单选)如果设置margin:1px 2px 3px 4px;,那么这四个值依次代表的是
A.margin-top、margin-right、margin-bottom、margin-left
B.margin-top、margin-bottom、margin-left、margin-right
C.margin-left、margin-right、margin-top、margin-bottom
D.margin-left、margin-top、margin-right、margin-bottom
解:margin的四个写法的意思分别是
(1)margin:10px;///意思是所有的外边距(上下左右)都是10px。
(2)margin:10px 50px;//意思是上下外边距是 10px,左右外边距是 50px。
(3)margin:10px 50px 20px;//上外边距是 10px,而左右外边距是 50px,下外边距是 20px。
(4)margin:10px 50px 20px 30px;//上外边距是10px,右外边距是50 px,下外边距是 20px,左外边距是 30px。可以用顺时针的顺序来记。
所以答案就是A。
(四)
(单选)已知这样一段HTML:
<div class="a"></div>
如果应用了这样一段CSS:
.a{ width:100px; height:100px; padding:10px; background-color:red; }
那么红色区域的大小为
A.宽:90px,高:90px
B.宽:80px,高:80px
C.宽:100px,高:100px
D.宽:120px,高:120px
解:这题考的是background-color的绘制区域。background有个绘制区域设置的属性叫做background-clip:规定背景的绘制区域。它的语法是这样的:
background-clip:border-box|padding-box|content-box;
background-clip的默认值是border-box,意思是背景绘制在border的外边距内,什么是border的外边距呢,border是有宽度的,内边距和padding接壤,外边距和margin接壤,所以默认的意思是绘制区域包括border+padding+内容部分,padding-box就是背景绘制在padding内,包括padding,也就是在border的内边距以内的区域,而content-box就是背景绘制在内容区内。IE6、IE7、IE8不支持这个属性。
所以这个答案就是D。
(五)
(单选)已知这样一段HTML:
<div class="parent">
<p>a</p>
<p>b</p>
<p>c</p>
</div>
如果应用了这样一段CSS:
.parent{ width:90px;}
.parent p{ float:right; width:30px; }
那么看到的字母从左往右依次是
A.acb
B.cba
C.cab
D.bac
解:这一题是考float的特点。float有下面这些特点。
所以如果给abc三个都设置浮动,a先偏移到最右边,然后b偏移到和a重叠的位置,c也偏移到和a重叠的位置,但是实际上却不会这样,因为float元素之间虽然脱离了文档流,但是在浮动元素之间也存在文档流,所以b偏移到紧挨着a就停止了,c偏移到紧挨着b就停止了,所以他们的顺序就是cba,就选B。
(六)
(多选)以下和padding:2px 3px 2px 3px;等价的有
A.padding:3px 2px 3px;
B.padding:2px 3px 2px;
C.padding:2px 3px;
D.padding:3px 2px;
解:这题可以参考第三题,答案是B、C。
(七)
(多选)已知HTML如下:
<div class="a"><div class="b"></div></div>
已有CSS如下:
.a{ width:200px; }
.b{ width:100px; }
请问,再增加以下哪些CSS可以使得这个子元素(.b)在它的父元素里水平居中
A..b{ margin:0 auto; }
B..a{ text-align:center; }
C..b{ float:center; }
D..a{ text-align:center; } .b{ display:inline-block; }
解:这题考的是常规的两种水平居中的使用区别。text-align:center 是用来设置文本或img标签等一些内联对象(或与之类似的元素)的居中。margin:0 auto 设置块元素(或与之类似的元素)的居中。
我们来举个栗子说明,这其中的区别。比如我们设置一个段落P,在段落内存在一个图片img标签。
当设置body{text-align:center;}。 在IE中,段落P,图片img同时实现了居中对齐,也就是说text-align:center;同时作用于元素p与元素img。 在FF中,段落P,没有能实现居中对齐,而图片img实现了居中对齐,也就是说text-align:center;作用于img标签,而段落p标签没有起到居中的作用。
当设置段落 p {margin:0 auto;}。 在IE与FF中,段落P均实现了居中对齐。图片img由于不是作用对象,所以不会居中对齐。
有三种情况需要说明: 1.margin:0 auto;的选择器是作用对象,如div,p,而不是body,不是父元素或者祖先元素。如果设置:body { margin:0 auto; }将不会达到任何效果,除非你定义body的宽度,那将会让body内的元素产生位置变化。如我们设置body宽度为500px。对p段落不作任何设置, 我们最大化窗口将会看到段落并非处于窗口的最左上角。
2.设置段落 p {text-align:center;} 将要实现的并不是段落本身的对齐方式,而是段落内元素居中对齐。3. 设置图片标签img {margin:0 auto;} ,就犯了一个小错误,img类于内联对象,不可以设置图片img标签的margin属性,如果一定要设置,那么先将它的属性转变为块元素,如下面的代 码:img {display:block; margin:0 auto;}
所以这题的答案是AD。
关于居中的问题,可以看看这篇汇总的方法《CSS制作水平垂直居中对齐》
(八)
(多选)position属性可以有以下哪些值
A.absolute
B.auto
C.normal
D.static
解:position 属性规定元素的定位类型。
值 | 描述 |
---|---|
absolute | 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
fixed | 生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
relative | 生成相对定位的元素,相对于其正常位置进行定位。因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。 |
static | 默认值。没有定位,元素出现在正常的流中(忽略 top,bottom, left, right 或者 z-index 声明)。 |
inherit | 规定应该从父元素继承 position 属性的值。 |
所以答案是AD,关于position的这些值具体的特征,可以看看我这篇文章网易微专业之《前端工程师》学习笔记(5)-布局属性
(九)
(多选)display属性可以有以下哪些值
A.visible
B.block
C.inline
D.inline-block
解:display的值有哪些?
值 | 描述 |
---|---|
none | 此元素不会被显示 |
block | 此元素将显示为块级元素。 |
inline | 默认,此元素会被显示为内联元素。 |
inline-block | 行内块元素 |
list-item | 此元素会作为列表显示 |
table | 此元素会作为块级表格来显示(类似<table>) |
inline-table | 此元素会作为内联表格来显示(类似<table>) |
table-row-group | 此元素会作为一个或多个行的分组来显示(类似<tbody>) |
table-header-group | 此元素会作为一个或多个行的分组来显示(类似<thead>) |
table-footer-group | 此元素会作为一个或多个行的分组来显示(类似<tfoot>) |
table-row | 此元素会作为一个表格行显示(类似<tr>) |
table-column-group | 此元素会会作为一个或多个列的分组来显示(类似<colgroup> ) |
table-column | 此元素会作为一个单元格列显示(类似<col> ) |
table-cell | 此元素会作为一个表格单元格显示(类似<td>和<th>) |
table-caption | 此元素会作为一个表格标题显示(类似<caption> ) |
其中display最主要的三个值,必须要记住会用的有block、inline、inline-block。所以答案就是BCD。
(十)
(多选)font-weight属性可以有以下哪些值
A.normal
B.auto
C.700
D.bold
解:font-weight:定义字体粗细,值如下
font-weight:normal|bold|bolder|lighter|数值比如100-900;400 等同于 normal,而 700 等同于 bold。
所以答案是ACD。
(十一)
(多选)已知HTML:
<div class="a"><p class="b">Hello World</p></div>
以下哪些CSS可以使文字“Hello World”变成红色
A.p.b{color:red;}
B.p.a{color:red;}
C..a{color:red;}
D..b{color:red;}
解:这题考的是选择器。答案是ACD。B如果写成.a p{color:red;}就对了。
(十二)
(多选)已知以下HTML:
<div class="parent">
<div class="a">This is a Demo</div>
<p class="b c">Hello World</p>
</div>
<div class="parent">This is a Demo</div>
以下哪些CSS可以使得“Hello World”的文字颜色为白色
A..parent .c{ color:#fff; }
B..b:first-child{ color:#fff; }
C..a .b{ color:#fff; }
D..b.c{ color:#fff; }
解:答案是AD。B错是因为p标签不是第一个子元素,如果设置b:last-child{color:#fff;};C错在.a.b不是父子元素关系,不能这样写。
(十三)
(多选)已知一个元素做了以下设置:
width:100px; height:100px; padding:10px; background:url(x.png) no-repeat;
请问增加以下哪些CSS可以改变这张背景图的位置
A.background-position:0 0;
B.background-position:0% 0%;
C.background-position:50% 50%
D.background-position:0%;
解:这题考的是background-position:定义背景图像的起始位置这个属性。它的语法为:
background-position:x% y%(百分比)|top left之类的|xpx ypx(具体数值);
默认值为background-position:0 0;或者left top或者0% 0%都是表示一个意思,定位到左上角。
注意:如果设置了background-position:top;如果仅规定了一个关键词,那么第二个值将默认是"center"。又比如设置了background-position:30px;仅规定了一个值,纳闷另一个值将是50%。
所以这一题答案是CD。
(十四)
(多选)以下哪些属性有误
A.transition-timing-function
B.transition-name
C.animation-direction
D.animation-property
这题考的是课程的动画这个章节的知识点。答案是:BD。
其中transtion过渡有这些属性值
属性 | 描述 |
---|---|
transition | 简写属性,用于在一个属性中设置四个过渡属性 |
transition-property | 规定应用过渡的CSS属性的名称 |
transition-duration | 定义过渡效果花费的时间,默认是0. |
transition-timing-function | 规定过渡效果的时间曲线,默认是“ease” |
transtion-delay | 规定过渡效果何时开始,默认是0。 |
annimation动画有这些属性值
属性 | 描述 |
---|---|
animation | 简写属性,用于在一个属性中设置8个动画属性 |
animation-name | 规定需要绑定到选择器的keyframe名称 |
animation-duration | 规定完成动画所花费的时间,以秒或毫秒计。 |
animation-timing-function | 规定动画的速度曲线。跟transition一样。 |
animation-delay | 规定在动画开始之前的延迟。 |
animation-iteration-count | 规定动画应该播放的次数。默认1,也可以是infinite无限次 |
animation-direction | 规定是否应该轮流反向播放动画。值为nomal\reverse\alternate\alternate-reverse。意思分别是正方向\反方向\往返\反方向的往返。 |
animation-fill-mode | 规定动画开始的时候是否要保持开始的第一帧,结束是否保持最后一帧。其值为none\backwards\forwards\both。分别意思是不保持,开始保持,结束保持,和都保持。通常情况下是both设置。 |
animation-play-state | 规定动画暂停还是播放,值为paused\running。一般搭配鼠标hover时候使用,比如鼠标移上去就动了的效果,就设置running。 |
(十五)
(判断)一个元素被设置了position:absolute; width:50%; 那么这个百分比的参照物是这个元素的父元素
- A.×
- B.√
解:这题考的是绝对定位的特点。绝对定位的特点看下面这张图:
我解释下,给一个小块设置了绝对定位,纳闷它的宽度就是收缩成内容宽度,就像图中的深橘色小块,然后会脱离文档流,位于它下面的小块会窜上来取代它的位置,若是给它追加topleft的方向值,则必须要明确参照物,绝对定位的参照物,要么没设置的时候就是html根元素,要么设置了的话就是它设置过相对定位的第一个定位的祖先元素。
所以这题的答案就是A。
(十六)
(判断)
.a{transform: rotate(45deg) translate(100%);}
和
.a{transform: translate(100%) rotate(45deg);}
两个的效果相同
A.√
B.×
解:这题要考的知识点是多个transform-function合用的时候应该注意哪些问题。有时候变形的效果是多个transform-function多步骤合作实现的。那就要用到多个transform-function了,比如偏移和旋转。但是这两个function书写的顺序必须不能错。transform中的transform-function可以多个写,但是书写的顺序会影响最后的视觉呈现的效果。
需要意识到变换函数的顺序。这是因为,每一个变换函数不仅改变了元素,同时也会改变和元素关联的transform坐标系,当变换函数依次执行时,后一个变换函数总是基于前一个变换后的新transform坐标系。
所以这题的答案就是B。
另外要更多的了解CSS3变形的相关知识点,可以看看我的这篇文章《网易微专业之《前端工程师》学习笔记(6)-变形》,里面有详细的介绍。
(十七)
(判断)在颜色值中transparent和rgba(0,0,0,0)最终的表现是一样的
- A.×
- B.√
解:这题考的是透明度的问题。答案是B。
RGBA(R,G,B,A)取值:
RGBA | 描述 |
---|---|
R | 红色值。正整数 / 百分数 |
G | 绿色值。正整数 /百分数 |
B | 蓝色值。正整数 / 百分数 |
A | Alpha透明度。取值0~1之间 |
transparent是全透明黑色(black)的速记法,即一个类似rgba(0,0,0,0)这样的值。
在CSS1中,transparent被用来作为background-color的一个参数值,用于表示背景透明。在CSS2中,border-color也开始接受transparent作为参数值,IE6不支持border的颜色为transparent,边框色会显示为黑色。在CSS3中,transparent被延伸到任何一个有color值的属性上。IE8及以下,color属性值为transparent时,文本显示为黑色。
IE6及更早浏览器只有background-color接受transparent取值。
IE7及IE8除了background-color,还有border-color也开始接受transparent取值。
(十八)
(判断)一个空的div元素设置了display:inline; width:100px; 之后,实际宽度为100px
- A.×
- B.√
解:这题的考点就是display:inline;的特点了,答案是A。
display:inline就是以内联元素方式显示,内联元素是不能设置宽高的。另外补脑下另外两个inline-block和block,这三者的区别。
|display |默认宽度 |可设置宽高| 起始位置| 代表元素有哪些|
| :-------- | --------:|| :-------- | --------:|
|block |父元素宽度| 是| 换行 |div\p\h1~h6\ol\ul\dl\table\address\blockquot\form|
|inline |内容宽度| 否| 同行 |a\span\br\i\em\strong\label\q\var\cite\code|
|inline-block| 内容宽度| 是 |同行 |input\textarea\select\button|
(十九)
(填空)已知这样一段HTML:
<p class="a"></p>
应用了这样一段CSS:
.a{ font:12px/2 arial; }
,则这个p元素的line-height的值是_________px
解:这题考点是font缩写的写法。答案是24。
font 简写属性在一个声明中设置所有字体属性有这些:
font-style
font-variant
font-weight
font-size/line-height
font-family
所以对应下来的简写方式就是这样的:
font:italic bold 12px/20px arial,sans-serif;
/2没有单位就代表相对数值,是字体大小的2倍。
当然必须注意的是font这个综合属性,连写的时候必须写字号和定义什么字体这两个属性值,如果只是font:12px;这样写是没效果的,必须写至少写font:12px arial;才会有效。所以对照起来,答案就很明显了。
(二十)
(填空)已知这样一段HTML:
<div class="a b"><em>Hello World</em></div>
应用了这样一段CSS:
em{ color:red; }
.a{ color:blue; }
.b{ color:green; }
.a.b{ color:yellow; }
请问,文字“Hello World”的颜色是(回答颜色的英文名称即可)__________
解:这题的考点是选择器的优先级。答案是em的那个颜色会有效果,就是red。为什么呢。
先来讲讲选择器的优先级方程式。
行内样式:a
ID选择器的数量:b
类、伪类、属性选择器的数量:c
标签选择器和伪元素选择器的数量:d
a,b,c,d分别给1000,100,10,1的级别值
所以选择器的最终值value=ax1000+bx100+cx10+dx1
举个栗子
选择器 | a | b | c | d | value |
---|---|---|---|---|---|
h1 | 0 | 0 | 0 | 1 | 1 |
p>em | 0 | 0 | 0 | 2 | 2 |
style="" | 1 | 0 | 0 | 0 | 1000 |
.nav p | 0 | 0 | 1 | 1 | 11 |
div #nav | 0 | 1 | 0 | 1 | 101 |
a:link | 0 | 0 | 1 | 1 | 11 |
样式根据选择器优先级别呈现,优先级别高的会覆盖优先级别低的,同级别的按照css书写的顺序,先写的会被后写的覆盖。当然如果在样式后面加!important,那么它的级别将是最高的。
而样式里的属性,不同的属性会合并,同样的属性会根据优先级规则以及书写规则进行覆盖。
这样说来,是不是应该选择.a.b呢,color是yellow,那么为什么不对呢?
还有一条,选择器的优先级会根据描述最清楚的来定义,在这个html里面,em定义的属性是最直接的指法,其他的类选择器的指法都算是父类继承过来的颜色属性,所以要选择em。
(二十一)
(填空)通过设置____________________: underline ; 可以给一段文字添加下划线。
解:这题的答案是text-decoration ,这个属性定义文本的修饰。它一般有下面这些值可以写:
值 | 描述 |
---|---|
none | 默认。什么修饰也没有 |
underline | 定义文本下的一条线。 |
overline | 定义文本上的一条线。 |
line-through | 定义穿过文本下的一条线。 |
blink | 定义闪烁的文本。 |
inherit | 规定应该从父元素继承 text-decoration 属性的值。 |
(二十二)
(填空)垂直对齐属性vertical-align的默认值是____________________
解:这题的答案是baseline。
vertical-align的值常见的有这些:
值 | 描述 |
---|---|
baseline | 默认。元素放置在父元素的基线上。 |
sub | 垂直对齐文本的下标。 |
super | 垂直对齐文本的上标 |
top | 把元素的顶端与行中最高元素的顶端对齐 |
text-top | 把元素的顶端与父元素字体的顶端对齐 |
middle | 把此元素放置在父元素的中部。 |
bottom | 把元素的顶端与行中最低的元素的顶端对齐。 |
text-bottom | 把元素的底端与父元素字体的底端对齐。 |
sub | 垂直对齐文本的下标。 |
super | 垂直对齐文本的上标 |
(二十三)
(填空)请补全以下样式,使得鼠标移到该元素上时文字变成红色:.demo_____________{color:red;}
解:这题太简单了,答案是:hover。
(二十四)
(填空)已知这样一段HTML,一个div元素里面嵌套了一个p元素:
<div class="a"><p class="b"></p></div>
应用了这样一段CSS:
p{ float:left; }
.b{ height:100px; margin:0; }
则这个div元素的高度是________px
解:这题考的是float的特性,答案是0。
float的特性可以看看下面这张图
给p设置了float,纳闷p就脱离文档流了,这个时候div里面就没内容了,当然高度是0了。
(二十五)
(填空)通过设置_____________: italic ; 可以把一段文字变成斜体。
解:这题的答案是font-style。font-style的其他值顺便也介绍下:
值 | 描述 |
---|---|
normal | 默认值。浏览器显示一个标准的字体样式。 |
italic | 浏览器会显示一个斜体的字体样式。意思是字体里面就有个斜体的 |
oblique | 浏览器会显示一个倾斜的字体样式。没有斜体强制倾斜,这样的话有时候效果不是很好看 |
inherit | 规定应该从父元素继承字体样式。 |
(二十六)
(填空)如果希望内容超出容器时容器自动出现滚动条,那么可以在容器上设置overflow:____________;。
解:这题的答案是auto。
值 | 描述 |
---|---|
visible | 默认值。溢出内容按照原有的方式显示,内容不会被修剪,会呈现在元素框之外。 |
auto | 当内容超出元素定义大小时显示滚动条,否则正常显示 |
hidden | 隐藏溢出的内容 |
scroll | 总是显示滚动条 |
(二十七)
(填空)请补全以下样式,使得上边框的粗细为2px(其他粗细仍然为1px):.demo{border:1px solid #000; ___________________:2px;}
解:这题答案是border-top-width。border-width属性是为元素的边框设置宽度的属性。