Web前端开发测试题

特别声明:本站已开启付费阅读,年费会员价 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

David Shariff通过网站提供了Web前端开发中CSS、HTML和JavaScript三部分的测试题。到发稿之日共有8320人参与了这个测试,可平均得分是53.8%,这个分数并不能说明什么,我只想以这些题向大家介绍自己对这些题的个人理解。在此要特别感谢@99提供所有试题的翻译,也要非常感谢@民工精髓对JavaScript试题的分析。

CSS

Q1:CSS属性区分大小写吗?
ul {
    MaRGin: 10px;
}
A:NO(不区分)
个人见解

这对于初学者来说,可能会一时拿不定主义,他们区分大小写吗?但话说回来,如果你有使用过DW或者PSD生成的页面,你会发现你的代码中会有很多类似下面这样的代码:

.box {
    BORDER:1PX SOLID RED;
}

但这个样式完全是有效的。不过有一点需要特别注意,如果你的HTML的结构中定义的是大写类名,而在样式中使用的是小写的,那么他们是有区别的。我们来看一个简单的演示示例:

Web前端开发测试题

扩展阅读
Q2:你能给内联元素设置margin-topmargin-bottom吗?
A:No(不能设置)
个人见解

在我接触CSS知识的时候,我就知道margin-topmargin-bottom对于一个内联元素是根不起作用的。简单的理解,margin-top和margin-bottom就是让元素离远离自身顶部和底部的元素。(有关于更多的margin知识介绍,可以看看瑶姐对margin的系列介绍)。不过在此处,我们只是来演示一个示例。

假例我们有一个这样的DEMO:

HTML
<div>
    <span>我是一个行内元素span</span>
    <span>我是一个行内元素span</span>
    <span>我是一个行内元素span</span>
    <strong>我是一个行内元素strong</strong>
    <span>我是一个行内元素span</span>
    <strong>我是一个行内元素strong</strong>
    <span>我是一个行内元素span</span>
    <strong>我是一个行内元素strong</strong>
    <span>我是一个行内元素span</span>
    <strong>我是一个行内元素strong</strong>
    <span>我是一个行内元素span</span>
    <strong>我是一个行内元素strong</strong>
</div>
CSS
div {
  width: 300px;
  margin: 20px auto;
  border: 1px solid green;
  padding: 5px;
  line-height: 1.4;
}
span {
  border: 1px solid blue;
}
strong {
  border: 1px solid orange;
}
span,
strong {
  margin-top: 5px;
  margin-bottom: 5px;
}

margin-topmargin-bottom应用到内联元素上,这在规范中是允许的,不过由于在向一个行内非替换元素(如img)应用外边距,它对行高没有任何影响。由于外边距实际上是透明的,所以这个声明没有任何视觉效果。其原因就在于行内非替换元素的外边距(margin-top和margin-bottom)不会改变一个元素的行高。

我们来演讲一下,增加margin-top和margin-bottom值,对内联元素span和strong是否有所影响:

Web前端开发测试题

效果再次证明,margin-top和margin-bottom对于一个内联元素来说是没有任何影响的。

扩展阅读
Q3:内联元素设置padding-toppadding-bottom会添加到元素的尺寸上吗?
A:NO(不会)
个人见解

对于内联元素,margin和padding存在一个重大的区别。为了说明这一点,我们给行内元素设置一个padding-toppadding-bottom的值,另个给其附上一个背景色,行内元素的背景会向上和向下面延伸。

理论上,对于有背景色和行内距的行内非替换元素,背景可以向元素上面和下面延伸:

strong {
  border: 1px solid orange;
  background: orange;
  padding-top:10px;
  padding-bottom: 10px;
}

当然行高没有改变,不过由于内距确实延伸了背景,所以背景应该可见,是这样吗?不错,背景确实可见,它与前面的行重叠,这正是我们期望的结果。但回到试题上来,padding-toppadding-bottom并没有增加行内元素的尺寸,如背景延伸所示,他们重叠在一起了。

Web前端开发测试题

扩展阅读
Q4:如果你对<p>元素设置字体大小:10 rem, 当用户调整大小/拖浏览器窗口时文本将相应变化大小么?
A:NO(不能)
个人见解

REM是CSS3中新增的一个单位。在W3C官网上是这样描述rem的——“font size of the root element”。也就是说rem是相对于根元素<html>,这样就意味着,我们只需要在根元素确定一个参考值,在根元素中设置多大的字体,这完全可以根据您自己的需求。但他并不能实现,随着浏览器的缩小或放大,而改变元素的字号。他仅能通过修改<html>的字号大小来进行修改。接下来模仿一下这个问题的场景:

html {
    font-size: 16px;
}
p {
    font-size: 2rem;
}

接下来拖动浏览器大小,看其是否会修改p元素的字号:

Web前端开发测试题

扩展阅读
Q5:伪类:checked将选择input控件的单选或复选框,但不会选择
A:False(假的)
个人见解

这一题我也做错了,最初认为:checked是只对单选按钮和复选框有效。回想到HTML中定义了checked属性时,除了可以为单选按钮和复选框之外还可以为select的option设置这样的属性值。其作用表示的是选中。但万万没有想到option也可以通过:checked来设置选中的样式。下面的一段代码是来自于Mozilla:

/* any "checkable" element */
:checked {
  width: 50px;
  height: 50px;
}

/* only radio elements */
  input[type="radio"]:checked {
  margin-left: 25px;
}

/* only checkbox elements */
input[type="checkbox"]:checked {
  display: none;  
}

/* only option elements */
option:che
剩余80%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/css/front-end-web-development-quiz.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部