css-負margin總結

leap_frog 發布于2019-08-28 18:16 / 2095人閱讀

摘要：為負時，屬性是元素本身的右下邊為參考線水平向右下位移。總結盒子最后的顯示大小等于盒子的正，而負不會影響其大小。

這篇文章是從原博客轉載過來的，是2013年寫的，有些不對的地方請指出。

原文地址

博客地址 , 歡迎訂閱

這是一篇我自己關于負margin的理解，今天因為做項目用到了負margin，幾經找資料，終于搞懂了，就趕緊記下來，免得忘記了！

margin為正時，top、left屬性是以content上（左）或垂直上方相連元素margin的下（右）邊為參考線垂直向下（右）位移。

margin為負時，right、bottom屬性是元素本身的border右（下）邊為參考線水平向右（下）位移。

總結

盒子最后的顯示大小等于盒子的border+padding+正margin，而負margin不會影響其大小。

margin為負且盒子static時：

若屬性為top、left，盒子將被拉進指定的方向;

若屬性為bottom、right,將后續的元素拖拉進來，覆蓋本來的元素。

若width沒有被設置，設定負margin-left/right會將元素拖向對應的方向，并增加寬度，此時的margin的作用就像padding一樣

選項卡demo

怎么樣實現上面菜單欄的選中狀態下沒有下邊框的效果？
一般的思路是每個菜單欄設置邊框，選中的狀態沒有下邊框

其實還可以這樣，邊框不是上面菜單欄的，而是下面內容塊的：

明白了把，所以只要給菜單欄設置margin-bottom:-1px就可以讓下面的內容塊上移1px，剛好讓菜單欄的背景色蓋住那個1px的邊框。
如果選中狀態沒有背景色，就悲劇了：

請看 demo

現在看這個例子沒有明顯展示出負margin的能力，再看下面的

負margin加寬元素

再看一個width沒有設置，通過負margin加寬的元素的布局例子，這是很常見的例子，如果不用負margin，就會很麻煩呢
demo

圣杯布局

因為BFC有這個特性：

元素在設定width時，添加border、padding、margin會導致元素變寬；但是在沒有設定width時，元素會自動填滿父元素，添加padding、border、margin會使元素變窄，減少量等于他們三個之和。

demo

負margin實現兩列等高布局

demo

參考文章

負值之美

以上是網上資料總結，我的總結就一句話：left、top不論正負自己動，right、bottom不論正負別的元素動！正的向外，負的向內！考慮問題的時候還要考慮到盒子的特性問題！！

PS:遇到問題只要先想想什么是margin，margin的作用是什么，則負margin的工作原理則迎刃而解！

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

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

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

CSS布局十八般武藝都在這里了

摘要：清單一些說明注意文檔的書寫順序，先寫兩側欄，再寫主面板，更換后則側欄會被擠到下一列圣杯布局和雙飛翼布局都會用到。可以通過設置的屬性或使用雙飛翼布局避免問題。雙飛翼布局不用設置相對布局，以及對應的和值。本文首發于知乎專欄：前端指南 CSS布局布局是CSS中一個重要部分，本文總結了CSS布局中的常用技巧，包括常用的水平居中、垂直居中方法，以及單列布局、多列布局的多種實現方式（包括傳統的...

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

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

tianhang 2019-08-30 12:50 評論0 收藏0
CSS 布局經典問題初步整理

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

Amos 2019-08-29 12:36 評論0 收藏0
css實現元素水平垂直居中

摘要：結構如下實驗結果如下實現了子元素的水平垂直居中，同時可觀察到兩張圖溢出的方式不同絕對定位的溢出或或的溢出 1.絕對定位，利用負邊距利用負邊距實現子元素居中(相對于父元素(position:relative))，需已知子元素的width與height；且把子元素的position設為absolute，絕對定位；以及設置left和top為50%；再加上負邊距，margin-left值為w...

ninefive 2019-08-29 13:46 評論0 收藏0
負margin的幾個問題

摘要：可是這個籬笆的寬度偏偏可以是個負值。圖當我們去掉的代碼中的后，竟然超出了的范圍也就是說它把負的絕對值，加到了自身的內容中，這無疑增大了元素本身的寬度。總結如果元素沒有設置負邊距方向上的長度或寬度，負邊距會使負邊距方向上的長度或寬度增加。 ??????此文持續更新，發現有趣的東西??????負邊距是一個比較奇葩的東西，為什么說它奇葩呢？padding在border的里面；margin在b...

ddongjian0000 2019-08-28 18:26 評論0 收藏0