側邊欄的固定與自適應原來是這樣實現的（持續更新）

sarva 發布于2019-08-30 14:06 / 1238人閱讀

摘要：規范文檔，行內非替換元素背景高度由字體和字體大小決定的，默認處理和行高沒關系，不過這只是瀏覽器現在的處理方法摘自參考。不過實際上這個對樣式的影響不是很大或者設置。的值除了也是可以為數值的。的區域不會與重疊。

摘要

剛看了一個關于前端面試題的帖子，有些css題雖然能答出來，但出于學習的目的與好奇心，覺得有必要加深一下對功能實現原理的了解。整理出一份文檔，共勉。

正文

行內元素的高

眾所周知，行內元素是無法通過直接設置height樣式來設置高度的，我們常用的方法是設置 line-height, font-size 來撐高。可是不知道道友們有沒有發現，比如：


  hello

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

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

vertical-align屬性的理解

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

下圖栗子

擴展一句：行內元素的高 = 行高 + vertical-align**

側邊欄一邊固定一邊自適應的原理（BFC）

頁面結構

 .left {
   float: left;
   width: 200px;
   height: 300px;
 }
 .right {
    height: 350px;
    overflow:hidden;
 }
 // 這樣會得到一個left浮在right上的布局（下列的特性1）
 // 當設置right的overflow:hidden,則right產生為bfc區域，left與right就成了并列的布局，且left區域的寬固定，right會自適應（下列特性2）

主要利用了bfc的兩個特性:
1、每個元素的margin box的左邊，與包含塊border box的左邊相接觸(對于從左往右的格式化，否則相反)。即使存在浮動也是如此。
2、BFC的區域不會與float box重疊。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/115770.html

側邊欄的固定與自適應原來是這樣實現的（持續更新）

摘要：規范文檔，行內非替換元素背景高度由字體和字體大小決定的，默認處理和行高沒關系，不過這只是瀏覽器現在的處理方法摘自參考。不過實際上這個對樣式的影響不是很大或者設置。的值除了也是可以為數值的。的區域不會與重疊。摘要剛看了一個關于前端面試題的帖子，有些css題雖然能答出來，但出于學習的目的與好奇心，覺得有必要加深一下對功能實現原理的了解。整理出一份文檔，共勉。正文行內元素的高 ...

張金寶 2019-08-01 18:39 評論0 收藏0
CSS布局十八般武藝都在這里了

摘要：清單一些說明注意文檔的書寫順序，先寫兩側欄，再寫主面板，更換后則側欄會被擠到下一列圣杯布局和雙飛翼布局都會用到。可以通過設置的屬性或使用雙飛翼布局避免問題。雙飛翼布局不用設置相對布局，以及對應的和值。本文首發于知乎專欄：前端指南 CSS布局布局是CSS中一個重要部分，本文總結了CSS布局中的常用技巧，包括常用的水平居中、垂直居中方法，以及單列布局、多列布局的多種實現方式（包括傳統的...

includecmath 2019-08-29 12:17 評論0 收藏0
純CSS實現側邊欄/分欄高度自動相等

摘要：一為何要分欄高度一致分欄高度一致的目的是更加美觀。二純實現側邊欄分欄高度自動相等這里直接介紹我認為的最佳的側邊欄分欄高度自動相等方法。一、為何要分欄高度一致？分欄高度一致的目的是更加美觀。舉兩個例子吧。 ① 對于分欄布局，我們或許會用邊框(border)進行分隔，就如鄙人博客的分欄：邊框分欄張鑫旭-鑫空間-鑫生活此時最擔心的問題就是高度不一致，尤其是無邊框屬性的分欄高度超過有邊框...

li21 2019-08-29 12:43 評論0 收藏0
CSS入門指南-4：頁面布局

摘要：屬性是中最重要的用于控制布局的屬性。布局的高度多數情況下，布局中結構化元素乃至任何元素的高度是不必設定的。更新效果如圖以上措施使布局有了明顯改觀。這是《CSS設計指南》的讀書筆記，用于加深學習效果。 display 屬性 display是 CSS 中最重要的用于控制布局的屬性。每個元素都有一個默認的 display 值。對于大多數元素它們的默認值通常是 block 或 inline ...

ethernet 2019-08-02 15:57 評論0 收藏0
CSS入門指南-4：頁面布局

摘要：屬性是中最重要的用于控制布局的屬性。布局的高度多數情況下，布局中結構化元素乃至任何元素的高度是不必設定的。更新效果如圖以上措施使布局有了明顯改觀。這是《CSS設計指南》的讀書筆記，用于加深學習效果。 display 屬性 display是 CSS 中最重要的用于控制布局的屬性。每個元素都有一個默認的 display 值。對于大多數元素它們的默認值通常是 block 或 inline ...

Stardustsky 2019-08-29 13:08 評論0 收藏0