下面提供了18道有关css的测试题,大家可以尝试做一下,一些题可以延伸深挖出很多知识点。
测试题的答案在尾部。大家可以在评论区进行讨论。
1.css区分大小写吗?
ul { MaRgIn: 10px; }
这种写法是否正确?
2.为行内元素设置 margin-top 和 margin-bottom是否会产生影响?
3.为行内元素设置 padding-top 和 padding-bottom是否会改变它的位置?
4.如果你有一个<p>元素,它的font-size为10rem, 当用户改变浏览器窗口大小时,该元素的字体是否会响应式改变?
5.伪类:checked作用于radio 或者 checkbox,但是不作用于<option>?
6.在HTML中,伪类:root总是匹配 <html> 元素?
7.translate()函数实现了沿着 z 轴移动元素?
8-14题是针对同一个html,循序渐进。
8.
html:
<ul class="shopping-list" id="awesome"> <li><span>Milk</span></li> <li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li> </ul>
css:
ul { color: red; } li { color: blue; }
文字Sausage的颜色最终显示的是什么?
9.
html:
<ul class="shopping-list" id="awesome"> <li><span>Milk</span></li> <li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li> </ul>
css:
ul li { color: red; } #must-buy { color: blue; }
文字Sausage的颜色最终显示的是什么?
10.
html:
<ul class="shopping-list" id="awesome"> <li><span>Milk</span></li> <li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li> </ul>
css:
.shopping-list .favorite { color: red; } #must-buy { color: blue; }
11.
html:
<ul class="shopping-list" id="awesome"> <li><span>Milk</span></li> <li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li> </ul>
css:
ul#awesome { color: red; } ul.shopping-list li.favorite span { color: blue; }
文字Sausage的颜色最终显示的是什么?
12.
html:
<ul class="shopping-list" id="awesome"> <li><span>Milk</span></li> <li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li> </ul>
css:
ul#awesome #must-buy { color: red; } .favorite span { color: blue!important; }
13.
html:
<ul class="shopping-list" id="awesome"> <li><span>Milk</span></li> <li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li> </ul>
css:
ul.shopping-list li .highlight { color: red; } ul.shopping-list li .highlight:nth-of-type(odd) { color: blue; }
14.
html:
<ul class="shopping-list" id="awesome"> <li><span>Milk</span></li> <li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li> </ul>
css:
#awesome .favorite:not(#awesome) .highlight { color: red; } #awesome .highlight:nth-of-type(1):nth-last-of-type(1) { color: blue; }
文字Sausage的颜色最终显示的是什么?
15-17题是针对同一个html,循序渐进
15.
html:
<div id="test1"> <span id="test2"></span> </div>
css:
#i-am-useless { background-image: url('mypic.jpg'); }
没有引用到的样式所包含的资源是否会被浏览器下载下来?
16.
html:
<div id="test1"> <span id="test2"></span> </div>
css:
#test2 { background-image: url('mypic.jpg'); display: none; }
页面加载的时候,mypic.jpg该图片是否会被下载下来?
17.
html:
<div id="test1"> <span id="test2"></span> </div>
css:
#test1 { display: none; } #test2 { background-image: url('mypic.jpg'); visibility: hidden; }
页面加载的时候,mypic.jpg该图片是否会被下载下来?
18.
@media only screen and (max-width: 1024px) { margin: 0; }
only的作用是什么?
答案:
1.css不区分大小写,MaRgIn这种写法是正确的。
2.否。
3.否。
问题二跟问题三是同一个问题范围内,会有点坑,
行内元素还分为行内不可替换元素和行内替换元素。
对于input这种替换元素,margin和padding各方向均有作用。
对于span,a等这些不可替换元素,padding-left,padding-right,margin-right,margin-left均有效果,padding-top,padding-bottom,margin-top,margin-bottom无效果。
4.否。
5.否。 https://developer.mozilla.org...
6.是。
7.否。
8.blue。
9.blue。
10.blue。
11.blue。
12.blue。即使没有!important,也是blue
13.blue。
14.red。
15.否。
16.会。
17.否。
18.only操作符表示仅在媒体查询匹配成功的情况下应用指定样式。可以通过它让选中的样式在老式浏览器中不被应用,防止老旧的浏览器不支持带媒体属性的查询而应用到给定的样式。