資訊專欄INFORMATION COLUMN
摘要：兩個(gè)值都是正值，取最大值，都是負(fù)值，取最小值，一正一負(fù)則相加。使回到正常位置。需要注意的是使用會(huì)把放在最前邊。而可以按照，，的順序放置。另外布局也不會(huì)出現(xiàn)中間擠掉兩邊的情況。
Question
以下三個(gè)div將會(huì)會(huì)如何放置(margin collapsing)？
三個(gè)元素的外邊距折疊
同一個(gè)BFC中，相鄰的塊狀元素都是垂直放置嗎？
如何清除浮動(dòng)？根據(jù)什么原理？
如何對(duì)左側(cè)欄200px，主內(nèi)容自適應(yīng)進(jìn)行布局？
如何使用margin完成圣杯布局（左側(cè)x px，右側(cè)y px，中間自適應(yīng)），用flex呢？
Answer
以下三個(gè)div將會(huì)會(huì)如何放置？
在同一個(gè)BFC中，相鄰的塊狀
元素會(huì)發(fā)生折疊。兩個(gè)margin值都是正值，取最大值，都是負(fù)值，取最小值，一正一負(fù)則相加。那么如題有三個(gè)呢，是從父元素往子元素算起，還是子元素往外算起？如果從外往里算，是0，從內(nèi)往外算是-10px。經(jīng)測(cè)試，是從內(nèi)往外計(jì)算。
live demo
同一個(gè)BFC中，相鄰的塊狀元素都是垂直放置嗎？
不一定，設(shè)置writing-mode值。查看以下Demo。
live demo
如何清除浮動(dòng)？根據(jù)什么原理？
緊挨的塊級(jí)元素設(shè)置clear both來(lái)清除浮動(dòng)，一般 會(huì)通過(guò):after清除浮動(dòng)。如Bootstrap的clearfix。
.clearfix {
display: table;
content: " ";
clear: both
}
使父級(jí)元素觸發(fā)一個(gè)新的BFC，如overfow:hidden或者display:table。
live demo
如何對(duì)左側(cè)欄200px，主內(nèi)容自適應(yīng)進(jìn)行布局？
左欄設(shè)置200px的寬，設(shè)置浮動(dòng)，主內(nèi)容設(shè)置overflow:hidden觸發(fā)一個(gè)BFC。因?yàn)锽FC不會(huì)與浮動(dòng)折疊，所以右側(cè)會(huì)自適應(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的寬度，自己會(huì)被擠下去。
.main，.left，.right設(shè)置浮動(dòng)，.main設(shè)置100%的寬度。.main位置固定。
.left設(shè)置x px寬度，設(shè)置margin-left為-100%，此時(shí)與.main左上角重合，設(shè)置position:relative，left設(shè)為-x px或者right設(shè)置x px，.left位置固定。
.right設(shè)置y px寬度，把margin-left設(shè)為-y px，此時(shí)與.main右上角重合，相對(duì)定位回到自己的位置。(或者margin-right小于等于-y px，最后不用定位，查看margin demo2)。
footer設(shè)置clear:both清除浮動(dòng)，或者container設(shè)置為display:table或者overflow:hidden閉合浮動(dòng)。使.footer回到正常位置。
另外有flex布局就簡(jiǎn)單多了。需要注意的是使用margin會(huì)把.main放在最前邊。而flex可以按照.left，.main，.right的順序放置。另外flex布局也不會(huì)出現(xiàn)中間擠掉兩邊的情況。
margin demo1
margin demo2
flex demo
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/115107.html
摘要：給父元素設(shè)置了一個(gè)灰色背景，并且沒(méi)有設(shè)置高度，因此高度會(huì)隨著內(nèi)容而擴(kuò)展，設(shè)置為。這個(gè)元素的位置如下圖所示因?yàn)樵厍宄俗蟾?dòng)，所以元素下移。由于這條規(guī)則的存在，導(dǎo)致他們折疊后的不能跟的進(jìn)行折疊，因此的高度被撐開(kāi)。 作者：https://coding.net/u/zhengkenghong原文：https://blog.coding.net/blog/css-margin 本文著重描述關(guān)...
摘要：它是用于決定盒子的布局及浮動(dòng)相互影響范圍的一個(gè)區(qū)域。小白反思如果世界的運(yùn)行都有自我運(yùn)行的一套機(jī)制，那么的世界必然有自己的一套規(guī)則。外邊距合并當(dāng)時(shí)在回答外邊距的問(wèn)題時(shí)，總結(jié)出了合并的一條規(guī)則必須相鄰。 最初的夢(mèng) 了解BFC后，能夠更深入的明白外邊距合并原理。了解BFC后，能夠更深入的明白浮動(dòng)的行為。了解BFC后，知識(shí)就是你的，總不會(huì)吃虧對(duì)吧？哈哈 之前有兩篇文章《行內(nèi)元素的一些探索》、《...
摘要：柵格系統(tǒng)用于處理頁(yè)面多終端適配的問(wèn)題。它表示抓取對(duì)象以后拖放到另一個(gè)位置。目前，它是標(biāo)準(zhǔn)的一部分。精簡(jiǎn)高效的命名準(zhǔn)則方法這篇文章發(fā)布于年月日，星期日，，歸類于相關(guān)。但是不會(huì)受到包含塊的限制，可能會(huì)溢出。 一勞永逸的搞定 flex 布局 尋根溯源話布局 一切都始于這樣一個(gè)問(wèn)題：怎樣通過(guò) CSS 簡(jiǎn)單而優(yōu)雅的實(shí)現(xiàn)水平、垂直同時(shí)居中。記得剛開(kāi)始學(xué)習(xí) CSS 的時(shí)候，看到 float 屬性不由...
摘要：上周末看這篇文章時(shí)，偶有靈光，所以，分享出來(lái)給大家一起看看前端面試四月二十家前端面試題分享請(qǐng)各位讀者添加一下作者的微信公眾號(hào)，以后有新的文章，將在微信公眾號(hào)直接推送給各位，非常感謝。 前端切圖神器 avocode 有了這個(gè)神器，切圖再也腰不酸，腿不疼了。 這一次，徹底弄懂 JavaScript 執(zhí)行機(jī)制 本文的目的就是要保證你徹底弄懂javascript的執(zhí)行機(jī)制，如果讀完本文還不懂，...
摘要：關(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ō)的...
閱讀 2112·2023-04-26 00:16
閱讀 3555·2021-11-15 11:38
閱讀 3235·2019-08-30 12:50
閱讀 3242·2019-08-29 13:59
閱讀 805·2019-08-29 13:54
閱讀 2594·2019-08-29 13:42
閱讀 3377·2019-08-26 11:45
閱讀 2247·2019-08-26 11:36
