搜索

首页  >  文章  >  web前端  >  web前端笔试题库之CSS篇

web前端笔试题库之CSS篇

WBOY
WBOY转载
2022-04-21 14:33:543548浏览

之前的文章《web前端笔试题库之HTML篇》中，我们分享了一些关于HTML的前端面试题。下面本篇文章就接着上一篇，分享css部分的笔试题（附答案），大家快看看能答对几个！

web前端笔试题库之CSS篇

1、Q: CSS 属性是否区分大小写？

 ```
 ul {
     MaRGin: 10px;
 }
 ```

A: 不区分。 HTML，CSS都对大小写不敏感，但为了更好的可读性和团队协作一般都小写，而在XHTML 中元素名称和属性是必须小写的。

2、Q: 行内(inline)元素 设置margin-top和margin-bottom 是否起作用？

A: 不起作用。(答案是起作用，个人觉得不对。)

html 里的元素分为替换元素（replaced element）和非替换元素（non-replaced element）。

  • 替换元素是指用作为其他内容占位符的一个元素。最典型的就是img，它只是指向一个图像文件。以及大多数表单元素也是替换，例如input等。

  • 非替换元素是指内容包含在文档中的元素。例如，如果一个段落的文本内容都放在该元素本身之内，则这个段落就是一个非替换元素。

讨论margin-top和margin-bottom对行内元素是否起作用，则要对行内替换元素和行内非替换元素分别讨论。

首先我们应该明确外边距可以应用到行内元素，规范中是允许的，不过由于在向一个行内非替换元素应用外边距，对行高(line-height)没有任何影响。由于外边距实际上是透明的。所以对声明margin-top和margin-bottom没有任何视觉效果。其原因就在于行内非替换元素的外边距不会改变一个元素的行高。而对于行内非替换元素的左右边距则不是这样，是有影响的。

而为替换元素设置的外边距会影响行高，可能会使行高增加或减少，这取决于上下外边距的值。行内替换元素的左右边距与非替换元素的左右边距的作用一样。来看看demo:

http://codepen.io/paddingme/pen/JwCDF

3、Q: 对内联元素设置padding-top和padding-bottom是否会增加它的高度？

（原题是Does setting padding-top and padding-bottom on an inline element add to its dimensions?）

A: 答案是不会。同上题比较纠结，不太明白这里的 dimensions指的是到底是什么意思？放置一边，咱们来分析下。对于行内元素，设置左右内边距，左右内边距将是可见的。而设置上下内边距，设置背景颜色后可以看见内边距区域有增加，对于行内非替换元素，不会影响其行高，不会撑开父元素。而对于替换元素，则撑开了父元素。看下demo，更好的理解下：

http://codepen.io/paddingme/pen/CnFpa

4、Q: 设置p的font-size:10rem，当用户重置或拖曳浏览器窗口时，文本大小是否会也随着变化？

A: 不会。

rem是以html根元素中font-size的大小为基准的相对度量单位，文本的大小不会随着窗口的大小改变而改变。

5、Q: 伪类选择器:checked将作用与input类型为radio或者checkbox,不会作用于option。

A: 不对。

伪类选择器checked的定义很明显:

The :checked CSS pseudo-class selector represents any radio (5531b4c9ceb3f990b641fa70a3e40caa), checkbox (514d05be645eb7d51e331036aaf6fa36) or option (5a07473c87748fb1bf73f23d45547ab8in a 221f08282418e2996498697df914ce4e) element that is checked or toggled to an on state. The user can change this state by clicking on the element, or selecting a different value, in which case the :checked pseudo-class no longer applies to this element, but will to the relevant one.

6、Q: 在HTML文本中，伪类:root总是指向html元素？

A: 不是（答案中给出了是 ==||）。以下摘自知乎:root 与 html 在 CSS3 中指的是同一个元素吗？的答案：

单指创建的根。这个根可能不是 html ，如果是片段html，没有创建根，则为片段的根。把这下面 URL 打到支持 data URL 的瀏覽器看看（Firefox, Chrome, Safari, Opera），可见一斑：

data:application/xhtml+xml,<div xmlns="http://www.w3.org/1999/xhtml"><style>:root { background: green; } html { background: red !important; }</style></div>

7、Q:translate()方法能移动一个元素在z轴上的位置？

A: 不能。translate()方法只能改变x轴，y轴上的位移。

8、Q: 如下代码中文本“Sausage”的颜色是?

<ul class="shopping-list" id="awesome">
    <li><span>Milk</span></li>
    <li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
</ul>
ul {color:red;}
li {color:blue;}

A: blue。

9、Q: 如下代码中文本“Sausage”的颜色是?

<ul class="shopping-list" id="awesome">
    <li><span>Milk</span></li>
    <li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
</ul>
ul {color:red;}
#must-buy {color:blue;}

A: blue。

10、Q: 如下代码中文本“Sausage”的颜色是?

<ul class="shopping-list" id="awesome">
    <li><span>Milk</span></li>
    <li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
</ul>
.shopping-list .favorite {
    color: red;
}
#must-buy {
    color: blue;
}

A: blue。

11、Q: 如下代码中文本“Sausage”的颜色是?

<ul class="shopping-list" id="awesome">
    <li><span>Milk</span></li>
    <li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
</ul>
ul#awesome {
    color: red;
}
ul.shopping-list li.favorite span {
    color: blue;
}

A: blue。

12、Q: 如下代码中文本“Sausage”的颜色是?

<ul class="shopping-list" id="awesome">
    <li><span>Milk</span></li>
    <li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
</ul>
ul#awesome #must-buy {
    color: red;
}
.favorite span {
    color: blue!important;
}

A: blue。

13、Q: 如下代码中文本“Sausage”的颜色是?

<ul class="shopping-list" id="awesome">
    <li><span>Milk</span></li>
    <li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
</ul>
ul.shopping-list li .highlight {
    color: red;
}
ul.shopping-list li .highlight:nth-of-type(odd) {
    color: blue;
}

A: blue。

14、Q: 如下代码中文本“Sausage”的颜色是?

<ul class="shopping-list" id="awesome">
    <li><span>Milk</span></li>
    <li class="favorite" id="must-buy"><span class="highlight">Sausage</span></li>
</ul>
#awesome .favorite:not(#awesome) .highlight {
    color: red;
}
#awesome .highlight:nth-of-type(1):nth-last-of-type(1) {
    color: blue;
}

A: blue。

15、Q:#example位置如何变化：

<p id="example">Hello</p>
#example {margin-bottom: -5px;}

A: 向上移动5px。

16、Q: #example位置如何变化：

<p id="example">Hello</p>
#example {margin-left: -5px;}

A: 向左移动5px。

17、#i-am-useless 会被浏览器加载吗？

<div id="test1">
    <span id="test2"></span>
</div>
#i-am-useless {background-image: url(&#39;mypic.jpg&#39;);}

A: 不会

18、mypic.jpg 会被浏览器加载吗？

<div id="test1">
    <span id="test2"></span>
</div>
#test2 {
    background-image: url(&#39;mypic.jpg&#39;);
    display: none;
}

A: 会被下载。

19、mypic.jpg 会被浏览器加载吗？

<div id="test1">
    <span id="test2"></span>
</div>
#test1 {
    display: none;
}
#test2 {
    background-image: url(&#39;mypic.jpg&#39;);
    visibility: hidden;
}

A: 不会被下载。

20、Q: only 选择器的作用是？

@media only screen and (max-width: 1024px) {argin: 0;}

A：停止旧版本浏览器解析选择器的其余部分。

only 用来定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器。其实only很多时候是用来对那些不支持Media Query 但却支持Media Type 的设备隐藏样式表的。其主要有：支持媒体特性（Media Queries）的设备，正常调用样式，此时就当only 不存在；对于不支持媒体特性(Media Queries)但又支持媒体类型(Media Type)的设备，这样就会不读了样式，因为其先读only 而不是screen；另外不支持Media Qqueries 的浏览器，不论是否支持only，样式都不会被采用。

21、Q:overfloa:hidden 是否形成新的块级格式化上下文？

<div>
    <p>I am floated</p>
    <p>So am I</p>
</div>
div {overflow: hidden;}
p {float: left;}

A：会形成。

会触发BFC的条件有：

  • float的值不为none。

  • overflow的值不为visible。

  • display的值为table-cell, table-caption, inline-block 中的任何一个。

  • position的值不为relative 和static。

22、Q: screen关键词是指设备物理屏幕的大小还是指浏览器的视窗？

@media only screen and (max-width: 1024px) {margin: 0;}

A: 浏览器视窗

（学习视频分享：css视频教程）

以上是web前端笔试题库之CSS篇的详细内容。更多信息请关注PHP中文网其他相关文章！

firefox css chrome safari css3 html xhtml Static Float select checkbox class this 选择器 样式表 外边距 内边距 display position overflow margin padding 伪类 input table http
声明：
本文转载于：github.io。如有侵权，请联系admin@php.cn删除
上一篇：关于 CSS 变量的一些你可能不了解的事！下一篇：手把手带你使用CSS绘制一个可爱卡通狮子动画

相关文章

查看更多