1. 瀏覽器是如何解析css璧微？
從左往右進(jìn)行解析的邑雅，從而提高解析效率
2. float 高度塌陷 (父元素為0, 子元素?zé)o法撐開父元素)嗦玖？
原因：當(dāng)元素設(shè)置浮動(dòng)后患雇，會(huì)自動(dòng)脫離文檔流
解決辦法：清除浮動(dòng)
[注] 清除浮動(dòng)的方法：
- 給父元素也添加 float
- 給父元素一個(gè)固定高度
- 給父元素的偽類設(shè)置
content:" ";
clear:both;/*清除浮動(dòng)*/
display:block;/*確保該元素是一個(gè)塊級(jí)元素*/
- 給父元素添加 overflow：hidden
3. display:inline-block 有縫隙？
原因：兩個(gè)內(nèi)聯(lián)元素之間有一定的空隙宇挫，如 換行符苛吱、制表符（tab）、空格等字符引起的
解決辦法：
- 不換行
- 設(shè)置其父容器的font-size為0器瘪，再設(shè)置內(nèi)聯(lián)元素的字體大小翠储。
- 添加注釋
- 設(shè)置 float:left，但是要清除浮動(dòng)
4. 多行文本垂直居中
<div class="span_box bg_box">
<span class="words_span">
方法一：父元素使用display:table和子元素使用display:table-cell
屬性來(lái)模擬表格橡疼，子元素設(shè)置vertical-align:middle即可垂直居中
</span>
</div>
方法一：父元素使用display:table和子元素使用display:table-cell屬性來(lái)模擬表格
子元素設(shè)置vertical-align:middle即可垂直居中
.bg_box {
width: 300px;
height: 300px;
margin-top: 20px;
background-color: #BBBBBB;
}
/*方法一*/
.span_box {
display: table;
}
.words_span {
display: table-cell;
vertical-align: middle;
}
方法二：對(duì)子元素設(shè)置display:inline-block屬性援所，使其轉(zhuǎn)化成行內(nèi)塊元素，模擬成單行文本衰齐。父元素設(shè)置對(duì)應(yīng)的height和line-height。對(duì)子元素設(shè)置vertical-align:middle屬性继阻，使其基線對(duì)齊耻涛。添加line-height屬性，覆蓋繼承自父元素的行高瘟檩。缺點(diǎn)：文本的高度不能超過(guò)外部盒子的高度抹缕。
<div class="p_box bg_box">
<p class="words_p">
方法二：對(duì)子元素設(shè)置display:inline-block屬性，使其轉(zhuǎn)化成行內(nèi)塊元素墨辛，模擬成單行文本卓研。父元素設(shè)置對(duì)應(yīng)的height和line-height。對(duì)子元素設(shè)置vertical-align:middle屬性，使其基線對(duì)齊奏赘。添加line-height屬性寥闪，覆蓋繼承自父元素的行高。缺點(diǎn)：文本的高度不能超過(guò)外部盒子的高度磨淌。
</p>
</div>
.bg_box {
width: 300px;
height: 300px;
margin-top: 20px;
background-color: #BBBBBB;
}
/*方法二*/
.p_box {
line-height: 300px;
}
.words_p {
display: inline-block;
line-height: 20px; /*單獨(dú)給子元素設(shè)置行高疲憋，覆蓋父級(jí)元素的行高*/
vertical-align: middle; /*基線居中對(duì)齊*/
}
方法三：脫離文檔流的居中方式，把內(nèi)部div設(shè)置寬高之后梁只，再設(shè)置top為50%缚柳，使用負(fù)邊距調(diào)整，將margin-top設(shè)置為負(fù)的高度的一半就可以垂直居中了搪锣。缺點(diǎn)：需要計(jì)算出多行文字固定的高度。高度一旦改變，負(fù)邊距也要調(diào)整搪搏。
<div class="wrapper bg_box">
<div class="content_box">
方法三：脫離文檔流的居中方式架诞，把內(nèi)部div設(shè)置寬高之后，再設(shè)置top為50%旁壮，使用負(fù)邊距調(diào)整监嗜，將margin-top設(shè)置為負(fù)的高度的一半就可以垂直居中了。缺點(diǎn)：需要計(jì)算出多行文字固定的高度抡谐。高度一旦改變裁奇，負(fù)邊距也要調(diào)整。</div>
</div>
.bg_box {
width: 300px;
height: 300px;
margin-top: 20px;
background-color: #BBBBBB;
}
/*方法三*/
.wrapper {
position: relative;
overflow: hidden;
}
.content_box {
position: absolute;
top: 50%;
width: 300px;
height: 127px; /*本頁(yè)面中這么多文字的高度麦撵，文本篇幅改變刽肠，高度也會(huì)變*/
margin-top: -63.5px; /*height的一半*/
}
5. px em rem 的區(qū)別？
px：相對(duì)于顯示器屏幕分辨率而言
em：繼承父元素的 font-size 大小
rem：繼承 html 根元素的 font-size 大小
6. px 與 rem 的選擇免胃？
- 對(duì)于只需要適配少部分手機(jī)設(shè)備音五，且分辨率對(duì)頁(yè)面影響不大的，使用px即可
- 對(duì)于需要適配各種移動(dòng)設(shè)備羔沙，使用rem躺涝，例如只需要適配iPhone和iPad等分辨率差別比較挺大的設(shè)備。
