这里是 Front End Web Development Quiz 中的 CSS部分问题与解答.

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

    1. ul {
    2.   MaRGin: 10px;
    3. }

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

  3. 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

  1. 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
  2. Q: 设置p的font-size:10rem，当用户重置或拖曳浏览器窗口时，文本大小是否会也随着变化？
    A: 不会。
    rem是以html根元素中font-size的大小为基准的相对度量单位，文本的大小不会随着窗口的大小改变而改变。

  3. Q: 伪类选择器:checked将作用与input类型为radio或者checkbox,不会作用于option。
    A: 不对。
    伪类选择器checked的定义很明显:

    The :checked CSS pseudo-class selector represents any radio (<input type="radio">), checkbox (<input type="checkbox">) or option (<option>in a <select>) 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.

  4. Q: 在HTML文本中，伪类:root总是指向html元素？
    A: 不是（答案中给出了是 ==||）。以下摘自知乎:root 与 html 在 CSS3 中指的是同一个元素吗？的答案：

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

  1. data:application/xhtml+xml,<div xmlns="http://www.w3.org/1999/xhtml"><style>:root { background: green; } html { background: red !important; }</style></div>
  1. Q:translate()方法能移动一个元素在z轴上的位置？
    A: 不能。translate()方法只能改变x轴，y轴上的位移。

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

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

  3. A: blue。

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

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

  5. A: blue。

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

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

  7. A: blue。

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

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

  9. A: blue。

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

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

  11. A: blue。

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

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

  13. A: blue。

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

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

  15. A: blue。

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

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

  17. A: 向上移动5px。

  18. Q: #example位置如何变化：

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

  19. A: 向左移动5px。

  20. #i-am-useless 会被浏览器加载吗？

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

  21. A: 不会

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

    1. <div id="test1">
    2. <span id="test2"></span>
    3. </div>
    1. #test2 {
    2. background-image: url('mypic.jpg');
    3. display: none;
    4. }

  23. A: 会被下载。

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

    1. <div id="test1">
    2. <span id="test2"></span>
    3. </div>
    1. #test1 {
    2. display: none;
    3. }
    4. #test2 {
    5. background-image: url('mypic.jpg');
    6. visibility: hidden;
    7. }

  25. A: 不会被下载。

  26. Q: only 选择器的作用是？

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

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

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

    1. <div>
    2. <p>I am floated</p>
    3. <p>So am I</p>
    4. </div>
    1. div {overflow: hidden;}
    2. p {float: left;}

  29. A：会形成。
    会触发BFC的条件有：

    • float的值不为none。
    • overflow的值不为visible。
    • display的值为table-cell, table-caption, inline-block 中的任何一个。
    • position的值不为relative 和static。

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

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

  31. A: 浏览器视窗

知识点总结

tips:根据以上考点总结下如下知识点，后期会写文章进行总结，这里只挑出重点进行解析。

  • 关于CSS选择器以及优先级的知识可查阅如下文章：

  • 如何计算优先级：

    那么你如何计算指定选择器的优先级？如果你考虑到将优先级表示为用逗号隔开的四个数字就会相当简单，比如：1, 1, 1, 1 或0, 2, 0, 1

    • 第一个数字(a)通常就是0，除非在标签上使用style属性；
    • 第二个数字(b)是该选择器上的id的数量的总和；
    • 第三个数字(c)是用在该选择器上的其它属性选择器和伪类的总和。这里包括class (.example) 和属性选择器(比如 li[id=red])；
    • 第四个数字(d)计算元素(就像table、p、div等等)和伪元素(就像:first-line等)；
    • 通用选择器(*)是0优先级；
    • 如果两个选择器有同样的优先级，在样式表中后面的那个起作用。
  • 浏览器CSS匹配顺序：
    浏览器CSS匹配不是从左到右进行查找，而是从右到左进行查找。比如#divBox p span.red{color:red;}，浏览器的查找顺序如下：先查找html中所有class=’red’的span元素，找到后，再查找其父辈元素中是否有p元素，再判断p的父元素中是否有id为divBox的div元素，如果都存在则匹配上。浏览器从右到左进行查找的好处是为了尽早过滤掉一些无关的样式规则和元素。
  • display:none 和visibilty:hidden的区别：
    可参考：
    • What is the difference between visibility:hidden and display:none?
    • display:none和visibility:hidden的区别！

      display:none和visibility:hidden都是把网页上某个元素隐藏起来的功能，但两者有所区别，经过亲自实验，我发现使用` visibility:hidden属性会使对象不可见，但该对象在网页所占的空间没有改变（看不见但摸得到），等于留出了一块空白区域，而display:none属性会使这个对象彻底消失（看不见也摸不到） display:none means that the the tag in question will not appear on the page at all (although you can still interact with it through the dom). There will be no space allocated for it between the other tags. visibility:hidden means that unlike display:none, the tag is not visible, but space is allocated for it on the page. so for example:

  1. <span>test</span> | <span>Appropriate style in this tag</span> | <span>test</span>

display:none would be: test | | test visibility:hidden would be: test | | test In visibility:hidden the tag is rendered, it just isn’t seen on the page.

CSS3特性

常用有下面

  • 圆角（border-radius）
  • 阴影（box-shadow）
  • 过渡效果（transition）
  • 翻转（transform）
  • 动画（animation）
  • 媒体查询（@media）
  • 弹性盒子（flex）

HTML5特性

tml5新增了一些语义化更好的标签元素。

结构元素

  1. article元素，表示页面中的一块与上下文不相关的独立内容，比如博客中的一篇文章。
  2. aside元素，表示article内容之外的内容，辅助信息。
  3. header元素，表示页面中一个内容区块或整个页面的页眉。
  4. hgroup元素，用于对页面中一个区块或整个页面的标题进行组合。
  5. footer元素，表示页面中一个内容区块或整个页面的页脚。
  6. figure元素，表示媒介内容的分组，以及它们的标题。
  7. section元素，表示页面中一个内容区块，比如章节。

  8. nav元素，表示页面中的导航链接。

    其他元素

  9. video元素，用来定义视频。

  10. audio元素，用来定义音频。
  11. canvas元素，用来展示图形，该元素本身没有行为，仅提供一块画布。
  12. embed元素，用来插入各种多媒体，格式可以是Midi、Wav、AIFF、AU、MP3等。
  13. mark元素，用来展示高亮的文字。
  14. progress元素，用来展示任何类型的任务的进度。
  15. meter元素，表示度量衡，定义预定义范围内的度量。
  16. time元素，用来展示日期或者时间。
  17. command元素，表示命令按钮。
  18. details元素，用来展示用户要求得到并且可以得到的细节信息。
  19. summary元素，用来为details元素定义可见的标题。
  20. datalist元素，用来展示可选的数据列表，与input元素配合使用，可以制作出输入值的下拉列表。
  21. datagrid元素，也用来展示可选的数据列表，以树形列表的形式来显示。
  22. keygen元素，表示生成密匙。
  23. output元素，表示不同类型的输出。
  24. source元素，为媒介元素定义媒介资源。
  25. menu元素，表示菜单列表。
  26. ruby元素，表示ruby注释， rt元素表示字符的解释或发音。 rp元素在ruby注释中使用，以定义不支持ruby元素的浏览器所显示的内容。
  27. wbr元素，表示软换行。与br元素的区别是：br元素表示此处必须换行，而wbr元素的意思是浏览器窗口或父级元素的宽度够宽时。不进行换行，而当宽度不够时，主动在此处进行换行。
  28. bdi元素，定义文本的文本方向，使其脱离其周围文本的方向设置。
  29. dialog元素，表示对话框或窗口。