1. 文字的高度由什么決定揭糕？
(1) 對(duì)于文字赚导，字是基于基線對(duì)齊尚粘；
(2) 不同的字體的話(huà)字體設(shè)計(jì)師可能會(huì)給出不同的建議行高（默認(rèn)行高）蝗蛙；
(3) 文字的高度由字體大小和默認(rèn)行高決定蝇庭。
2. div 的高度由什么決定？
(1) 當(dāng)在 div 里只有內(nèi)聯(lián)元素時(shí)歼郭，div 的高度由文字的行高決定，與文字大小無(wú)關(guān)
- 單行文字辐棒，div 的高度由文字的行高決定病曾；
- 多行文字，div 的高度由每行文字行高相加漾根；
(2) 當(dāng) div 內(nèi)既有內(nèi)聯(lián)元素又有塊級(jí)元素時(shí)泰涂，div 的高度由其內(nèi)部文檔流中元素高度總和決定。
3. 文檔流
(1) 內(nèi)聯(lián)元素從左到右依次排列辐怕，空間不夠則換行繼續(xù)從左到右排列逼蒙；
(2) 塊級(jí)元素從上到下依次排列，每個(gè)塊級(jí)元素占一行寄疏；
(3) 脫離文檔流是牢，元素脫離文檔流之后，將不再在文檔流中占據(jù)空間陕截，算高度時(shí)無(wú)需計(jì)算上驳棱。以下方法會(huì)造成脫離文檔流
float // 其他盒子會(huì)無(wú)視這個(gè)元素，但盒子內(nèi)的文本依然會(huì)為這個(gè)元素讓出位置农曲，環(huán)繞在該元素的周?chē)?position: absolute; // 相對(duì)于該元素的父元素進(jìn)行定位社搅；
position: fixed; // 完全脫離文檔流，相對(duì)于瀏覽器窗口進(jìn)行定位。
position: relative; // 半（未）脫離文檔流形葬，相對(duì)于自身本來(lái)位置移動(dòng)合呐，但是仍在自身位置占位。
4. 不同字?jǐn)?shù)的中文對(duì)齊
(1) 如何讓 姓名 與 聯(lián)系方式 對(duì)齊---使用偽元素
<span>姓名</span>
<span>聯(lián)系方式</span>
span{
border: 1px solid red;
width: 5em;
display: inline-block;
text-align: justify; // 在多行文本時(shí)笙以，可使每行文本左右對(duì)齊
line-height: 20px;
overflow: hidden;
height: 20px;
}
span::after{
content: '';
display: inline-block;
width: 100%;
border: 1px solid yellow;
}
// 用偽元素將 span 撐到相同寬度以后再將偽元素隱藏
5. 文字溢出省略
(1) 單行文本
div {
border: 1px solid red; // border 調(diào)試大法
white-space: nowrap; // 控制 div 內(nèi)文本不分行淌实，超出部分往右顯示，div 寬度不會(huì)變
overflow: hidden; // 將超出部分隱藏
text-overflow: ellipsis; // 將隱藏部分變?yōu)?...
}
(2) 多行文本--- 谷歌 css multi line text ellipsis
div{
border: 1px solid red;
display: -webkit-box;
-webkit-line-clamp: 2; // 第二行 ...
-webkit-box-orient: vertical;
overflow: hidden;
}
// webkit 支持大量的 CSS 擴(kuò)展源织，這種 CSS屬性前綴為 -wekit- （試驗(yàn)性屬性）
6.margin 合并
(1) 若 parent 沒(méi)有 border翩伪，則 child 的上下 margin 會(huì)被合并，左右還是會(huì)把 parent 撐開(kāi)谈息。加 border缘屹、padding、overflow: hidden;(不推薦)侠仇、outline等可以阻止 margin 合并
<div class="parent">
<div class="child">111</div>
</div>
(2) span 元素轻姿，margin 和 padding 只有左右有效。
