margin
[TOC]
一恬口、布局與尺寸
1校读、margin普通情況下不影響可視尺寸，只有元素在 充分利用可用空間 的時(shí)候才影響可視尺寸
2祖能、value可以是負(fù)值
3歉秫、可以用來實(shí)現(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>正方觀點(diǎn)</h4>
<p>觀點(diǎn)1111</p>
</div>
<div class="box c_right">
<h4>反方觀點(diǎn)</h4>
<p>觀點(diǎn)1111</p>
<p>觀
點(diǎn)1111</p>
<p>觀點(diǎn)1111</p>
<p>觀點(diǎn)1111</p>
</div>
</div>
效果：
解析：
兩個(gè)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>
-
父級(jí)和第一個(gè)/最后一個(gè)子元素
eg：banner里邊有自己的內(nèi)容，如果內(nèi)容要靠margin靠中間的話怕轿，會(huì)把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> --><!-- 父元素和第一個(gè)子元素之間添加內(nèi)斂元素進(jìn)行分離--> <h2>this is test</h2> </div> </div>
-
空塊級(jí)元素的margin合并
如果父親里邊有一個(gè)空元素，上下margin都是10 結(jié)果父元素的高度只有10 因?yàn)樽釉氐纳舷耺argin合并了
<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ī)則：
- 正正取大
- 正負(fù)相加
- 負(fù)負(fù)最負(fù)
三撤卢、margin:auto
前提：
1环凿、div等元素，在沒有設(shè)置width 和height的時(shí)候 他也會(huì)自動(dòng)填滿容器<div></div>
2放吩、有時(shí)候智听，元素沒有設(shè)置width height 也會(huì)自動(dòng)填充對(duì)應(yīng)的方位
div{
position:absolute;
left:0;right:0;
}
Margin:auto 的屬性值就是基于以上兩點(diǎn)實(shí)現(xiàn)的，填充規(guī)則如下：
- 一側(cè)定值，一側(cè)auto 那么auto剩下的空間大小
- 兩邊都是auto 到推，那么平分剩余空間大小
如下幾個(gè)例子：
margin：auto高度不居中的問題：
margin:auto居中的前提是自動(dòng)填充的功能考赛，但是垂直高度上，本來div都不會(huì)自動(dòng)填充莉测，所以也不會(huì)自動(dòng)分配margin進(jìn)行填充了颜骤。
如果要用margin:auto實(shí)現(xiàn)垂直居中，可以使用手動(dòng)創(chuàng)建垂直自動(dòng)填充功能進(jìn)行居中
不兼容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>
之前我以為這里的垂直居中是因?yàn)?code>position的top bottom的拉伸作用使元素上上不去下下不來才居中的捣卤，但是這里如果我們將.point08 .son的margin：auto刪除忍抽，將不再居中，所以position只是用來提供自動(dòng)填充的功能
還有一種董朝，如果不考慮水平居中的話鸠项，可以如下：
.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合并的時(shí)候祟绊，就可能讓子的margin沒用-
絕對(duì)定位的非定位方向的
margin,因?yàn)樵O(shè)置了right，這樣left沒有設(shè)置的時(shí)候哥捕，調(diào)試的再大也沒有用了牧抽，但是如果給left：0一個(gè)值，元素立馬會(huì)因?yàn)?code>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>這個(gè)時(shí)候遥赚，只要margin小于256 無論正負(fù)都不變化
-
內(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>這個(gè)時(shí)候扬舒，margin-top往上一定程度后就無法再移動(dòng)了，比如margin-top:-200px;上移動(dòng)了200px;但是在將其改為300還是200的位置鸽捻，并不會(huì)因此而進(jìn)行改變
