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

資訊專欄INFORMATION COLUMN

關于BFC的一些應用

Java_oldboy / 2428人閱讀

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

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

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

BFC實例 左中右布局的自動擴容

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

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

唔，這會看到后面發現，還有這樣子的：

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

復雜背景下的目錄線實現

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

這種類word的目錄結構，腦海里已經將它切好了。按照通常的做法是，背景純色背景，那標題文字直接應用同色背景即可，簡單快捷方便。

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

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

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

有沒注意到后面多出來的類橙色的一截，這截東西是什么？（Chrome下可以inspect到，Firefox沒有）

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

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

潛在問題

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

對于結構有一點要求，觸發的元素必須位于最后一位。

參考鏈接

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

深入理解BFC和Margin Collapse

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

什么是BFC

說說標準

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

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

相關文章

  • 關于BFC的一些應用

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

    CntChen 評論0 收藏0

  • 關于CSS里BFC特性的理解和應用

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

    shixinzhang 評論0 收藏0

  • 關于CSS里BFC特性的理解和應用

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

    vspiders 評論0 收藏0

  • CSS: 潛藏著的BFC

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

    learn_shifeng 評論0 收藏0

發表評論

0條評論

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