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

資訊專欄INFORMATION COLUMN

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

Java_oldboy / 2436人閱讀

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

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

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

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

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

好了，這時(shí)候需求有變動(dòng)了，還需要增加些東西，就變成了這樣：

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

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

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

這個(gè)，看著是不是特別的熟悉：

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

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

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

這里拋出多一個(gè)問(wèn)題，直接上圖，看下面的圖：

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

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

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

潛在問(wèn)題

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

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

參考鏈接

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

深入理解BFC和Margin Collapse

那些年我們一起清除過(guò)的浮動(dòng)

什么是BFC

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

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

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

相關(guān)文章

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

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

    CntChen 評(píng)論0 收藏0

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

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

    shixinzhang 評(píng)論0 收藏0

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

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

    vspiders 評(píng)論0 收藏0

  • CSS: 潛藏著的BFC

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

    learn_shifeng 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<