側(cè)邊欄的固定與自適應(yīng)原來(lái)是這樣實(shí)現(xiàn)的（持續(xù)更新）

sarva 發(fā)布于2019-08-30 14:06 / 1231人閱讀

摘要：規(guī)范文檔，行內(nèi)非替換元素背景高度由字體和字體大小決定的，默認(rèn)處理和行高沒(méi)關(guān)系，不過(guò)這只是瀏覽器現(xiàn)在的處理方法摘自參考。不過(guò)實(shí)際上這個(gè)對(duì)樣式的影響不是很大或者設(shè)置。的值除了也是可以為數(shù)值的。的區(qū)域不會(huì)與重疊。

摘要

剛看了一個(gè)關(guān)于前端面試題的帖子，有些css題雖然能答出來(lái)，但出于學(xué)習(xí)的目的與好奇心，覺(jué)得有必要加深一下對(duì)功能實(shí)現(xiàn)原理的了解。整理出一份文檔，共勉。

正文

行內(nèi)元素的高

眾所周知，行內(nèi)元素是無(wú)法通過(guò)直接設(shè)置height樣式來(lái)設(shè)置高度的，我們常用的方法是設(shè)置 line-height, font-size 來(lái)?yè)胃摺？墒遣恢赖烙褌冇袥](méi)有發(fā)現(xiàn)，比如：

  hello

這段HTML在瀏覽器查看span的高度并不是16px



嘗試設(shè)置行高也無(wú)濟(jì)于事，不過(guò)還是找到了原因所在。W3C規(guī)范文檔，行內(nèi)非替換元素背景高度由字體和字體大小決定的，默認(rèn)處理和行高沒(méi)關(guān)系，不過(guò)這只是瀏覽器現(xiàn)在的處理方法（摘自參考）。不過(guò)實(shí)際上這個(gè)對(duì)樣式的影響不是很大,或者設(shè)置display: inline-block；line-height: 1。

vertical-align屬性的理解


vertical-algin理解
vertical-algin 元素相對(duì)于基線(baseline, 字符的基線要底部偏上一些)的偏移量。vertical-align的值除了baseline, middle也是可以為px數(shù)值的。而那些特殊有意義的單詞也可以理解為對(duì)應(yīng)了相應(yīng)的px值。借用一張表，這里描述的比較詳細(xì)

 下圖栗子

 擴(kuò)展一句：行內(nèi)元素的高 = 行高 + vertical-align**

側(cè)邊欄一邊固定一邊自適應(yīng)的原理（BFC）

頁(yè)面結(jié)構(gòu)

   
   

 .left {
   float: left;
   width: 200px;
   height: 300px;
 }
 .right {
    height: 350px;
    overflow:hidden;
 }
 // 這樣會(huì)得到一個(gè)left浮在right上的布局（下列的特性1）
 // 當(dāng)設(shè)置right的overflow:hidden,則right產(chǎn)生為bfc區(qū)域，left與right就成了并列的布局，且left區(qū)域的寬固定，right會(huì)自適應(yīng)（下列特性2）
主要利用了bfc的兩個(gè)特性:
1、每個(gè)元素的margin box的左邊， 與包含塊border box的左邊相接觸(對(duì)于從左往右的格式化，否則相反)。即使存在浮動(dòng)也是如此。
2、BFC的區(qū)域不會(huì)與float box重疊。