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