資訊專欄INFORMATION COLUMN
摘要：二負(fù)一個(gè)沒有設(shè)定高度的塊狀元素，其高度是自動(dòng)的，具體來說就是由它里面的文檔流最后的位置決定的。為負(fù)值，會(huì)導(dǎo)致元素的邊界收縮，其作用只會(huì)影響文檔流的邊界。而文檔流邊界的減少，會(huì)產(chǎn)生以下兩個(gè)影響。
一、margin移動(dòng)的參考基線
上圖解析：
box 的實(shí)際大小 = box 的物理大小 + 正的 margin(物理大小指的是除去 margin，也就是包含 border 以內(nèi)的 box 大小)
如果是負(fù)的 top 或 left 值會(huì)引起 box 的向上或向左位置移動(dòng)，如果是負(fù)的 bottom 或 right 會(huì)影響下面 box 的顯示的參考線。
二、負(fù)margin-bottom一個(gè)沒有設(shè)定高度的塊狀元素，其高度是自動(dòng)的，具體來說就是由它里面的文檔流最后的位置決定的。
margin-bottom為負(fù)值，會(huì)導(dǎo)致元素的邊界收縮，其作用只會(huì)影響文檔流的邊界。而文檔流邊界的減少，會(huì)產(chǎn)生以下兩個(gè)影響。
1、后面的元素會(huì)占據(jù)收縮產(chǎn)生的那一部分文檔流，從而形成后面元素覆蓋前面元素的效果
2、當(dāng)父元素沒有明確指定height，會(huì)導(dǎo)致父元素的邊界會(huì)往上面縮，也就是其父元素的邊界在子元素邊界上面。
總之：margin-bottom為負(fù)值只會(huì)影響父元素的高度(前提是父元素沒有明確指定height)，無法影響子元素自身的高度!
三、負(fù)margin-rightmargin-right為負(fù)數(shù)只會(huì)改變?cè)刈陨淼膶挾龋ㄇ疤崾歉冈爻叽绻潭ǎ釉貙挾任丛O(shè)），不會(huì)修改父元素的寬度。margin-left為負(fù)數(shù)在該條件下也會(huì)改變?cè)刈陨淼膶挾取?/p>
為什么負(fù)margin-right/margin-left會(huì)改變?cè)貙挾龋?/strong>因?yàn)榧偃鏟為block元素且沒有指定width，則p的width+padding+border+margin=父級(jí)div的width（這里都是說的水平方向）。
這里假定padding,border為0。父級(jí)div width為400px。p的width為inherit。不設(shè)置margin，則p的width為400px。
當(dāng)margin-left:-100px;，p.width + (-100px) = 400px。因此, p的width就變成了500px。
這里說的p都是假定為inherit width。如果指定了p的width，則margin-left,margin-top為負(fù)值會(huì)引起p元素位置的變化。
四、負(fù)margin的應(yīng)用 多列等高布局（原理：負(fù)margin-bottom）body,
p {
margin: 0;
padding: 0;
}
#testdiv {
overflow: hidden;
width: 660px;
margin: 0 auto;
}
#left,
#center,
#right {
margin-bottom: -400px;
padding-bottom: 400px;
}
#left {
float: left;
width: 180px;
background: #777;
}
#center {
float: left;
width: 300px;
background: #888;
}
#right {
float: right;
width: 180px;
background: #999;
}
p {
color: #FFF;
text-align: center
}
style="height:50px"
style="height:100px"
style="height:200px"
未設(shè)置padding-bottom和 margin-bottom屬性時(shí)，高度不一，外層DIV高度為內(nèi)層最高DIV高度。
設(shè)置padding-bottom和 margin-bottom屬性，未設(shè)置testdiv的overflow屬性時(shí)，外層DIV高度仍為200，內(nèi)層各div邊界在外層div邊界之下。
設(shè)置testdiv的overflow屬性后，外層div以內(nèi)層最高div的高度200為自身的高度，各列不足200高度的，則用padding不足。
可實(shí)現(xiàn)中間帶些間隔的布局。
ul,
li {
list-style: none;
padding: 0;
margin: 0;
}
.container {
height: 210px;
width: 490px;
border: 5px solid #000;
overflow: hidden;/*將超出部分內(nèi)容隱藏*/
}
ul {
height: 210px;
background-color: red;
margin-right: -30px;
/*一個(gè)負(fù)的margin-right,相當(dāng)于把ul的寬度向右增加了30px*/
}
li {
height: 100px;
width: 100px;
background: #eee;
float: left;
margin-right: 30px;
}
- 子元素1
- 子元素2
- 子元素3
- 子元素4
ul不加 margin-right: -30px;，則一行放不下
ul加上 margin-right: -30px;，則會(huì)導(dǎo)致超出父元素
因此需要為父元素添加overflow: hidden;
五、margin折疊 折疊含義兩個(gè)或多個(gè)毗鄰的普通流中的塊元素垂直方向上的 margin 會(huì)折疊
1、兩個(gè)或多個(gè)
說明其數(shù)量必須是大于一個(gè)，又說明，折疊是元素與元素間相互的行為，不存在 A 和 B 折疊，B 沒有和 A 折疊的現(xiàn)象。
2、毗鄰
是指沒有被非空內(nèi)容、padding、border 或 clear 分隔開，說明其位置關(guān)系。
注意一點(diǎn)，在沒有被分隔開的情況下，父元素的 margin-top 會(huì)和它普通流中的第一個(gè)子元素(非浮動(dòng)元素等)的 margin-top 相鄰； 只有父元素的 height 是 "auto" 的情況下，它的 margin-bottom 才會(huì)和它普通流中的最后一個(gè)子元素(非浮動(dòng)元素等)的 margin-bottom 相鄰。
3.垂直方向
是指具體的方位，只有垂直方向的 margin 才會(huì)折疊，也就是說，水平方向的 margin 不會(huì)發(fā)生折疊的現(xiàn)象。
發(fā)生折疊的情況1、相鄰的兄弟元素
上一個(gè)元素的margin-bottom與下一個(gè)元素的margin-top重疊。
2、父級(jí)和第一個(gè)/最后一個(gè)子元素
父元素的margin-top與子元素的margin-top，或父元素的margin-bottom與子元素的margin-bottom重疊。
3、空的block元素
自己的margin-top和margin-bottom重疊（自身內(nèi)容為空，垂直方向上 border、padding 為 0發(fā)生）如何使元素上下margin不折疊
1、使元素脫離普通流
浮動(dòng)元素、inline-block 元素、absolute和fixed定位元素的 margin 不會(huì)和垂直方向上其他元素的 margin 折疊。（這里指的是上下相鄰的元素）
創(chuàng)建了塊級(jí)格式化上下文的元素，不和它的子元素發(fā)生 margin 折疊?？赏ㄟ^以下幾種觸發(fā)BFC:float（除了none）、overflow（除了visible）、display（table-cell/table-caption/inline-block）、position（除了static/relative）
2、使元素不毗鄰
添加border或padding或line boxs
margin重疊的計(jì)算規(guī)則1、正正取大值（都為正，則取最大的正值）
2、正負(fù)值相加（一正一負(fù)，則取兩者相加后的值）
3、負(fù)負(fù)最負(fù)值（都為負(fù)，則取絕對(duì)值大的負(fù)值）
參考自：
由淺入深漫談margin屬性
深入理解margin重疊以及負(fù)margin對(duì)元素大小的影響
collapsing-margin的W3C官方介紹
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/111699.html
摘要：給父元素設(shè)置了一個(gè)灰色背景，并且沒有設(shè)置高度，因此高度會(huì)隨著內(nèi)容而擴(kuò)展，設(shè)置為。這個(gè)元素的位置如下圖所示因?yàn)樵厍宄俗蟾?dòng)，所以元素下移。由于這條規(guī)則的存在，導(dǎo)致他們折疊后的不能跟的進(jìn)行折疊，因此的高度被撐開。 作者：https://coding.net/u/zhengkenghong原文：https://blog.coding.net/blog/css-margin 本文著重描述關(guān)...
摘要：前言致謝本文總結(jié)于張鑫旭老師的深入理解之課程，感謝張老師的辛苦付出難學(xué)的作為前端狗的我們，每天都要和網(wǎng)頁打交道。頁面中任何地方，嵌套或直接放入任何空的，都不會(huì)影響原來的布局。比如，給元素聲明，但在中的屬性是。 前言 致謝 本文總結(jié)于 張鑫旭老師的 CSS深入理解之margin課程，感謝張老師的辛苦付出！ 難學(xué)的 CSS 作為前端狗的我們，每天都要和網(wǎng)頁打交道。當(dāng) UI 將設(shè)計(jì)稿發(fā)給...
摘要：前兩個(gè)元素之間的是，因?yàn)檩^小的頂部與較大的底部相結(jié)合。這是由于兩個(gè)重疊造成的。同樣，這種行為也有一定的邏輯。這意味著在使用百分比時(shí)，元素周圍的大小都是相同的。 為了保證的可讀性，本文采用意譯而非直譯。 當(dāng)我們學(xué)習(xí)CSS時(shí)，我們大多數(shù)人學(xué)到的第一件事是CSS中盒子的各個(gè)部分的細(xì)節(jié)，這部分通過叫做 CSS盒、模型。盒模型中的元素之一是margin，即盒子周圍的透明區(qū)域，它會(huì)將其他元素從盒子...
摘要：前兩個(gè)元素之間的是，因?yàn)檩^小的頂部與較大的底部相結(jié)合。這是由于兩個(gè)重疊造成的。同樣，這種行為也有一定的邏輯。這意味著在使用百分比時(shí)，元素周圍的大小都是相同的。 為了保證的可讀性，本文采用意譯而非直譯。 當(dāng)我們學(xué)習(xí)CSS時(shí)，我們大多數(shù)人學(xué)到的第一件事是CSS中盒子的各個(gè)部分的細(xì)節(jié)，這部分通過叫做 CSS盒、模型。盒模型中的元素之一是margin，即盒子周圍的透明區(qū)域，它會(huì)將其他元素從盒子...
小編寫這篇文章的主要目的，是給大家做一個(gè)介紹，介紹關(guān)于在python selenium中，如果出現(xiàn)了BasicAuth認(rèn)證彈框，那么，我們后續(xù)應(yīng)該要怎么進(jìn)場處理呢？下面就給大家詳細(xì)解答下。 一、什么是BasicAuth 兩個(gè)不認(rèn)識(shí)的見面： 假如說張三和李四見面了，于是張三向李四發(fā)出了誠摯的邀請(qǐng)：李四，國慶來上海玩吧，我請(qǐng)你吃小龍蝦！本來李四想先視頻一下到時(shí)候好認(rèn)人，但張三說那樣就沒有驚喜感...
閱讀 2612·2021-09-26 10:17
閱讀 3235·2021-09-22 15:16
閱讀 2144·2021-09-03 10:43
閱讀 3269·2019-08-30 11:23
閱讀 3667·2019-08-29 13:23
閱讀 1315·2019-08-29 11:31
閱讀 3699·2019-08-26 13:52
閱讀 1404·2019-08-26 12:22
