### 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`等。
* 非替换元素是指内容包含在文档中的元素。例如，如果一个段落的文本内容都放在该元素本身之内，则这个段落就是一个非替换元素。
### 3. Q: 设置`p`的`font-size:10rem`，当用户重置或拖曳浏览器窗口时，文本大小是否会也随着变化？
A: 不会。
`rem`是以`html`根元素中`font-size`的大小为基准的相对度量单位，文本的大小不会随着窗口的大小改变而改变。
### 4. Q列举不同的清除浮动的技巧，并指出它们各自适用的使用场景。
* 直接把`<div style="clear:both;"></div>`放到当作最后一个子标签放到父标签那儿，此方法兼容性强，使用方便，但是浪费了一个标签，而且只能使用一次，而且有时候如果不注意中间多了个空格会产生一段空白高度。
* 优点：通俗易懂，容易掌握；
* 缺点：可以想象通过此方法，会添加多少无意义的空标签，有违结构与表现的分离，在后期维护中将是噩梦。
* 如下:
~~~
.clearfix{overflow:hidden; zoom:1;}
~~~
此方法优点在于代码简洁，涵盖所有浏览器，可是对于`overflow:hidden;`要是里面的元素要是想来个`margin`负值定位或是负的绝对定位，岂不是直接被裁掉了，所以此方法是有不小的局限性的。
* 优点：不存在结构和语义化问题，代码量极少；
* 缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。
* 如下：
~~~
.fix{zoom:1;}
.fix:after{
display:block;
content:'.';
clear:both;
line-height:0;
visibility:hidden;}
~~~
`line-height:0`写成`height:0`也是可以的。不会影响任何其他样式，通用性强，覆盖面广，我很推荐哦。
* 父元素也浮动：
* 优点：不存在结构和语义化问题，代码量极少
* 缺点：使得与父元素相邻的元素的布局会受到影响，不可能一直浮动到body，不推荐使用
总结：
* 其一，通过在浮动元素的末尾添加一个空元素，设置 `clear：both`属性，`after`伪元素其实也是通过 `content` 在元素的后面生成了内容为一个点的块级元素；
* 其二，通过设置父元素 `overflow` 或者`display：table` 属性来闭合浮动，这里的原理涉及到BFC，不再赘述。
### 5.Q:你用过栅格系统吗？如果使用过，你最喜欢哪种？
A：使用过bootstarp。易于上手，学习成本低，还能做出比较大方美观的页面。
### 6.Q: 你用过媒体查询，或针对移动端的布局/CSS 吗？
A:
~~~
@media screen and (min-width:600px) {
nav {
float: left;
width: 25%;
}
section {
margin-left: 25%;
}
}
@media screen and (max-width:599px) {
nav li {
display: inline;
}
}
~~~
可参考：
[CSS媒体查询](https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries)
[使用 CSS 媒体查询创建响应式网站](http://www.ibm.com/developerworks/cn/web/wa-cssqueries/)
### 7. 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。
### 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.shopping-list li .highlight {
color: red;
}
ul.shopping-list li .highlight:nth-of-type(odd) {
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>
~~~
~~~
#awesome .favorite:not(#awesome) .highlight {
color: red;
}
#awesome .highlight:nth-of-type(1):nth-last-of-type(1) {
color: blue;
}
~~~
A: blue。
### 10. Q:`#example`位置如何变化：
~~~
<p id="example">Hello</p>
~~~
~~~
#example {margin-bottom: -5px;}
~~~
A: 向上移动5px。
### 11. Q: `#example`位置如何变化：
~~~
<p id="example">Hello</p>
~~~
~~~
#example {margin-left: -5px;}
~~~
A: 向左移动5px。
### 12. 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。
### 13.浏览器如何渲染，可以查阅如下文章：
[浏览器的渲染原理简介](http://coolshell.cn/articles/9666.html)
[专题：浏览器:渲染重绘、重排两三事](http://developer.51cto.com/art/201311/418133.htm)
[浏览器加载和渲染HTML的顺序以及Gzip的问题](http://www.nowamagic.net/academy/detail/48110160)
[从FE的角度上再看输入url后都发生了什么](http://div.io/topic/609)
### 14.BFC( block formatting contexts ) 块级格式上下文
[深入理解BFC和Margin Collapse](http://www.w3cplus.com/css/understanding-bfc-and-margin-collapse.html)
[CSS布局中一个简单的应用BFC的例子](http://www.aliued.cn/2012/12/31/css%E5%B8%83%E5%B1%80%E4%B8%AD%E4%B8%80%E4%B8%AA%E7%AE%80%E5%8D%95%E7%9A%84%E5%BA%94%E7%94%A8bfc%E7%9A%84%E4%BE%8B%E5%AD%90.html)
[理解BFC(Block Formatting Context)](http://jqc.me/?p=68)
