01 什么是盒模型，IE 盒模型和W3C盒模型有什么區(qū)別?
- IE盒模型：width:=content的寬度+padding的寬度+border的寬度
- W3C盒模型：width=content的寬度
當我們設(shè)置好width的值后，再增加padding或者border的時候，IE盒會通過壓縮content 的寬度來增加pading或者borderd的的寬度；而對于W3C盒并不會這樣，它是直接在contentde 寬度外面加上pading或者borderd的的寬度；
02 CSS 的屬性box-sizing有什么值？分別有什么作用?
content-box:寬度和高度分別應用到元素的內(nèi)容框。在寬度和高度之外繪制元素的內(nèi)邊距和邊框(元素默認效果)。
border-box:元素指定的任何內(nèi)邊距和邊框都將在已設(shè)定的寬度和高度內(nèi)進行繪制。
03 line-height: 2和line-height: 200%有什么區(qū)別?
- 它們的line-height值都是當前元素font-size值得2倍，主要區(qū)別在于對子元素繼承的影響。
解析：
line-height的值可以分為兩類：
1）不帶單位的（如line-height:2），推薦使用。
當line-height的值為 2時，后代元素會繼承2這個值，而不是繼承父元素的計算后的值；
如下圖中，子元素1的line-height是繼承父元素1的line-height：2；然后通過計算2*30px=60px，而不是繼承父元素1經(jīng)過計算的line-height40px。
2）帶單位的（如line-heigth:20px/2em/200%）
當line-height的值為200%/2em/20px,其后代元素的line-height會繼承該父元素line-height經(jīng)過計算的具體值，而不是200%/2em/20px。
如下圖中，子元素2的line-height就是繼承父元素的line-height經(jīng)過計算的值，200%*20px=40px
Demo：
http://js.jirengu.com/vugaliyite/1/edit?html,css,output
04 inline-block有什么特性？如何去除縫隙？高度不一樣的inline-block元素如何頂端對齊?
- 既呈現(xiàn)inline特性（不占據(jù)一整行，寬度由內(nèi)容寬度決定），又呈現(xiàn)block特性（可設(shè)置寬高，內(nèi)外邊距）
- 行內(nèi)元素換行以及他們之間的空格符會導致兩個行內(nèi)元素之間產(chǎn)生縫隙。解決辦法不換行，或者在他們外面包裹一個元素，并設(shè)置font-size:0；然后再重新設(shè)置行內(nèi)元素的font-size。
- 行內(nèi)元素對齊默認是以里面內(nèi)容的底部對齊，可以通過設(shè)置vertical-align：top（bottom、middle等）進行更改對齊方式（在表格中使用尤為明顯）
1.top
使元素及其后代元素的頂部與整行的頂部對齊。
2.bottom
使元素及其后代元素的底部與整行的底部對齊。
3.middle
使元素的中部與父元素的基線加上父元素x-height（譯注：x高度）的一半對齊。
注意 vertical-align 只對行內(nèi)元素、表格單元格元素生效：不能用它垂直對齊塊級元素。
05 讓一個元素"看不見"有幾種方式？有什么區(qū)別?
- display: none;
給元素設(shè)置display: none;后，元素會從頁面中徹底消失，它原本占據(jù)的空間會被其他元素占有，會造成瀏覽器的回流與重繪。
- visibility: hidden;
給元素設(shè)置visibility: hidden;后，元素會從頁面中消失，它原本占據(jù)的空間會被保留，會造成瀏覽器的重繪，適用于希望元素隱藏又不影響頁面布局的場景。
- opacity: 0;
給元素設(shè)置opacity: 0;后，元素變成透明的我們?nèi)庋劬涂床坏搅耍栽菊紦?jù)的空間還在。
- background-color:transparent;
設(shè)置透明色。
06 其他可能遇到的問題
（1） inline-block 導致父元素增高若干像素
- 給 inline-block 元素設(shè)置 vertical-align: top
.item {
vertical-align: top;
display: inline-block;
...
}
- 通用解決辦法 不要設(shè)置 inline-block，使用 float 或 flex。
（2） outline 問題
- 如果你看到被選中的
<a> <input> <button>周圍有一圈黃或藍色的外框，就是 outline 了，可以通過設(shè)置outline: 0或outline: none去除。
