### 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)
