margin
[TOC]
一、布局與尺寸
1、margin普通情況下不影響可視尺寸，只有元素在 充分利用可用空間 的時候才影響可視尺寸
2、value可以是負值
3、可以用來實現(xiàn)流體布局
4、內(nèi)聯(lián)（inline）元素垂直方向的margin是沒有任何影響的
圖片左側(cè)定位
<style>
.point01 .box{overflow: hidden}
.point01 .box >img{float: left;width: 140px}
.point01 .box >p {margin-left: 140px}
</style>
<div class="point01">
<div class="box">
<img src="./img/test.png" alt="">
<p>文字內(nèi)容。文字內(nèi)容。文字內(nèi)容。文字內(nèi)容。文字內(nèi)容。文字內(nèi)容。文字內(nèi)容。文字內(nèi)容。文字內(nèi)容。文字內(nèi)容。文字內(nèi)容。文字內(nèi)容。文字內(nèi)容。文字內(nèi)容。文字內(nèi)容。文字內(nèi)容。文字內(nèi)容。文字內(nèi)容。文字內(nèi)容。文字內(nèi)容。文字內(nèi)容。文字內(nèi)容。文字內(nèi)容。文字內(nèi)容。文字內(nèi)容。文字內(nèi)容。文字內(nèi)容。。。</p>
</div>
</div>
流體布局右側(cè)固定
style>
.point02 .box {
overflow: hidden
}
.point02 .box>img {
float: left;
margin-left: -140px;
}
.point02 .full{
width: 100%;
float: left;
}
.point02 .box p {
margin-right: 140px
}
</style>
<div class="point02">
<div class="box">
<div class="full">
<p>文字內(nèi)容。文字內(nèi)容。文字內(nèi)容。文字內(nèi)容。文字內(nèi)容。文字內(nèi)容。文字內(nèi)容。文字內(nèi)容。文字內(nèi)容。文字內(nèi)容。文字內(nèi)容。文字內(nèi)容。文字內(nèi)容。文字內(nèi)容。文字內(nèi)容。文字內(nèi)容。文字內(nèi)容。文字內(nèi)容。文字內(nèi)容。文字內(nèi)容。文字內(nèi)容。文字內(nèi)容。文字內(nèi)容。文字內(nèi)容。文字內(nèi)容。文字內(nèi)容。文字內(nèi)容。。。</p>
</div>
<img src="./img/test.png" width="140">
</div>
</div>
效果如下，注意：
.point02 .box>img { float: left; margin-left: -140px; }
等高布局：
<h3>等高</h3>
<style>
.point04 .box {
overflow: hidden;
}
.point04 .c_left,
.point04 .c_right {
float: left;
width: 300px;
margin-bottom: -9999px;
padding-bottom: 9999px;
}
.c_left{
background: gray;
}
.c_right{
background: red;
}
</style>
<div class="point04">
<div class="box c_left">
<h4>正方觀點</h4>
<p>觀點1111</p>
</div>
<div class="box c_right">
<h4>反方觀點</h4>
<p>觀點1111</p>
<p>觀
點1111</p>
<p>觀點1111</p>
<p>觀點1111</p>
</div>
</div>
效果：
解析：
兩個padding和margin把頁面拉的特別長，最終顯示的是內(nèi)容撐開的父親的大小，其他的地方都被遮擋了
但是還是建議用table-ceil
二、margin合并
三種合并場景：
-
相鄰元素合并
<style> .point06 p{ margin: 1 em 0; } .point06 .container>h2 { font-size: 128px; margin-top: 100px; color: #fff; } </style> <div class="point06"> <p>第一行</p> <p>第二行</p> <p>第三回</p> <p>第四行</p> <p>第五行</p> <p>第六行</p> </div>
-
父級和第一個/最后一個子元素
eg：banner里邊有自己的內(nèi)容，如果內(nèi)容要靠margin靠中間的話，會把banner擠下來的,如何解決這種功能問題？注釋中的四種方法
<style> .point05 {} .point05 .container { /* overflow: hidden; *//*格式化父元素*/ /* border-top: 1px solid gray; *//*父元素設(shè)置border-top的值*/ /* padding: 1px; *//*父元素設(shè)置padding*/ max-width: 1020px; height: 300px; background: green; } .point05 .container>h2 { font-size: 128px; margin-top: 100px; color: #fff; } </style> <div class="point05"> <h1> i am the title </h1> <div class="container"> <!-- <a>123</a> --><!-- 父元素和第一個子元素之間添加內(nèi)斂元素進行分離--> <h2>this is test</h2> </div> </div>
-
空塊級元素的margin合并
如果父親里邊有一個空元素，上下margin都是10 結(jié)果父元素的高度只有10 因為子元素的上下margin合并了
<style> .point07 .father{ overflow: hidden; } .point07 .son{ margin: 10px 0; /* padding-top: 1px; */ /* border-top: 1px solid green; */ /* min-height: 1px */ } </style> <div class="point07"> <div class="father"> <div class="son"> <!-- 12 --> </div> </div> </div>
三種合并規(guī)則：
- 正正取大
- 正負相加
- 負負最負
三、margin:auto
前提：
1、div等元素，在沒有設(shè)置width 和height的時候 他也會自動填滿容器<div></div>
2、有時候，元素沒有設(shè)置width height 也會自動填充對應(yīng)的方位
div{
position:absolute;
left:0;right:0;
}
Margin:auto 的屬性值就是基于以上兩點實現(xiàn)的，填充規(guī)則如下：
- 一側(cè)定值，一側(cè)auto 那么auto剩下的空間大小
- 兩邊都是auto ，那么平分剩余空間大小
如下幾個例子：
margin：auto高度不居中的問題：
margin:auto居中的前提是自動填充的功能，但是垂直高度上，本來div都不會自動填充，所以也不會自動分配margin進行填充了。
如果要用margin:auto實現(xiàn)垂直居中，可以使用手動創(chuàng)建垂直自動填充功能進行居中
不兼容ie8
<style>
.point08 .father{
width: 300px;
height: 300px;
background: grey;
position: relative;
}
.point08 .son {
width:200px;
height: 200px;
background: red;
position: absolute;
top: 0;bottom: 0;left: 0;right: 0;
margin: auto;
}
</style>
<div class="point08">
<div class="father">
<div class="son">
i am the son
</div>
</div>
</div>
之前我以為這里的垂直居中是因為position的top bottom的拉伸作用使元素上上不去下下不來才居中的，但是這里如果我們將.point08 .son的margin：auto刪除，將不再居中，所以position只是用來提供自動填充的功能
還有一種，如果不考慮水平居中的話，可以如下：
.point08 .father{
width: 300px;
height: 300px;
background: grey;
/* position: relative; */
writing-mode: vertical-lr;
}
四、margin 無效的情況
內(nèi)聯(lián)（
inline） 非替換（除了類似于<img> <iframe>的元素）元素的高度設(shè)置margin沒用tr td或者table-cell table-row的元素，但是table-caption table或者是inline-table就沒有問題了父子
margin合并的時候，就可能讓子的margin沒用-
絕對定位的非定位方向的
margin,因為設(shè)置了right，這樣left沒有設(shè)置的時候，調(diào)試的再大也沒有用了，但是如果給left：0一個值，元素立馬會因為margin：1000px而消失不見或者十分靠右position: absolute; top: 0;bottom: 0;right: 10px; margin-left: 1000px; 定高容器的
margin-bottom或者是定寬的margin-right-
鞭長莫及導(dǎo)致margin失效
<style> .point09 .son1 { float: left; width: 256px; } .point09 .son2 { overflow: hidden; margin-left: 250px; } </style> <div class="point09"> <div class="father"> <img src="./img/test.png" alt="" class="son1"> <div class="son2"> i am the son </div> </div> </div>這個時候，只要margin小于256 無論正負都不變化
-
內(nèi)聯(lián)特性導(dǎo)致的margin無效
<style> .point09 .father { } .point09 .son1 { height: 96px; margin-top: -600px; } </style> <div class="point09"> <div class="father"> <img src="./img/test.png" alt="" class="son1"> <div class="son2"> i am the son </div> </div> </div>這個時候，margin-top往上一定程度后就無法再移動了，比如margin-top:-200px;上移動了200px;但是在將其改為300還是200的位置，并不會因此而進行改變
