資訊專(zhuān)欄INFORMATION COLUMN
摘要：之后仔細(xì)的百度了一下，發(fā)現(xiàn)了這么一個(gè)叫做內(nèi)外補(bǔ)丁負(fù)值法的東西。在這個(gè)解決方案中，又涉及到了傳說(shuō)中的負(fù)。深入研究之后又發(fā)現(xiàn)了圣杯布局雙飛翼布局等很多示例，確實(shí)要好好研究負(fù)邊距這個(gè)東西了。相關(guān)推薦那些年，奇妙的圣杯與雙飛翼，還有負(fù)邊距
2015-04-22 時(shí)候?qū)懙睦衔模驗(yàn)橄Ｍ盟阅昧顺鰜?lái)。
那天被一個(gè)同學(xué)問(wèn)了一個(gè)問(wèn)題，三列的div，要求父div的高度和三個(gè)div的高度都和三個(gè)中字?jǐn)?shù)最多，也就是高度最高的那個(gè)一樣高。試了試才發(fā)現(xiàn)確實(shí)有問(wèn)題。在網(wǎng)上查到了解決方案，運(yùn)用了一些很奇葩的代碼，貼上來(lái)和大家分享。點(diǎn)擊這里查看demo。
之后仔細(xì)的百度了一下，發(fā)現(xiàn)了這么一個(gè)叫做內(nèi)外補(bǔ)丁負(fù)值法的東西。不過(guò)百度內(nèi)外補(bǔ)丁負(fù)值法，出來(lái)的都是同一篇文章，感覺(jué)不是一個(gè)真正的術(shù)語(yǔ)。還是把這篇文章貼出來(lái)，有興趣的同學(xué)可以看看。
在這個(gè)解決方案中，又涉及到了傳說(shuō)中的負(fù)margin。之前在阿里筆試也有一個(gè)三欄布局的題，其中一個(gè)解決方案用的也是左右的負(fù)margin。深入研究之后又發(fā)現(xiàn)了圣杯布局、雙飛翼布局等很多示例，確實(shí)要好好研究負(fù)邊距這個(gè)東西了。
之后參考了CSS布局奇淫巧計(jì)之-強(qiáng)大的負(fù)邊距這篇文章，里面做了實(shí)際的demo，總結(jié)成一點(diǎn)就是，css中盒子真正的邊界，是由margin決定的，而且margin可以很霸氣的通過(guò)負(fù)值來(lái)壓縮實(shí)際寬度（padding不允許負(fù)值）。
有了這一點(diǎn)認(rèn)識(shí)之后，很多問(wèn)題都解決了。就比如說(shuō)上邊那個(gè)demo，通過(guò)padding-bottom:10000px;創(chuàng)建了一個(gè)足夠高的盒子，再通過(guò)margin-bottom:-10000px;抵消這部分盒子在文檔流中的實(shí)際占位（但是實(shí)際還是存在的，所以就會(huì)按照第一個(gè)的高度等高），再給父級(jí)元素加上overflow:hidden，去掉多余的高度，效果就實(shí)現(xiàn)了。
同時(shí)，在上邊那篇文章里還解決了一個(gè)布局的問(wèn)題，就是多列間有margin，但是兩邊沒(méi)margin的問(wèn)題（聽(tīng)不懂我中文的直接點(diǎn)這里看demo吧，我知道自己說(shuō)的不好）。之前一直是循環(huán)到一行最后一個(gè)的時(shí)候給加上一個(gè)class，現(xiàn)在可以免了，就比如我在demo里用margin-right:10px;給li之間創(chuàng)建一個(gè)間隔，然后用marigin-rignt:-10px;強(qiáng)行加寬ul，使四個(gè)li能在一行，但是ul外content的寬度設(shè)為width:830px;(4200px+310px;)，這樣就可以正確的居中了。
之后簡(jiǎn)單說(shuō)下圣杯布局和雙飛翼布局吧，他們主要是為了解決三欄問(wèn)題。三欄問(wèn)題的研究可以看看張?chǎng)涡窭蠋煹牟┛臀恼挛沂熘娜N三欄網(wǎng)頁(yè)自適應(yīng)的布局方法。然后以雙飛翼舉例吧，他的DOM結(jié)構(gòu)是這樣的。
把main放在最前面，然后對(duì).sub（也就是left）使用margin-left:100%;強(qiáng)行移動(dòng)到左邊；對(duì).extra（也就是right）使用margin-left:(right的寬度);強(qiáng)行移動(dòng)到右邊。由于右邊的欄會(huì)蓋住main的內(nèi)容，所有就直接給main里加上子div，通過(guò)給子div加上margin-right防止重疊保證正常顯示。如此煞費(fèi)苦心的布局目的只有一個(gè)，就是讓瀏覽器先渲染main，實(shí)現(xiàn)主內(nèi)容先被加載的效果。圣杯布局的話(huà)，印象中就是把.main-content的margin換成了.main的padding，目的都是一樣的。
再多說(shuō)一點(diǎn)關(guān)于三欄布局的東西，就是在利用浮動(dòng)布局來(lái)實(shí)現(xiàn)三欄的時(shí)候，應(yīng)該記住，在DOM里的順序，是左浮動(dòng)的div最前，右浮動(dòng)的div中間，中間的在最后，不然就會(huì)出問(wèn)題。千萬(wàn)不要想當(dāng)然覺(jué)得中間的div在DOM的中間，然后兩邊div分別float。因?yàn)橹虚g的div默認(rèn)要占一行，按理說(shuō)右邊的會(huì)先被擠下去，再float，所以他就上不來(lái)了，實(shí)現(xiàn)不了我們想要的效果。如果沒(méi)有把中間的div放到第一個(gè)位置的需求的話(huà)，還是建議用浮動(dòng)的方法做三欄布局，簡(jiǎn)單易用成本低。
自此也算是總結(jié)了負(fù)邊距的一些效果，有時(shí)候想想的話(huà)，要是pading支持負(fù)值的話(huà)又會(huì)有什么樣的奇怪方案出現(xiàn)呢？
== 2015-11-27更新 ==
今天見(jiàn)到了一個(gè)奇怪的面試題，用三個(gè)div實(shí)現(xiàn)一條彩虹，同樣使用了負(fù)邊距。
相關(guān)推薦：
那些年，奇妙的圣杯與雙飛翼，還有負(fù)邊距
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/111324.html
摘要：奇妙的圣杯與雙飛翼相信很多人和我在學(xué)習(xí)前端差不多的時(shí)候就聽(tīng)說(shuō)過(guò)了圣杯布局與雙飛翼布局。他往前移動(dòng)之后，文檔流也會(huì)跟著移動(dòng)元素寬度負(fù)邊距負(fù)邊距可以增加元素的寬度，對(duì)于沒(méi)有的元素，負(fù)邊距可以加寬他們。 [TOC] 沒(méi)錯(cuò)，題目就是模仿《那些年，我們一起清除過(guò)的浮動(dòng)》而來(lái)的。 奇妙的圣杯與雙飛翼 相信很多人和我在學(xué)習(xí)前端差不多的時(shí)候就聽(tīng)說(shuō)過(guò)了圣杯布局與雙飛翼布局。關(guān)于取名無(wú)非是覺(jué)得長(zhǎng)得像圣杯，...
摘要：中，水平邊距永遠(yuǎn)不會(huì)重合。垂直邊距可能在特定的框之間重合常規(guī)流向中兩個(gè)或多個(gè)塊框相鄰的垂直邊距會(huì)重合。結(jié)果的邊距寬度是相鄰邊距寬度中較大的值。如果出現(xiàn)負(fù)邊距，則在最大的正邊距中減去絕對(duì)值最大的負(fù)邊距。絕對(duì)和相對(duì)定位的框的邊距不重合。 這是一個(gè)早以前研究過(guò)的東西，今天java開(kāi)發(fā)說(shuō)起了這個(gè)，順帶記錄一下。這里有一行代碼，很簡(jiǎn)單的一段代碼 #div1{ background:#0...
摘要：清單一些說(shuō)明注意文檔的書(shū)寫(xiě)順序，先寫(xiě)兩側(cè)欄，再寫(xiě)主面板，更換后則側(cè)欄會(huì)被擠到下一列圣杯布局和雙飛翼布局都會(huì)用到?？梢酝ㄟ^(guò)設(shè)置的屬性或使用雙飛翼布局避免問(wèn)題。雙飛翼布局不用設(shè)置相對(duì)布局，以及對(duì)應(yīng)的和值。 本文首發(fā)于知乎專(zhuān)欄：前端指南 CSS布局 布局是CSS中一個(gè)重要部分，本文總結(jié)了CSS布局中的常用技巧，包括常用的水平居中、垂直居中方法，以及單列布局、多列布局的多種實(shí)現(xiàn)方式（包括傳統(tǒng)的...
摘要：語(yǔ)法規(guī)則注釋層疊優(yōu)先級(jí)繼承值塊格式化上下文盒模型層疊上下文可替換元素外邊距合并包含塊視覺(jué)格式化模型布局模式語(yǔ)法屬性值聲明聲明塊規(guī)則規(guī)則集規(guī)則規(guī)則一個(gè)語(yǔ)句定義樣式表使用的字符集告訴引擎引入一個(gè)外部樣式表嵌套規(guī)則如果滿(mǎn)足媒介查詢(xún)的條件則條件規(guī)則 1、CSS語(yǔ)法 2、@規(guī)則 3、注釋 4、層疊 5、優(yōu)先級(jí) 6、繼承 7、值 8、塊格式化上下文 9、盒模型 10、層疊上下文 11、可替換元素 12、...
摘要：布局經(jīng)典問(wèn)題初步整理標(biāo)簽前端本文主要對(duì)布局中常見(jiàn)的經(jīng)典問(wèn)題進(jìn)行簡(jiǎn)單說(shuō)明，并提供相關(guān)解決方案的參考鏈接，涉及到三欄式布局，負(fù)，清除浮動(dòng)，居中布局，響應(yīng)式設(shè)計(jì)，布局，等等。 CSS 布局經(jīng)典問(wèn)題初步整理 標(biāo)簽 ： 前端 [TOC] 本文主要對(duì) CSS 布局中常見(jiàn)的經(jīng)典問(wèn)題進(jìn)行簡(jiǎn)單說(shuō)明，并提供相關(guān)解決方案的參考鏈接，涉及到三欄式布局，負(fù) margin，清除浮動(dòng)，居中布局，響應(yīng)式設(shè)計(jì)，F(xiàn)l...
閱讀 2912·2021-11-22 15:11
閱讀 3634·2021-09-28 09:43
閱讀 2958·2019-08-30 13:05
閱讀 3494·2019-08-30 11:18
閱讀 1508·2019-08-29 16:34
閱讀 1421·2019-08-29 13:53
閱讀 2992·2019-08-29 11:03
閱讀 1728·2019-08-29 10:57
