一、单项选择题5. 执行下面的代码,在IE6、IE7、IE8+和Firefox中的情况是______
div {
width: 20px;
*width: 15px !important;
*width: 10px;
}
- A.Firefox和IE8+的宽度为20px;IE7的宽度为15px;IE6的宽度为10px
- B.Firefox和IE8+的宽度为20px;IE7和IE6的宽度为15px
- C.Firefox和IE8+的宽度为15px;IE7的宽度为15px;IE6的宽度为10px
- D.Firefox和IE8+的宽度为15px;IE7和IE6的宽度为10px
A B C D
A
[考点] CSS与CSS3
[解析] 因为Firefox和IE8+会忽略带星号的属性,所以它们的宽度为20px。IE6和IE7都能识别带星号的属性,但IE7能够正确提升带!important属性的权重,所以IE7的宽度为15px。IE6在当前的声明块中有一个BUG,不能正确解析!important,所以最后的宽度为10px。
三、简答题1. 伪元素::before和:before有什么区别?
早期的时候,伪元素和伪类都使用单冒号(:)。但最新的CSS3规定伪元素使用双冒号(::),伪类用单冒号,两者区分更明显。
[考点] 选择器和层叠
2. 伪类:first-child与:first-of-type有什么区别?
伪类:first-child表示父元素中的第一个子元素,只要这个元素是在第一个位置,就能匹配。伪类:first-of-type表示父元素中的第一个相同类型的子元素,即具有相同的元素名。用一个例子来展示两者之间的不同,先创建一个HTML文档,代码如下所示,在div元素中包含span元素和p元素。
<div>
<span>第一个span元素</span>
<p>第一个p元素</p>
<p>第二个p元素</p>
</div>
然后用下面的两个选择器来匹配元素,第一个选择器(包含: first-child)匹配的是div元素的第一个子元素,也就是span元素,第二个选择器(包含: first-of-type)匹配的是第一个类型为p的子元素,也就是p元素。
/*匹配第一个span元素*/
div:first-child{}
/*匹配第一个p元素*/
div p:first-of-type{}
[考点] 选择器和层叠
3. 在移动端,经常会做整屏的专题页面。如何设置元素的高度,使得页面的背景能铺满整个屏幕?
为了能让背景铺满整个屏幕,可以把根元素(html)的高度设为100%(代码如下所示),然后在该元素中设置背景。
html {
height: 100%;
}
根元素的百分比高度之所以有效,是因为根元素的包含块是由视口提供的初始包含块(initial containing block),初始包含块的高度就是视口高度。
[考点] 值和单位
4. 链接有4种状态,包括未访问(:link)、已访问(:visited)、激活(:active)和悬停(:hover),声明的顺序是怎么样的?
推荐使用LVHA的顺序,通常这4个状态会使用同一个源声明,也不会单独给某个状态标记重要性,4个状态的特殊性也相同(代码如下所示),因此影响权重的只有在样式表中所处的位置了。
a:link {
color: blue;
}
a:visited {
color: red;
}
a:hover {
color: green;
}
a:active {
color: yellow;
}
当鼠标悬浮在未访问或已访问链接的时候,都会同时存在两种状态::link与:hover或:visited与:hover。如果:hover声明在:link或:visited之前,那么就会被覆盖掉。当鼠标点中链接的时候,会同时存在两种状态::active与:hover。如果:active声明在:hover之前,那么会被覆盖掉。因此:hover与:active必须在:link与:visited之后,而:active必须在:hover之后,至于:link与:visited,它们两个的顺序可以互换。将LVHA看成两个单词的组合:love和hate,更易于记忆。
5. 用过calc()函数吗?它是什么?有什么作用?
calc()是CSS的一个函数,只有一个数学表达式参数,此函数可处理加减乘除等数学运算,并且在表达式中可混用不同的单位,如以下代码所示。
div {
width: calc(50%-2px);
}
在用百分比做自适应布局的时候,如果要进行计算会比较困难,例如为了让两个有边框的元素排列在一行,需要准确地算出各个元素的宽度,而宽度都是百分数,边框却是像素值。单位不同,很难得出结果,但有了calc()函数后,结果值就能手到擒来,下图是这个例子的效果示意图。
calc()函数的使用效果 [考点] 值和单位