成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

sarva / 1245人閱讀

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

摘要

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

正文

行內(nèi)元素的高

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



  hello



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




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

vertical-align屬性的理解


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



 下圖栗子

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

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

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



   

   




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


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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/115770.html

相關(guān)文章

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

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

    張金寶 評論0 收藏0

  • CSS布局十八般武藝都在這里了

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

    includecmath 評論0 收藏0

  • 純CSS實現(xiàn)側(cè)邊欄/分欄高度自動相等

    摘要：一為何要分欄高度一致分欄高度一致的目的是更加美觀。二純實現(xiàn)側(cè)邊欄分欄高度自動相等這里直接介紹我認(rèn)為的最佳的側(cè)邊欄分欄高度自動相等方法。 一、為何要分欄高度一致？分欄高度一致的目的是更加美觀。舉兩個例子吧。 ① 對于分欄布局，我們或許會用邊框(border)進(jìn)行分隔，就如鄙人博客的分欄：邊框分欄 張鑫旭-鑫空間-鑫生活 此時最擔(dān)心的問題就是高度不一致，尤其是無邊框?qū)傩缘姆謾诟叨瘸^有邊框...

    li21 評論0 收藏0

  • CSS入門指南-4：頁面布局

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

    ethernet 評論0 收藏0

  • CSS入門指南-4：頁面布局

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

    Stardustsky 評論0 收藏0

發(fā)表評論

0條評論

sarva

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<