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

資訊專欄INFORMATION COLUMN

關(guān)于BFC的一些思考

Olivia / 3181人閱讀

摘要：兩個值都是正值，取最大值，都是負值，取最小值，一正一負則相加。使回到正常位置。需要注意的是使用會把放在最前邊。而可以按照，，的順序放置。另外布局也不會出現(xiàn)中間擠掉兩邊的情況。

Question

以下三個div將會會如何放置(margin collapsing)？




    

        

            三個元素的外邊距折疊

同一個BFC中，相鄰的塊狀元素都是垂直放置嗎？

如何清除浮動？根據(jù)什么原理？

如何對左側(cè)欄200px，主內(nèi)容自適應(yīng)進行布局？

如何使用margin完成圣杯布局（左側(cè)x px，右側(cè)y px，中間自適應(yīng)），用flex呢？

Answer

以下三個div將會會如何放置？

在同一個BFC中，相鄰的塊狀
元素會發(fā)生折疊。兩個margin值都是正值，取最大值，都是負值，取最小值，一正一負則相加。那么如題有三個呢，是從父元素往子元素算起，還是子元素往外算起？如果從外往里算，是0，從內(nèi)往外算是-10px。經(jīng)測試，是從內(nèi)往外計算。

live demo

同一個BFC中，相鄰的塊狀元素都是垂直放置嗎？

不一定，設(shè)置writing-mode值。查看以下Demo。

live demo

如何清除浮動？根據(jù)什么原理？

緊挨的塊級元素設(shè)置clear both來清除浮動，一般 會通過:after清除浮動。如Bootstrap的clearfix。

.clearfix {
    display: table;
    content: " ";
    clear: both
}

使父級元素觸發(fā)一個新的BFC，如overfow:hidden或者display:table。

live demo

如何對左側(cè)欄200px，主內(nèi)容自適應(yīng)進行布局？

左欄設(shè)置200px的寬，設(shè)置浮動，主內(nèi)容設(shè)置overflow:hidden觸發(fā)一個BFC。因為BFC不會與浮動折疊，所以右側(cè)會自適應(yīng)。

live demo

如何使用margin完成圣杯布局（左側(cè)x px，右側(cè)y px，中間自適應(yīng)），用flex呢？

圣杯布局大致結(jié)構(gòu)如下

步驟如下：

.container設(shè)置內(nèi)邊距，留出放置左右固定寬度側(cè)欄的寬度。設(shè)置min-width:x px（content-box）下，如果.left寬度大于父元素content-box的寬度，自己會被擠下去。

.main，.left，.right設(shè)置浮動，.main設(shè)置100%的寬度。.main位置固定。

.left設(shè)置x px寬度，設(shè)置margin-left為-100%，此時與.main左上角重合，設(shè)置position:relative，left設(shè)為-x px或者right設(shè)置x px，.left位置固定。

.right設(shè)置y px寬度，把margin-left設(shè)為-y px，此時與.main右上角重合，相對定位回到自己的位置。(或者margin-right小于等于-y px，最后不用定位，查看margin demo2)。

footer設(shè)置clear:both清除浮動，或者container設(shè)置為display:table或者overflow:hidden閉合浮動。使.footer回到正常位置。

另外有flex布局就簡單多了。需要注意的是使用margin會把.main放在最前邊。而flex可以按照.left，.main，.right的順序放置。另外flex布局也不會出現(xiàn)中間擠掉兩邊的情況。

margin demo1
margin demo2
flex demo

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

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

相關(guān)文章

  • 細說 CSS margin

    摘要：給父元素設(shè)置了一個灰色背景，并且沒有設(shè)置高度，因此高度會隨著內(nèi)容而擴展，設(shè)置為。這個元素的位置如下圖所示因為元素清除了左浮動，所以元素下移。由于這條規(guī)則的存在，導致他們折疊后的不能跟的進行折疊，因此的高度被撐開。 作者：https://coding.net/u/zhengkenghong原文：https://blog.coding.net/blog/css-margin 本文著重描述關(guān)...

    tianren124 評論0 收藏0

  • BFC的一些探究

    摘要：它是用于決定盒子的布局及浮動相互影響范圍的一個區(qū)域。小白反思如果世界的運行都有自我運行的一套機制，那么的世界必然有自己的一套規(guī)則。外邊距合并當時在回答外邊距的問題時，總結(jié)出了合并的一條規(guī)則必須相鄰。 最初的夢 了解BFC后，能夠更深入的明白外邊距合并原理。了解BFC后，能夠更深入的明白浮動的行為。了解BFC后，知識就是你的，總不會吃虧對吧？哈哈 之前有兩篇文章《行內(nèi)元素的一些探索》、《...

    curlyCheng 評論0 收藏0

  • css進階

    摘要：柵格系統(tǒng)用于處理頁面多終端適配的問題。它表示抓取對象以后拖放到另一個位置。目前，它是標準的一部分。精簡高效的命名準則方法這篇文章發(fā)布于年月日，星期日，，歸類于相關(guān)。但是不會受到包含塊的限制，可能會溢出。 一勞永逸的搞定 flex 布局 尋根溯源話布局 一切都始于這樣一個問題：怎樣通過 CSS 簡單而優(yōu)雅的實現(xiàn)水平、垂直同時居中。記得剛開始學習 CSS 的時候，看到 float 屬性不由...

    import. 評論0 收藏0

  • 前端經(jīng)典文章

    摘要：上周末看這篇文章時，偶有靈光，所以，分享出來給大家一起看看前端面試四月二十家前端面試題分享請各位讀者添加一下作者的微信公眾號，以后有新的文章，將在微信公眾號直接推送給各位，非常感謝。 前端切圖神器 avocode 有了這個神器，切圖再也腰不酸，腿不疼了。 這一次，徹底弄懂 JavaScript 執(zhí)行機制 本文的目的就是要保證你徹底弄懂javascript的執(zhí)行機制，如果讀完本文還不懂，...

    lowett 評論0 收藏0

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

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

    Java_oldboy 評論0 收藏0

發(fā)表評論

0條評論

Olivia

男|高級講師

TA的文章

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