負margin的幾個問題

ddongjian0000 發布于2019-08-28 18:26 / 2656人閱讀

摘要：可是這個籬笆的寬度偏偏可以是個負值。圖當我們去掉的代碼中的后，竟然超出了的范圍也就是說它把負的絕對值，加到了自身的內容中，這無疑增大了元素本身的寬度。總結如果元素沒有設置負邊距方向上的長度或寬度，負邊距會使負邊距方向上的長度或寬度增加。

??????此文持續更新，發現有趣的東西
??????負邊距是一個比較奇葩的東西，為什么說它奇葩呢？padding在border的里面；margin在border的外面。我們可以把”border“比作房子的圍墻”，margin“比作房子外面的籬笆。可是這個籬笆的寬度偏偏可以是個負值。

??????好了，閑話少敘，放代碼！


    對照
    測試

.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文件中測試的結果是child1繼承父元素寬度，而child2也繼承父元素的寬度。

??????圖1

??????當我們去掉child2的css代碼中的“width：400px”后，child2竟然超出了parent的范圍！也就是說它把負margin的絕對值，加到了自身的內容中，這無疑增大了元素本身的寬度。

??????圖2

好了，我們總結以下:
??????元素設定寬度：負邊距對元素的寬度沒有影響
??????元素未設定寬度：負邊距增大元素的寬度（注意是元素本身的寬度！）以至于超出容器。
??????好了，第一部分的驗證結束，至于應用舉例，網上的例子很多，我們只要知曉其中巧妙，大可放心應用。那再在來探討一下，負邊距對相鄰元素的影響是怎樣的呢？
??????答案是沒有空間上的影響（有遮擋效果，這是相對產生的結果）。

??????圖3
此文系本人原創，如有不嚴謹的地方還請指正。

第一次更新，回看時候發現我并沒有對內容上的影響做相應的測試，這次補上

??????圖4

??????圖5

內容上依然沒有空間上的影響，只是z軸上的先后順序有些不同，這和布局是有關系的。

總結

如果元素沒有設置負邊距方向上的長度或寬度，負邊距會使負邊距方向上的長度或寬度增加。

 應用： 多列等寬布局/多行等高布局

如果元素設置了負邊距方向上的長度或寬度，負邊距會使元素和相鄰元素重疊，這就是所謂的“塌陷”

 應用：元素重疊

云服務器 GPU云服務器最小費用最大流算法負圈 margin: margins margin

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111229.html

css-負margin總結

摘要：為負時，屬性是元素本身的右下邊為參考線水平向右下位移。總結盒子最后的顯示大小等于盒子的正，而負不會影響其大小。這篇文章是從原博客轉載過來的，是2013年寫的，有些不對的地方請指出。原文地址博客地址 , 歡迎訂閱這是一篇我自己關于負margin的理解，今天因為做項目用到了負margin，幾經找資料，終于搞懂了，就趕緊記下來，免得忘記了！ margin為正時，top、lef...

leap_frog 2019-08-28 18:16 評論0 收藏0
[譯] 負邊距詳解

摘要：正是因為沒有很好地了解負邊距才是導致各種奇怪的問題。不理解它負邊距不會在的設計窗口展示出效果。有兩種場景負邊距是很重要的。微調元素這是負外邊距最常也是最簡單的使用方式。原文 The Definitive Guide to Using Negative Margins 自從1998年CSS2作為推薦以來，表格的使用漸漸退去，成為歷史。正因為此，從那以后CSS布局成為了優雅代碼的代名詞。...

Vixb 2019-08-28 18:20 評論0 收藏0
[譯] 負邊距詳解

摘要：正是因為沒有很好地了解負邊距才是導致各種奇怪的問題。不理解它負邊距不會在的設計窗口展示出效果。有兩種場景負邊距是很重要的。微調元素這是負外邊距最常也是最簡單的使用方式。原文 The Definitive Guide to Using Negative Margins 自從1998年CSS2作為推薦以來，表格的使用漸漸退去，成為歷史。正因為此，從那以后CSS布局成為了優雅代碼的代名詞。...

Richard_Gao 2019-08-01 14:53 評論0 收藏0
CSS 布局經典問題初步整理

摘要：布局經典問題初步整理標簽前端本文主要對布局中常見的經典問題進行簡單說明，并提供相關解決方案的參考鏈接，涉及到三欄式布局，負，清除浮動，居中布局，響應式設計，布局，等等。 CSS 布局經典問題初步整理標簽：前端 [TOC] 本文主要對 CSS 布局中常見的經典問題進行簡單說明，并提供相關解決方案的參考鏈接，涉及到三欄式布局，負 margin，清除浮動，居中布局，響應式設計，Fl...

Amos 2019-08-29 12:36 評論0 收藏0
那些年，奇妙的圣杯與雙飛翼，還有負邊距

摘要：奇妙的圣杯與雙飛翼相信很多人和我在學習前端差不多的時候就聽說過了圣杯布局與雙飛翼布局。他往前移動之后，文檔流也會跟著移動元素寬度負邊距負邊距可以增加元素的寬度，對于沒有的元素，負邊距可以加寬他們。 [TOC] 沒錯，題目就是模仿《那些年，我們一起清除過的浮動》而來的。奇妙的圣杯與雙飛翼相信很多人和我在學習前端差不多的時候就聽說過了圣杯布局與雙飛翼布局。關于取名無非是覺得長得像圣杯，...

tianhang 2019-08-30 12:50 評論0 收藏0