CSS基础试题

时间：2023-04-02 13:59:34 HTML

下面提供了18道关于CSS的试题，大家可以试试做，部分题型可以延伸挖掘出很多知识点。试题答案在最后。大家可以在评论区讨论。1.css是否区分大小写？ul{MaRgIn:10px;}正确吗？2、给行内元素设置margin-top和margin-bottom有什么影响吗？3.给行内元素设置padding-top和padding-bottom会改变它的位置吗？4.如果你有一个font-size为10rem的

元素，当用户改变浏览器窗口的大小时，这个元素的字体会响应性地改变吗？5.伪类：checkedworksonradioorcheckbox,butnoton

牛奶

Sausagecss:ul{color:red;}li{color:blue;}最后显示的文本Sausage是什么颜色？9.html:

牛奶

香肠css:ulli{color:red;}#must-buy{color:blue;}香肠最后显示的文字是什么颜色？10.html:

牛奶

香肠css:.shopping-list.favorite{color:red;}#must-buy{color:blue;}11.html:

牛奶

香肠css:ul#awesome{color:red;}ul.shopping-listli.favoritespan{color:blue;}文字香肠的颜色最显示的是什么？12.html:

牛奶

香肠/ul>css:ul#awesome#must-buy{color:red;}.favoritespan{color:blue!important;}13.html:

牛奶

香肠css:ul.shopping-listli.highlight{color:red;}ul.shopping-listli.highlight:nth-of-type(odd){color:blue;}14.html:

牛奶

香肠css:#awesome.favorite:not(#awesome).highlight{颜色：红色;}#awesome.highlight:nth-of-type(1):nth-last-of-type(1){color:blue;文本Sausage最终显示的颜色是什么？问题15-17是针对同一个html，一步一步来15.html:

css:#i-am-useless{background-image:url('mypic.jpg');}未引用的样式中包含的资源是否会被浏览器下载？16.html:

css:#test2{background-image:url('mypic.jpg');显示：无；}页面加载时，是否会下载图片mypic.jpg？17.html:

css:#test1{display:none;}#test2{background-image:url('mypic.jpg');visibility:hidden;}当页面加载时，是否会下载图片mypic.jpg？18.@mediaonlyscreenand(max-width:1024px){margin:0;}only的作用是什么？答：1.css不区分大小写，MaRgIn是正确的。2.没有。3.不是的，问题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号.蓝色。9.蓝色。10.蓝色。11.蓝色。12.蓝色。即使没有!important，它也是blue13.blue。14.红色。15.没有。16.是的。17.No.18.only操作符表示指定的样式只在媒体查询匹配成功时应用。它可用于防止所选样式在老式浏览器中应用，防止不支持具有媒体属性查询的旧浏览器应用于给定样式。