margin詳解

darry 發布于2019-08-29 11:06 / 580人閱讀

摘要：二的賦值普通元素的百分比都是相對于容器的寬度計算。絕對定位元素的百分比，絕對定位元素的百分比是相對于第一個定位祖先元素的寬度計算應用寬高自適應矩形傳送門之所以會是，是因為垂直方向上發生重疊。

一. margin對尺寸的影響 1.可視尺寸

a.適用于沒有設定width/height的普通block水平元素
float元素、absolute/fixed元素、inline元素、table-cell元素都不可以
b.只適用于水平方向尺寸，可以改變可視尺寸

應用：

a.一側定寬的自適應布局。
HTML：

    
    一側定寬的自適應布局一側定寬的自適應布局一側定寬的自適應布局一側定寬的自適應布局一側定寬的自適應布局一側定寬的自適應布局一側定寬的自適應布局一側定寬的自適應布局一側定寬的自適應布局一側定寬的自適應布局一側定寬的自適應布局一側定寬的自適應布局一側定寬的自適應布局一側定寬的自適應布局一側定寬的自適應布局一側定寬的自適應布局一側定寬的自適應布局一側定寬的自適應布局一側定寬的自適應布局一側定寬的自適應布局

CSS:

.left{height:200px;width:200px;background:blue;float:left;}
.right{margin-left:300px;}

b.兩端對齊布局
見下文負margin部分。

2.占據尺寸

block/inline-block水平元素均適用

與有沒有設定width/height值無關

適用于水平方向和垂直方向

應用

a.滾動容器內上下留白
demo: codepen傳送門
b.等高布局
見下文負margin部分。

二. margin的賦值

普通元素的百分比margin都是相對于容器的寬度計算。

絕對定位元素的百分比margin，絕對定位元素的百分比margin是相對于第一個定位祖先元素（relative/absolute/fixed）的寬度計算

應用

寬高2：1自適應矩形
demo: codepen傳送門
之所以會是2：1，是因為垂直方向上margin發生重疊。

三. margin重疊 1. 通常特性：

block水平元素（不包括float和absolute元素）

不考慮writing-mode，只發生在垂直方向（margin-top/margin-bottom）

2. 重疊的3種情境 A.相鄰的兄弟元素 B. 父級和第一個/最后一個子元素

子元素的margin-top相當于父元素的margin-top
a.margin-top重疊
父元素非塊狀格式化上下文元素
父元素沒有border-top設置
父元素沒有padding-top值
父元素和第一個子元素之間沒有inline元素分隔

b.margin-bottom重疊
父元素非塊狀格式化上下文設置
父元素沒有border-bottom設置
父元素沒有padding-bottom值
父元素和第一個子元素之間沒有inline元素分隔
父元素沒有height，min-height，max-height

C.空的block元素

元素沒有border設置
元素沒有padding值
里面沒有inline元素
沒有height或者min-height

3. 計算規則

正正取大值
正負值相加
負負最負值

四. margin:auto

1.一側定值，一側auto，auto為剩余空間大小
2.兩側均是auto，則平分剩余空間（使用margin:0 auto;能夠實現塊狀元素居中的原因）
3.writing-model與垂直居中
writing-model可以設置或檢索對象的內容塊固有的書寫方向，具體的可以查看一下CSS參考手冊，vertical-lr指的是垂直方向自左而右的書寫方式，即top-bottom-left-right，再結合margin:auto; 就可以實現垂直居中。
demo: codepen傳送門
4.對于絕對定位的元素，通過設置top:0;right:0;left:0;bottom:0;鋪滿整個頁面，再通過margin:auto完成水平垂直居中定位
demo: codepen傳送門

五. margin負值的應用

當元素margin的top和left是負值時會引起元素的向上或向左位置移動。而當元素margin的bottom和right是負值時會影響右邊和下邊相鄰元素的參考線

1.三欄布局，可以對父元素是使用margin-right:負值;完成左右對齊
demo: codepen傳送門

2.margin負值下的等高布局
關鍵代碼：

.child{margin-bottom:-600px;padding-bottom:600px;}

demo: codepen傳送門
3.兩欄布局
可以看看float布局那篇文章:不改變DOM樹先后順序的方法

六. margin失效

inline元素

非替換元素，不是img元素
正常書寫模式

margin重疊

display:table-cell/display:table-row等聲明的margin無效
替換元素除外，firefox：table-cell類型inline-block的渲染行為

絕對定位元素非定位方位的margin值‘無效’，一直有效，但是脫離文檔流。

由于float導致需要增加的邊距增加

內聯特性導致的margin無效

七. 新特性 1. margin-star&margin-end

正常的流向，margin-start等同于margin-left，兩者重疊不累加

如果水平流從右往左，margin-start等同于margin-right

如果垂直流，margin-start等同于margin-top

2. 其他特性

margin-before：默認margin-top；
margin-collapse：可以取消重疊等等

八. 參考資料

張鑫旭《CSS深入理解之margin》

我知道你不知道的負Margin

The Definitive Guide to Using Negative Margins

云服務器 GPU云服務器 margin: margins margin margin縮寫

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

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

CSS盒子模型中外邊距（margin）折疊詳解

摘要：盒子模型中外邊距折疊的常見情形有如下種情況無子元素的相鄰兄弟元素觸發折疊的條件兩個元素之間沒有被其他非空元素隔開時觸發外邊距折疊。最近寫項目過程中遇到一個CSS盒子模型中外邊距（margin）折疊的情況，搞得我焦頭爛額，之后再網上查閱了大量的資料，現做一個整理和總結，方便以后忘記的時候查閱，同時也供廣大網友參考。如有錯誤或者總結方面不全的地方，歡飲廣大網友指出。外邊距折疊的概念：所...

wmui 2019-08-01 17:22 評論0 收藏0
CSS盒子模型中外邊距（margin）折疊詳解

摘要：盒子模型中外邊距折疊的常見情形有如下種情況無子元素的相鄰兄弟元素觸發折疊的條件兩個元素之間沒有被其他非空元素隔開時觸發外邊距折疊。最近寫項目過程中遇到一個CSS盒子模型中外邊距（margin）折疊的情況，搞得我焦頭爛額，之后再網上查閱了大量的資料，現做一個整理和總結，方便以后忘記的時候查閱，同時也供廣大網友參考。如有錯誤或者總結方面不全的地方，歡飲廣大網友指出。外邊距折疊的概念：所...

genefy 2019-08-29 13:06 評論0 收藏0
margin詳解

摘要：屬性指定了盒的區的寬度。簡寫屬性一次性設置四周的，而其它屬性只設置它們各側的。 margin屬性指定了盒的margin區的寬度。margin簡寫屬性一次性設置四周的margin，而其它margin屬性只設置它們各側的。這些屬性適用于所有元素，但非替換行內元素上的豎直margin將不會產生任何效果 margin與容器尺寸 margin與可視尺寸 margin與可視尺寸只適用于沒有設定...

stonezhu 2019-08-29 12:25 評論0 收藏0
border-sizing屬性詳解和應用

摘要：用于更改用于計算元素寬度和高度的默認的盒子模型。它有和三種取值。和屬性包括內容，內邊距和邊框，但不包括外邊距。所以，的解釋很符合常理。使用建議使用建議根據項目中的使用經驗和的建議，推薦將屬性設置為。個人網站原文鏈接屬性詳解和應用 box-sizing用于更改用于計算元素寬度和高度的默認的 CSS 盒子模型。它有content-box、border-box和inherit三種取值。inheri...

Batkid 2019-04-23 13:30 評論0 收藏0