資訊專欄INFORMATION COLUMN
摘要：可是這個籬笆的寬度偏偏可以是個負(fù)值。圖當(dāng)我們?nèi)サ舻拇a中的后，竟然超出了的范圍也就是說它把負(fù)的絕對值，加到了自身的內(nèi)容中，這無疑增大了元素本身的寬度。總結(jié)如果元素沒有設(shè)置負(fù)邊距方向上的長度或?qū)挾?，?fù)邊距會使負(fù)邊距方向上的長度或?qū)挾仍黾印?/p>
??????此文持續(xù)更新，發(fā)現(xiàn)有趣的東西
??????負(fù)邊距是一個比較奇葩的東西，為什么說它奇葩呢？padding在border的里面；margin在border的外面。我們可以把”border“比作房子的圍墻”，margin“比作房子外面的籬笆?？墒沁@個籬笆的寬度偏偏可以是個負(fù)值。
??????好了，閑話少敘，放代碼！
對照測試
.parent{width: 400px;height: 100px;border:2px solid green;}
.child1{background: #ccc;height: 50px;}
.child2{background: #eee;height: 50px;border: 5px solid red;box-sizing:border-box;margin-right: -50px;width:400px;}
??????child1作為對照，child2作為測試對象。
??????以上代碼在html文件中測試的結(jié)果是child1繼承父元素寬度，而child2也繼承父元素的寬度。
??????圖1
??????當(dāng)我們?nèi)サ鬰hild2的css代碼中的“width：400px”后，child2竟然超出了parent的范圍！也就是說它把負(fù)margin的絕對值，加到了自身的內(nèi)容中，這無疑增大了元素本身的寬度。
??????圖2
好了，我們總結(jié)以下:
??????元素設(shè)定寬度：負(fù)邊距對元素的寬度沒有影響
??????元素未設(shè)定寬度：負(fù)邊距增大元素的寬度（注意是元素本身的寬度?。┮灾劣诔鋈萜?。
??????好了，第一部分的驗(yàn)證結(jié)束，至于應(yīng)用舉例，網(wǎng)上的例子很多，我們只要知曉其中巧妙，大可放心應(yīng)用。那再在來探討一下，負(fù)邊距對相鄰元素的影響是怎樣的呢？
??????答案是沒有空間上的影響（有遮擋效果，這是相對產(chǎn)生的結(jié)果）。
??????圖3
此文系本人原創(chuàng)，如有不嚴(yán)謹(jǐn)?shù)牡胤竭€請指正。
第一次更新，回看時候發(fā)現(xiàn)我并沒有對內(nèi)容上的影響做相應(yīng)的測試，這次補(bǔ)上
??????圖4
??????圖5
內(nèi)容上依然沒有空間上的影響，只是z軸上的先后順序有些不同，這和布局是有關(guān)系的。
總結(jié)如果元素沒有設(shè)置負(fù)邊距方向上的長度或?qū)挾龋?fù)邊距會使負(fù)邊距方向上的長度或?qū)挾仍黾印?/strong>
應(yīng)用： 多列等寬布局/多行等高布局
如果元素設(shè)置了負(fù)邊距方向上的長度或?qū)挾?，?fù)邊距會使元素和相鄰元素重疊，這就是所謂的“塌陷”
應(yīng)用：元素重疊
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/111229.html
摘要：為負(fù)時，屬性是元素本身的右下邊為參考線水平向右下位移?？偨Y(jié)盒子最后的顯示大小等于盒子的正，而負(fù)不會影響其大小。 這篇文章是從原博客轉(zhuǎn)載過來的，是2013年寫的，有些不對的地方請指出。 原文地址 博客地址 , 歡迎訂閱 這是一篇我自己關(guān)于負(fù)margin的理解，今天因?yàn)樽鲰?xiàng)目用到了負(fù)margin，幾經(jīng)找資料，終于搞懂了，就趕緊記下來，免得忘記了！ margin為正時，top、lef...
摘要：正是因?yàn)闆]有很好地了解負(fù)邊距才是導(dǎo)致各種奇怪的問題。不理解它負(fù)邊距不會在的設(shè)計(jì)窗口展示出效果。有兩種場景負(fù)邊距是很重要的。微調(diào)元素這是負(fù)外邊距最常也是最簡單的使用方式。 原文 The Definitive Guide to Using Negative Margins 自從1998年CSS2作為推薦以來，表格的使用漸漸退去，成為歷史。正因?yàn)榇?，從那以后CSS布局成為了優(yōu)雅代碼的代名詞。...
摘要：正是因?yàn)闆]有很好地了解負(fù)邊距才是導(dǎo)致各種奇怪的問題。不理解它負(fù)邊距不會在的設(shè)計(jì)窗口展示出效果。有兩種場景負(fù)邊距是很重要的。微調(diào)元素這是負(fù)外邊距最常也是最簡單的使用方式。 原文 The Definitive Guide to Using Negative Margins 自從1998年CSS2作為推薦以來，表格的使用漸漸退去，成為歷史。正因?yàn)榇?，從那以后CSS布局成為了優(yōu)雅代碼的代名詞。...
摘要：布局經(jīng)典問題初步整理標(biāo)簽前端本文主要對布局中常見的經(jīng)典問題進(jìn)行簡單說明，并提供相關(guān)解決方案的參考鏈接，涉及到三欄式布局，負(fù)，清除浮動，居中布局，響應(yīng)式設(shè)計(jì)，布局，等等。 CSS 布局經(jīng)典問題初步整理 標(biāo)簽 ： 前端 [TOC] 本文主要對 CSS 布局中常見的經(jīng)典問題進(jìn)行簡單說明，并提供相關(guān)解決方案的參考鏈接，涉及到三欄式布局，負(fù) margin，清除浮動，居中布局，響應(yīng)式設(shè)計(jì)，F(xiàn)l...
摘要：奇妙的圣杯與雙飛翼相信很多人和我在學(xué)習(xí)前端差不多的時候就聽說過了圣杯布局與雙飛翼布局。他往前移動之后，文檔流也會跟著移動元素寬度負(fù)邊距負(fù)邊距可以增加元素的寬度，對于沒有的元素，負(fù)邊距可以加寬他們。 [TOC] 沒錯，題目就是模仿《那些年，我們一起清除過的浮動》而來的。 奇妙的圣杯與雙飛翼 相信很多人和我在學(xué)習(xí)前端差不多的時候就聽說過了圣杯布局與雙飛翼布局。關(guān)于取名無非是覺得長得像圣杯，...
閱讀 3156·2021-11-25 09:43
閱讀 3705·2021-08-31 09:41
閱讀 1350·2019-08-30 15:56
閱讀 2276·2019-08-30 15:55
閱讀 3113·2019-08-30 13:48
閱讀 2900·2019-08-29 15:15
閱讀 1063·2019-08-29 15:14
閱讀 2722·2019-08-28 18:26
