这是网易微专业之《前端工程师》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属性是为元素的边框设置宽度的属性。
