深入理解CSS中margin的使用方法

1.css margin可以改變容器的尺寸
　　元素尺寸
　　可視尺寸--標準盒子模型中盒子的寬度是不包括margin值的，clientWidth
　　佔據尺寸--包括margin的寬度outWidth不在標準之中，jquery中有相對應的方法

# 　　margin與可視尺寸
　　　　1.1使用那個與沒有設定width/height的普通block水平元素
　　　　2.2只適用於水平方向尺寸
　　　　　2.2只適用於水平方向尺寸 　　　　　2); ##:#1a2b3c"> 　　　　　　

　　　　　　文字　　　　文字

　　　　　　

　　　　
　　　　當改變margin值時的寬度會改變。

　　　　應用：實現一側定寬的自適應佈局

　　　　　　:left;> 　　　　　　

圖片#左浮動

#gin#左浮動

#gin
　　　　　與佔據尺寸
　　　　1.block/inline-block水平元素均適用
　　　　2.與沒有設定width/height值無關
　　　　3.適用於水平方向方向和垂直方向
# 　　　　3.
　　　　　　　　##　的尺寸變小了。
　　　　利用這個特性
　　　　滾動容器內上下留白
　　　　　　

padding　　

#padding　　　 　　　　　　

　　　　裡面盒子撐開外面顯示滾動條，當然這外面在非瀏覽器中是沒有留白效果的(上面有留白效果的(上面有留白效果的chrome下面沒有)。
　　　　正確的做法是
　　　　

　　　　　　<​​y;
　　　　　　<yg 　 尺寸"

第二話：css margin與百分比單位－了解margin百分比單位

　　　　　　水平方向百分比/垂直方向百分比

# 　　　　　　百分比/絕對元素百分比

##　　　　　普通元素百分比/絕對元素百分比##/絕對元素百分比

## 　　　　　　百分比margin的計算規則

　　　　　　　　img{margin :10%;with:600px;heig　200px;{margin :10%;with:600px;heig　200px;所以這裡的margin:10%;---->
top
:60px,left:60px;都是相對與容器的寬度來計算的。

　　　　　　絕對定位元素的百分比margin
　　　　　　　　img{margin:10%; ##　　　　　img{margin:10%; ##　素##:ab　　img{margin:10%; ##　素##:ab　　img{margin　 )。定位元素的祖先元素具有（relative/absolute/fixed）的寬度計算的。普通元素的是相對與父元素的來計算的。 　　　　　　　　

 　　　　　　、]plt; 200px">
 　　　　　　　　　　　

 　　　　　　　　　　  　　　　　　　　寬高2：1自適應矩形
 　　　　　　　　　　.box{background-color:olive;
overflow
:hidden;}
 　　　　　　　這裡也涉及一個只是點就是margin重疊。這裡設定overflow 也是因為防止margin重疊

第三話margin重疊通常特性 　　1.block水平元素（不包括float和absolute元素） 　　2.不考慮
writing-mode
（文字書寫方向是從上到下的），只發生在垂直方向的（

margin-top

/
margin-bottom
） 　　margin重疊3種情境  　　　　1.鄰近的兄弟元素 　　　　　　p{line-height:2em;margin:1em 0;back　行

　　　　　　　　

第二行

# 　　　　　　　子　　這裡就會發生了一個重疊了# 　　　　　　　子　.father{background:#f0f3f9}
　　　　　　

 　　　　　　　;  　　　　　　　　<); ## 　　　　　　

　　　　　　給子第一個或最後一個子元素設定margin等同於給父元素設定相同的margin值，子元素相同margin，子元素和父元素一樣的margin值# 。 lt;/p>
　　　　　　

　　　　　　這裡son的高度只有1em，不是2em
　　　　　 元素重疊沒有border設定
　　　　　　　　2.元素沒有padding值
　　　　　　　　3 .裡面沒有inline元素
　　　　　　　　4.沒有height，或
min-height



# 　　　　　　塊元素-非重疊1元素
　　　　　　　　1.2父元素沒有border-top設定
　　　　　　　　1.3父元素沒有
padding-

H　 元素之間沒有
#; inline元素分隔

　　　　　　margin-bottom重疊
　　　　　　　　1.1父元素非塊狀格式化上下文元素
　　　bot　1.1父元素非塊狀格式化上下文元素
　　　bot　　　。　　　　1.3父元素沒有padding-bottom值
　　　　　　　　1.4父元素與最後一個子元素之間沒有inline元素分隔
　　　　　　　　1.5父元素沒有用　，幹掉　　　　　1.5父元素沒有用　，幹　　-幹掉重疊  　　　　　　　　. father{background:#f0f3f9} 　　　　　　　　

#  　　　　〠　　　　　　　　　。pltson]] 折>
　　　　　　　　

   　　　　　　1.父元素非塊狀格式化上下文元素.father:overflow:hidden);　　　　　　　　.father:border:4px solid # ccc;
   　　　　　　3.父元素沒有padding-top值
   　　　　　　4.父元素與第一個子元素之間沒有分隔帶 元素分隔　　　4　 
 　　　　　　　　　　

son

　　　　　　　　　　　　幹掉margin-bottom重疊
　　　　　　　　前面四個和margin -top一樣，
　　　　　　　　　　

 
 　　　　。 　。 學習　、H] 　　HH)] -top:80px;">son< ;/p>
　　　　　　　　　　

　　　　margin　正怇正　正　　　　　正　正　正　　　.a{margin-bottom:50px;}
　　　　　　　　.b {margin-top:20px;}
　　　　　　　　

　　　　　　　　]>>gt; .father{margin-top:20px;}
　　　　　　　　　　.son{margin-top:50px;}
　　　　 　　　　

< ;/p>

　　　　　　

　　　　　　.a{margin-top:20px;margin-bot:50　　.a{margin-top:20px;margin-bot:50　　.a{margin-top:20px;margin-bot:50　　＀　p> ;

　　　　　　上面的結果都是margin:50px;
　　　　2.正負值相加
　　　　　2.正負值相加

　　　　　margin-top:- 20px;}

　　　　　　

　　　　　　

　　　　　　.father{margin- top:-20px;}
　　　　　　.son{margin-top:50px;}

　　　　　　

　　　　　

　　　　　　

　　　　　　.a{margin-top:-20px;margin-bottom:50px}##> 　。]> 　＀lt; # # 　　　　　　上面的結果都是30px

　　3.負負最負值
　　　　.a{margin-bottom:-50px;}
　　.a{margin-bottom:-50px;}
　　.a{margin-bottom:-50px;}
　　-b];　< p class="a">

　　　　

# 　　　　.father{margin-top:
## 　　　　.father{margin-top:-20px}
　　　　.son{margin-top:-50px;}
　　　　

 　　　　　/lt;p class="father">

 　　　　　/lt>

 　　/Tlt; > ;

　　　　.a{margin-top:-20px;margin-bottom:-50px}
　　　　

> 　　　　　　　　　　　　　　-50px
　　　　margin重疊的意義是？
 　　　　網頁誕生之初…………只是排版文字佈局用，沒有現在這麼複雜。
 　　　　　　1.連續段落或列表之類，如果沒有margin重疊首尾項間距會和其他兄弟標籤1：2關係，排版不自然；
 　　　　　在內p都不會影響原來的佈局

 　　　　　　3.遺留的空人一個p元素，不要影響原來的閱讀排版

　　　　實踐：
　　　　　　善用margin重疊
　　　　　　　　.##[list##　　　　　　　　.list{  　　　　　　　　　　margin-top: 15px;  　　　　　　　　　　margin-bottom:15px;
　　　　　　　　　　　　　　　不會破壞原來的佈局。
第4話：理解CSS中的margin:auto
　　　　margin:auto 的機制
　　　　元素有時候，就算沒有設定width或height，也會自動填入
　　　　　

　　　　如果設定width或height，自動填入特性就會被覆寫
　　　　　　p{width:500px;background:#f0f3f9;}
　p　x　x　　　如果設定值width或height，自動填充特性就會被覆蓋。

　　　　原來應該填充的尺寸被width/height強制變更，而margin：auto就是為了填充這個變更的尺寸設定的；

　　　　　　p{width:500px; :100px;margin-left:auto;}

　　　　如果一側定值，一側auto，auto為剩餘空間大小，如果兩側均是auto，則平分剩餘空間

　　　　為什麼圖片img{width:200px;marign:0 auto}不居中

　　　　因為圖片是inline水平的，就算沒有width，也不會佔據整個容器。
　　　　設定img{display:block;width:200px;marign:0 auto;}

　　　　因為此時圖片是block水平的，就算沒有width，也不能佔據整個容器不能在一行顯示。

　　　　為何明明容器定高，元素定高margin：auto 0 無法垂直居中

　　　　.father{height:200px;　ground:#f0f3f9}#f0f3f9}#. height:100px; width:500px;margin:auto;} 　　　　水平居中了，垂直不居中。
　　　　解釋：如果.son沒有設定height:100px;高度會自動200px高嗎？ ——NO 所以margin談不上自動填充，強制設定寬度高度， 所以是不會自動填充的。

　　　　注意：水平方向上如果子大於父，計算結果為負值的時候也是不居中的。

　　　　實現垂直方向margin居中

　　　　　　更改流為垂直方向，實現垂直方向的margin:auto
　　連居中　　居中　　與垂直中　　.father{height: 200px; width:100%; wiriting-mode:vertical-lr;}
　　　　　　.son{height:100px;width:500px;margin:solute##gin　與居中　　　.father{height: 200px;position:relative;}

 　　　　　　.son{position:absolute; top:0px right:0px bottom:0px;left:0px}

 　。

　　　　當設定了width和高度

  　　　　　　.father{height:200px;position:relative;}
:0f 　　腳。topx :10:00:00:0 月 4f 4:20:00:0 月 42:03:00 月 982:03:00 月 7:00:00 7:00 top8:0%): 88:0$-98:00 月 082:00 月 0. px;left:0px ;width:500px;height:100px;}
 　　　　原來拉伸鋪滿現在縮回來了。
 　　　　　　被拉伸的空間設定margin:auto;平均分配就會實現水平垂直居中了
  　　　　　　.father{height:200px; top:0px right:0px bottom:0px;left:0px；width:500px;height:100px;margin:auto;}

　　　　IE8+以上支援！
第五話：css margin負值定位
　　　　1.margin負值下的兩端對齊（margin改變元素尺寸）
　　　　範例
　　　　　　　範例
. 200px; margin: auto;background:orange;
　　　　　　　　.ul{overflow:hidden;}
　　　　　　　　　　　　　　　　　　ight:300px;
　　　　　　　　　　
margin-right:20px; 　　　　　　　　　　background:green;
　　　　　　　　　　　　}
　　　　實現的清單最後一個留有間隙。
　　　　　　而透過margin負值來改變容器的大小,讓容器變寬。能完美解決這個問題
　　　　.box{
　　　　　　width:1200px; margin:auto;background:orange;
　　　　　幾.　.li{
　　　　　　width:386.66px;height:300px;
　　　　　　margin-right:20px;　# 　　　　margin-right:20px;　# 　　　　margin-right:20px;　# 　　　　mar　float:left;
　　　　　}
　　　　}
　　　　2.margin負值下的等高佈局margin改變元素佔據空間
　　　　margin與上下留白
　　　　

　　g　　　 　　〦〵] :50px 0;" />
　　　　

　　　　.box{overflow:hidden;resize:vertical;}
　　.box{overflow:hidden;resize:vertical;}
　child 　　　公. :-600px;padding-bottom:600px;}
　　　　.child-orange{float:left;background:orange;}
　　　　.child-green{florange;}
　　　　.child-green{float:}
　　　　.child-green#ground # 　　　　透過設定很大的margin-bottom負值，和很大的padding-bottom填充缺失的空間，實現等高佈局。原理：內容塊狀元素可以在padding中顯示.只要沒有設定

　　　　background:
clip
,box-sizing:content

　　　　3.margin負值下的兩欄自適應## 　　　　3.margin負值下的兩欄自適應佈局，元素佔據空間跟隨margin移動

　　　　

 　　　　　　<#  　　　　　　<#  　　　　　　<
#  　　　　　　<

# style="右浮

　　　　

　　　　marign:0px
  　　　　給span設定margin233px;
  　　　　水平上有效的，垂直方向是無效的。
  　　　　2.margin重疊

  　　　　3.display：table-cell

   　　　　　　display:table-d/display:

   　　　　　　例外的替換元素 img,button

　　　　4.position與margin
　　　　　絕對定位的margin值一直有效，不只是像普通元素那樣。
    　　　　5.鞭長莫及的margin失效
　　　　　　bfc內容區塊中如果前面有浮動元素那下一個元素的margin是相對與外層的p計算的。
    　　　　6.內聯導致的margin失效

　　　　　　p[style="height:200px;background-color:#f0f3f9;"]>height:200px;background-color:#f0f3f9;"]>當margin-top夠大的時候失效了。 ### 　　　　　　解釋：內聯元素要實現和基線對齊，在圖片後面加上x可以看出，無論margin-top有多遠，他都不會脫離容器外面。 ###

第七話margin-start和margin-end
　　　　margin-start
　　　　imging{
　　　　　　imging{
1 　　　　　　3ging{
1 　　　　　100px ;
　　　　　　-moz-margin-start:100px;
　　　　　　margin-sart:100px;
　　　　margin-sart:100px;
　　　　，兩者重疊不累加； 　　　　2.如果水平流失從右往左，margin-start等同與margin-right;direction
:ltr(rtl)
　　　　3.在垂直流下（writring-mode:vertical-lrlr-mode:vertical-lr ),margin-sart等同於margin-top
　　　　webkit下的其他margin相關屬性 　　　　　　margin-before

#]fg-fid　　預設流向的情況下，等同於marign-top
　　　　　　margin-after
　　　　　　　　img{-webkit-marign-after:100　　　　img{-webkit-marign-after:100x　　　img{-webf-marign-after:100x　gin-collapse 外邊框重疊
　　　　　　　　-webkit-margin-collapse: collapse|discard|separate
　　　　　　　　　　　　　　　　　　——重疊控制## 　　　　　　　　　discard 取消
　　　　　　　　　separate 分隔沒有重疊

########################################################################################################################################################################################################## ########

以上是深入理解CSS中margin的使用方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！