国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

關(guān)于BFC的一些應(yīng)用

CntChen / 2609人閱讀

摘要：關(guān)于的概念性介紹就不贅述了，網(wǎng)上有很多關(guān)于此的介紹，后面也羅列了些個人認(rèn)為很不錯的文摘。那今天要說的是關(guān)于它的一些技巧性應(yīng)用，通過示范比較常會接觸到的排版布局方面的需求來說明下。對于結(jié)構(gòu)有一點(diǎn)要求，觸發(fā)的元素必須位于最后一位。

關(guān)于Block Formatting Context(BFC)的概念性介紹就不贅述了，網(wǎng)上有很多關(guān)于此的介紹，后面也羅列了些個人認(rèn)為很不錯的文摘。

那今天要說的是關(guān)于它的一些技巧性應(yīng)用，通過示范比較常會接觸到的排版布局方面的需求來說明下。

BFC實(shí)例 左中右布局的自動擴(kuò)容

這是一個比較常見的布局需求，如下，這是一個表單里面的其中一行，想下怎么排呢？

好了，這時候需求有變動了，還需要增加些東西，就變成了這樣：

唔，這會看到后面發(fā)現(xiàn)，還有這樣子的：

雖然，有其他辦法來實(shí)現(xiàn)這樣的效果，那是否有更輕巧的實(shí)現(xiàn)方式呢？那就是BFC啦，通過BFC可以實(shí)現(xiàn)自動擴(kuò)容的效果，就是你怎么加都行（點(diǎn)這里看線上例子）。

復(fù)雜背景下的目錄線實(shí)現(xiàn)

這個，看著是不是特別的熟悉：

這種類word的目錄結(jié)構(gòu)，腦海里已經(jīng)將它切好了。按照通常的做法是，背景純色背景，那標(biāo)題文字直接應(yīng)用同色背景即可，簡單快捷方便。

不過，看到下面的是不是要悲劇了，點(diǎn)這里可以看線上的：

這種就不單單只是填個背景了~~你想到什么更好的辦法來處理了嗎？

這里拋出多一個問題，直接上圖，看下面的圖：

有沒注意到后面多出來的類橙色的一截，這截東西是什么？（Chrome下可以inspect到，F(xiàn)irefox沒有）

這個多余的東西加上線的長度就等于父級的寬度（這個線沒有設(shè)置width，且為block level的元素）

這是在《CSS權(quán)威指南》一書，第7章節(jié)水平格式化這一小節(jié)的時候了解到的。

潛在問題

不是所有東西都是完美的，BFC也不例外，在提供了輕巧靈活的排版布局的同時，也帶了較大的潛在問題，那就是overflow了，都知道這個屬性的副作用，超出范圍裁減，也就是實(shí)現(xiàn)BFC的時候，要考慮到如果有絕對定位或者需要通過偏移調(diào)整位置實(shí)現(xiàn)特殊效果的需求，那么這會個很頭疼的問題。

對于結(jié)構(gòu)有一點(diǎn)要求，觸發(fā)的元素必須位于最后一位。

參考鏈接

前端精選文摘：BFC 神奇背后的原理

深入理解BFC和Margin Collapse

那些年我們一起清除過的浮動

什么是BFC

說說標(biāo)準(zhǔn)

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/49685.html

相關(guān)文章

  • 關(guān)于BFC的一些應(yīng)用

    摘要：關(guān)于的概念性介紹就不贅述了，網(wǎng)上有很多關(guān)于此的介紹，后面也羅列了些個人認(rèn)為很不錯的文摘。那今天要說的是關(guān)于它的一些技巧性應(yīng)用，通過示范比較常會接觸到的排版布局方面的需求來說明下。對于結(jié)構(gòu)有一點(diǎn)要求，觸發(fā)的元素必須位于最后一位。 關(guān)于Block Formatting Context(BFC)的概念性介紹就不贅述了，網(wǎng)上有很多關(guān)于此的介紹，后面也羅列了些個人認(rèn)為很不錯的文摘。 那今天要說的...

    Java_oldboy 評論0 收藏0

  • 關(guān)于CSS里BFC特性的理解和應(yīng)用

    摘要：它是頁面中的一塊渲染區(qū)域，并且有一套渲染規(guī)則，它決定了其子元素將如何定位，以及和其他元素的關(guān)系和相互作用。而，塊級格式化上下文，就是一個塊級元素的渲染顯示規(guī)則。定位和清除浮動的樣式規(guī)則只適用于處于同一塊格式化上下文內(nèi)的元素。 什么是BFC（Block Formatting Context） Formatting context(格式化上下文) 是 W3C CSS2.1 規(guī)范中的一個概念...

    shixinzhang 評論0 收藏0

  • 關(guān)于CSS里BFC特性的理解和應(yīng)用

    摘要：它是頁面中的一塊渲染區(qū)域，并且有一套渲染規(guī)則，它決定了其子元素將如何定位，以及和其他元素的關(guān)系和相互作用。而，塊級格式化上下文，就是一個塊級元素的渲染顯示規(guī)則。定位和清除浮動的樣式規(guī)則只適用于處于同一塊格式化上下文內(nèi)的元素。 什么是BFC（Block Formatting Context） Formatting context(格式化上下文) 是 W3C CSS2.1 規(guī)范中的一個概念...

    vspiders 評論0 收藏0

  • CSS: 潛藏著的BFC

    摘要：而就潛藏在其中，當(dāng)你修改樣式時，一不小心就能觸發(fā)它而毫無察覺，因此沒有意識到的神奇之處。實(shí)例解決侵占浮動元素的問題我們知道浮動元素會脫離文檔流，然后浮蓋在文檔流元素上。 在寫樣式時，往往是添加了一個樣式，又或者是修改了某個屬性，就達(dá)到了我們的預(yù)期。而BFC就潛藏在其中，當(dāng)你修改樣式時，一不小心就能觸發(fā)它而毫無察覺，因此沒有意識到BFC的神奇之處。 一、什么是BFC（Block Form...

    learn_shifeng 評論0 收藏0

發(fā)表評論

0條評論

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