1、簡述一下CSS盒模型
當對一個文檔佈局的時候，瀏覽器渲染引擎會將所有的元素表示爲一個矩形盒子，這個矩形盒子就是盒模型。如下圖所示：
1-1、盒模型
盒模型分爲標準盒模型和IE盒模型；
標準盒模型：標準盒模型主要由以下4部分組成，包含margin、border、padding和content；
IE盒模型：IE盒模型主要由以下2部分組成，包含margin和content；在IE盒模型中，元素的content值包含了元素的border值和padding值。
1-2、元素的寬高值的計算
在一個盒模型中，元素的實際寬高值不包含margin值；如果我們計算一個元素的佔位寬高值，則應該包含margin值；如果計算一個元素的實際寬高值，則不包含margin值。在IE盒模型中，元素的實際width值就是內容的width值。實際的計算如下：
- 標準盒模型佔位寬高值的計算：
元素的佔位width值 = margin * 2 + border * 2 + padding * 2 + content[設置的元素的width值]
元素的佔位height值 = margin * 2 + border * 2 + padding * 2 + content[設置的元素的height值]
- IE盒模型的佔位寬高值的計算：
元素的佔位width值 = margin * 2 + content[包含元素的border值和padding值]
元素的佔位height值 = margin * 2 + content[包含元素的border值和padding值]
1-3、盒模型中margin、border、padding的取值
margin可以爲負值，也可以設置爲百分比，設置百分比時參考的是當前元素的父元素，而不是元素自身設置。
padding不可以設置負值，可以設置百分比，設置百分比時參考的是當前元素的父元素，而不是元素自身設置。
border取值必須是實際的值，不能是百分比。
2、box-sizing的取值有哪些？區別是什麼？
box-sizing屬性用於更改計算元素寬高的默認的CSS盒子模型；它的取值有5個：content-box、border-box、inherit、initial、unset；實際應用中，用的比較多的兩個屬性值就是content-box和border-box。
2-1、屬性出現的背景
在CSS中，爲一個元素的設置寬高屬性值時，只會應用到這個元素的內容區域。如果這個元素設置了padding值和border值，繪製到屏幕上的盒子的寬度和高度值就會加上設置的padding值和border值，瀏覽器就需要去重新計算盒子的寬高值，這種設置非常不利於響應式佈局。
2-2、content-box和border-box的區別
1> content-box
默認值。內容區域的寬高值不包含元素的padding和border值，也就是說：假如我們給元素設置了一個width值爲50px，那麼這個元素的內容區域的width值就是50px；元素設置的padding值和border值不包含在這個設置的width中。【content-box就相當於是標準盒模型。】
2>、border-box
內容區域的寬高值包含元素的padding和border值，也就是說：假如我們給元素設置了一個width值爲50px，那麼這個元素的內容區域的width值小於等於50px；元素設置的padding值和border值會包含在這個設置的width值50px中。【border-box就相當於是IE盒模型】
3、CSS隱藏元素的方式有哪些？區別是什麼？
3-1、opacity
用法：opacity: 0;
說明：
該屬性的意思是檢索或設置對象的透明度；
當opacity的值爲0時，元素在視覺上消失了，但是它仍然佔據這那個位置，並且會對頁面佈局起作用；
3-2、display
用法：display: none;
說明：
該屬性設置爲none時，會將元素直接從文檔中刪除；不利於SEO；
使用該屬性設置元素的隱藏，不佔頁面空間，對頁面佈局沒有影響；
3-3、visibility
用法：visibility: hidden;
說明：
該屬性只是將元素隱藏，不會將元素從文檔中移除；
隱藏的元素仍然佔據位置，會影響頁面佈局；
該屬性會繼承，如果父元素使用了該屬性，子元素也會被隱藏；
3-4、position
用法：position:absolute;left: -10000px;
說明：
使用了定位方式的元素，只要將元素的4個方向的值設置足夠大，超出瀏覽器的可視區域範圍，元素就會處於隱藏狀態；
4、簡單說一下CSS元素分類：塊元素和行內元素
4-1、CSS元素主要分爲塊級元素和行內元素
塊級元素：div dl dd dt h1~h6 header footer form ul ol li hr p table
行內元素： a img em strong i label input textarea select sub sup b
4-2、塊狀元素和內聯元素的區別
塊級元素是其他元素的容器，可以容納內聯元素和其他塊狀元素，可以爲其設置寬高值
內聯元素只能容納文本和其他內聯元素，不能設置寬高值
4-3、塊級元素和內聯元素可以通過display屬性來轉換
1> 將一個塊級元素的`display`屬性設置爲<font color="red">inline</font>，塊級元素就被轉換成了內聯元素；
2> 將一個內聯元素的`display`屬性設置爲<font color="red">block</font>，內聯元素就被轉換成了塊級元素；
3> 將元素的`display`屬性的值設置爲<font color="blue">inline-block</font>，也可以爲元素設置寬高值；但是該值<b>不支持IE6/7</b>
5、CSS清除浮動的幾種方式
浮動的認識：https://blog.csdn.net/mengStudents/article/details/84893505
5-1、使用空標籤清除浮動
在浮動元素的後邊添加空標籤<br/>可以清除浮動，使用這個方式清除浮動時，要將其高度設置爲0；（這是W3C標準推薦使用的做法:會增加無意義的標籤）
<div style="float:left;"></div><br style="clear:all;"/>
5-2、在浮動元素之後添加一個空元素來清除浮動
<div style="float:left;"></div>
<div style="clear:both;"></div>
這種方式不兼容IE6，在IE6下，會將小於19px的元素的高度都默認設置爲19px，解決方法如下：
.clear{
height:0;
font-size:0;//使用這種方式設置之後，仍然存在2px的偏差
clear:both;
}
5-3、給浮動元素的父級添加屬性-overflow:hidden
使用這種方式清除浮動，需要配合zoom屬性一起使用，只有設置了zoom屬性，纔會觸發IE瀏覽器的haslayout
父元素{
overflow:hidden/auto;
zoom:1;
}
注意：
在IE6/7下，浮動元素的父級有高度，就不需要清除浮動;
在IE6/7下，兩個元素並在同一行，需要給兩個元素都加浮動
5-4、給父元素添加浮動：不推薦使用
5-5、給父元素添加屬性
display:inline-block;
5-6、定義一個單獨的類清除浮動
.clear{
zoom:1;//兼容IE6
}
.clear:after{
display:block;
content:"";
clear:both;
height:0;
}
6、CSS元素居中
參考：https://blog.csdn.net/mengStudents/article/details/76222838
7、寫出IE6 bug的幾種解決方式
7-1、常見的普通兼容性問題
1>、問題描述
在IE6下，如果希望兩個塊級元素並列排在一行，需要給兩個元素都添加浮動樣式；如果給一個元素添加了浮動樣式，另一個元素通過margin值來設置，在IE6下會存在3px的偏差；
解決辦法：給兩個塊級元素都添加浮動
2>、元素嵌套問題
P標籤嵌套h3標籤，將P元素設置寬高後，會出現兩個塊狀元素
解決辦法：注意元素的嵌套問題
3>、IE6最小高度問題：
當一個元素的高度小於IE6的最小高度19px時，會默認將元素的最小高度設置爲19px;
解決辦法：使用overflow:hidden;來設置使用font-size:0;來設置
4>、margin值傳遞：
在任何瀏覽器下，子元素的margin值會傳遞的父元素的margin值
在標準瀏覽器下，父級或子級浮動都不會出現問題
解決辦法：在使用overflow:hidden;時，在標準瀏覽器下顯示正確，IE6下不起作用（沒有觸發IE6的haslayout）；在IE6下，需要結合zoom:1，一起使用，zoom用來觸發IE6的haslayout
5>、問題描述
在IE6下，父級有邊框，子元素的margin值會消失
解決方式：觸發父元素的haslayout，即添加zoom:1
6>、a標籤僞類：
在IE6瀏覽器下，只支持a標籤的僞類；標準瀏覽器下支持所有標籤的hover類
解決方式：使用JS中的onmouseover方法實現hover僞類
7-2、float浮動出現的bug
1>、IE6下的雙邊距bug
當IE6下的塊元素同時設置浮動和橫向margin值時，塊元素會存在雙邊距bug，這時橫向margin值就會被放大爲兩倍；
當有多個塊元素浮動時，設置margin-left時，左邊第一個會有雙邊距；設置margin-right時，右邊第一個會有雙邊距
解決辦法：使用display:inline;來實現
2>、IE6下的li問題
在IE6、7下，li元素本身不浮動，li下的子元素浮動，那麼li就會產生間隙
解決辦法：
a、給li添加浮動、設置li的寬度
b、給li添加vertical-align：top
3>、在IE6下，當元素的最小高度和li的間隙共同存在時，需要給li元素同時添加浮動和overflow屬性
4>、給添加浮動的多個DIV添加margin值時（上下左右都設置），在IE6下，下margin值會消失
原因：當一行子元素佔有的寬度之和與父元素的寬度值相差超過3px時，或者不滿一行時，最後一行的下margin值就會失效，目前這種bug沒有解決方案
5>、IE6下的文字溢出bug
當子元素與父元素的寬度差值小於3px時，文字就會溢出，兩個元素都是浮動元素
溢出情況：兩個浮動元素中間有註釋或者內嵌元素時的出現
解決辦法：父元素的寬度大於子元素的寬度，且寬度差值大於3px；在兩個浮動元素中間添加塊元素
6>、浮動和定位
當浮動元素和絕對定位元素是並列關係時，在IE6下絕對定位元素會消失
解決辦法：給絕對定位元素添加父元素包裹起來
7-3、定位問題
1>、相對定位問題
在IE6、7下，當子元素有相對定位時，父級的overflow:hidden;包不住子級的高度
解決辦法：給父級添加相對定位
2>、絕對定位問題
在IE6下，絕對定位元素的父級寬高爲奇數時，right和bottom屬性有1px的偏差
3>、固定定位
固定定位在IE6下不兼容
7-4、IE6中的邊框問題
IE6不支持1px的點線，支持2px及以上的點線邊框
需要點線邊框時，利用背景圖來實現
7-5、透明度兼容性
標準瀏覽器下，使用opacity設置透明度
IE6 7 8下，透明度的設置：filter：alpha(opacity=50)；
7-6、表單兼容性
1>、input標籤
在IE6 7下，輸入類型的表單控件上有1px的間隙
解決方法：給input添加浮動
2>、 input下的圖片背景問題
在IE6 7下，背景圖片會隨着文字的輸入而發生移動
解決辦法：給父級添加背景，且父級的寬度與子級的寬度一致，清除本身的背景色
3>、border問題
在IE6 7下設置border:none;無效，
解決辦法：給input重新添加背景
7-7、圖片格式問題
1>、gif：背景圖片全透明部分可以顯示，半透明部分會失效
2>、jpg：jpg格式的圖片顯示出來是不透明的
3>、png8：與gif合適的圖片一樣
4>、png24：全透明和半透明效果都會保留
注意：png格式的圖片在IE6下不支持
解決方法：
引入script庫：DD_belatedPNG_0.0.8a.js
在IE6下可以使得瀏覽器兼容png圖片,調用.fix方法：DD_belatedPNG.fix(".類名")
7-8、CSS hack
IE代碼解析：<!--[if IE 8]--><[endif]-->給瀏覽器添加特殊標識，限定當前CSS樣式只能在某些瀏覽器下被解析
* + 表示被IE7以下的IE瀏覽器解析
\9：IE10以下的瀏覽器解析
_：下劃線表示IE6之前的瀏覽器解析
谷歌瀏覽器的CSS hack:@media screen and (-webkit-min-device-pixel-ratio:0){.box{color:red;}}
7-9、important
修飾CSS樣式，提升樣式的優先級，添加important的CSS樣式的優先級最高，大於行內樣式
但是在IE6下，在important樣式後邊添加一條同樣的樣式之後，這個樣式會失效，會按照原來默認的優先級設置樣式
7-10、margin值的設置
在使用margin賦值時，如果使用負值設置，在IE6下超出父級的部分會被父級隱藏
解決方法：給子元素添加position：relative;
7-11、IE的haslayout
當元素本身有高度時，就會觸發IE瀏覽器的haslayout
7-12、IE及標準瀏覽器中的div居中問題
標準瀏覽器中設置margin:0 auto可以設置元素居中，在IE中，不起作用
標準瀏覽器中設置text-align:center;可以設置文本居中，但是在IE瀏覽器中，他會默認一切居中，包括標籤
在IE中，如果不想設置其他元素的文本居中，在可以在父級設置text-align:left;就可以恢復爲默認屬性，其他瀏覽器不會受影響
7-13、margin值
外邊距會出現上下疊壓；
父子級嵌套問題：自己的margin會傳遞給父級，一般使用padding值來替代margin值
8、CSS 選擇符有哪些？哪些屬性可以繼承？優先級算法如何計算？ CSS3新增僞類有那些？CSS3有哪些新特性？
9、CSS僞類和僞元素
參考：https://blog.csdn.net/mengStudents/article/details/85267678