CSS 基本测试题

Sunxb 发布于2019-08-01 16:17 / 1966人阅读

摘要：下面提供了道有关的测试题，大家可以尝试做一下，一些题可以延伸深挖出很多知识点。测试题的答案在尾部。对于这种替换元素，和各方向均有作用。操作符表示仅在媒体查询匹配成功的情况下应用指定样式。

下面提供了18道有关css的测试题，大家可以尝试做一下，一些题可以延伸深挖出很多知识点。

测试题的答案在尾部。大家可以在评论区进行讨论。

1.css区分大小写吗？

ul {
    MaRgIn: 10px;
}

这种写法是否正确？

2.为行内元素设置 margin-top 和 margin-bottom是否会产生影响？

3.为行内元素设置 padding-top 和 padding-bottom是否会改变它的位置？

4.如果你有一个

元素，它的font-size为10rem, 当用户改变浏览器窗口大小时，该元素的字体是否会响应式改变？

5.伪类:checked作用于radio 或者 checkbox，但是不作用于

6.在HTML中，伪类:root总是匹配元素？

7.translate()函数实现了沿着 z 轴移动元素？

8-14题是针对同一个html,循序渐进。

html:


    Milk
    Sausage

css:

ul {
    color: red;
}
li {
    color: blue;
}

文字Sausage的颜色最终显示的是什么？

html:


    Milk
    Sausage

css:

ul li {
    color: red;
}
#must-buy {
    color: blue;
}

文字Sausage的颜色最终显示的是什么？

10.

html:


    Milk
    Sausage

css:

.shopping-list .favorite {
    color: red;
}
#must-buy {
    color: blue;
}

11.

html:


    Milk
    Sausage

css:

ul#awesome {
    color: red;
}
ul.shopping-list li.favorite span {
    color: blue;
}

文字Sausage的颜色最终显示的是什么？

12.

html:


    Milk
    Sausage

css:

ul#awesome #must-buy {
    color: red;
}
.favorite span {
    color: blue!important;
}

13.

html:


    Milk
    Sausage

css:

ul.shopping-list li .highlight {
    color: red;
}
ul.shopping-list li .highlight:nth-of-type(odd) {
    color: blue;
}

14.

html:


    Milk
    Sausage

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:

css:

#i-am-useless {
    background-image: url("mypic.jpg");
}

没有引用到的样式所包含的资源是否会被浏览器下载下来？

16.

html:

css:

#test2 {
    background-image: url("mypic.jpg");
    display: none;
}

页面加载的时候，mypic.jpg该图片是否会被下载下来？

17.

html:

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操作符表示仅在媒体查询匹配成功的情况下应用指定样式。可以通过它让选中的样式在老式浏览器中不被应用,防止老旧的浏览器不支持带媒体属性的查询而应用到给定的样式。

云服务器 GPU云服务器基本性能测试基本基本查询基本法则

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/50417.html

CSS 基本测试题

摘要：下面提供了道有关的测试题，大家可以尝试做一下，一些题可以延伸深挖出很多知识点。测试题的答案在尾部。对于这种替换元素，和各方向均有作用。操作符表示仅在媒体查询匹配成功的情况下应用指定样式。下面提供了18道有关css的测试题，大家可以尝试做一下，一些题可以延伸深挖出很多知识点。测试题的答案在尾部。大家可以在评论区进行讨论。 1.css区分大小写吗？ ul { MaRgIn: 1...

ASCH 2019-08-21 11:29 评论0 收藏0
CSS 基本测试题

摘要：下面提供了道有关的测试题，大家可以尝试做一下，一些题可以延伸深挖出很多知识点。测试题的答案在尾部。对于这种替换元素，和各方向均有作用。操作符表示仅在媒体查询匹配成功的情况下应用指定样式。下面提供了18道有关css的测试题，大家可以尝试做一下，一些题可以延伸深挖出很多知识点。测试题的答案在尾部。大家可以在评论区进行讨论。 1.css区分大小写吗？ ul { MaRgIn: 1...

iamyoung001 2019-08-30 15:52 评论0 收藏0
前端—初级阶段2(5-8)

摘要：我们可以设置多个关键帧通过百分比将动画序列分割成多个节点在各节点中分别定义各属性通过将动画应用于相应元素样式属性动画名称持续时长默认是。播放方向测试播放完的状态最后一个关键帧第一个关键帧测试播放状态默认是。内容介绍 CSS选择器(基本、层级、属性、伪类、伪状态) CSS常用样式属性 CSS3 过渡、变换、动画 CSS3 3D场景搭建与应用一、CSS选择器 CSS选择器一共有五种...

Aldous 2019-08-30 15:56 评论0 收藏0
前端—初级阶段2(5-8)

摘要：我们可以设置多个关键帧通过百分比将动画序列分割成多个节点在各节点中分别定义各属性通过将动画应用于相应元素样式属性动画名称持续时长默认是。播放方向测试播放完的状态最后一个关键帧第一个关键帧测试播放状态默认是。内容介绍 CSS选择器(基本、层级、属性、伪类、伪状态) CSS常用样式属性 CSS3 过渡、变换、动画 CSS3 3D场景搭建与应用一、CSS选择器 CSS选择器一共有五种...

qianfeng 2019-08-02 14:28 评论0 收藏0