理解可視尺寸 和 占據(jù)尺寸
-
可視尺寸理解元素的可見大小，也就是不包含margin的盒模型。
image.png 占據(jù)尺寸為元素在文檔流中的占用大小，也就是占用了多少地方，后面的元素會盡可能的挨著他。
謹記元素在文檔流中的排版是按照他的占據(jù)尺寸。
謹記元素在文檔流中的排版是按照他的占據(jù)尺寸。
出現(xiàn)怪異排版要清楚元素的占據(jù)尺寸是哪一塊，因為有可能占據(jù)尺寸比可視尺寸要小。
.parent {
background: #edf1f5;
border: 1px solid;
width: 300px;
margin: 0 auto;
font-size: 0;
}
.child1 {
display: inline-block;
background: yellow;
height: 100px;
width:100px;
margin-bottom: -50px;
}
一、margin 和可視尺寸
- margin滿足以下情況下會影響寬度的尺寸
沒有設定width的 普通block元素 。不包括以下元素， 也就是元素會占滿父元素寬度的情況下。
float元素， absolute絕對定位元素, fixed固定定位元素, inline內(nèi)嵌元素, table-cell單元格元素
.child {
background: yellow;
margin-left: -50px;
margin-right: -50px;
height: 50px;
}
二、margin和百分比單位
一、margin的四個方向的%單位，都是相對于元素的寬度的。
二 、如果元素是絕對定位元素，那么他是相對于帶有定位屬性的父級的寬度。
三、margin的重疊
- margin的重疊只會發(fā)生在垂直方向上，會有以下幾種情況
- 子元素與父元素之間的重疊
- 相鄰元素的重疊
- 子元素與父元素之間清除margin
1、父元素設置為塊級格式化上下文(BFC)，比如說設置父元素為
overflow: hiddenfloatdisplay: inline-blockposition: absolute等...
2、父元素設置上邊框或下邊框border-bottom / padding-top
3、父元素設置上填充或下填充padding-bottom / padding-top
四、 margin的auto （自動填充值）
默認一個塊級元素的寬度是會自動填充它父級元素的寬度，但是當我們設置了元素的寬度以后，那么元素的就會按照我們設置的寬度來顯示，如果說設置的寬度比父級元素的寬度要大，那么是沒什么問題的，要是設置的寬度比父級元素的寬度小，那么這時候空白的多余的放就會是margin來填充的。
image.png
就是你強制設置他的margin-right屬性，也是沒用的，就是這么霸道。。。
- 我們可以利用這些個自動填充的特性來做一些事情.
比如讓元素右對齊，只需要設置
margin-left:auto就可了
image.png
比如我們都知道的居中對齊margin: 0 auto
image.png
再比如我們的垂直居中
注意這里使用css3的writing-mode: vertical-lr這個屬性是使元素內(nèi)部的流動是從上到下流動的所以他跟左右使用auto一樣，會垂直居中了。
.parent {
background: #edf1f5;
height: 150px;
writing-mode: vertical-lr;
width: 100%;
}
.child {
background: yellow;
height: 50px;
width: 300px;
margin: auto;
}
還可以利用position: absolute 實現(xiàn)絕對居中。
.parent {
background: #edf1f5;
height: 150px;
position: relative;
}
.child1 {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: yellow;
height: 50px;
width: 300px;
margin: auto;
}
五、margin的負值
負值的margin會拉伸 沒有設置 寬度值的block元素的寬度，高度不起作用。
image.png
設置了寬高的元素設置負值的margin，它的占據(jù)尺寸會坍塌,會影響后續(xù)元素的布局
image.png
六、margin的實用技巧
-
解決列表寬度問題。
image.png
給ul加上
margin-right: -20px會增加ul20的寬度，解決兩端對齊的子列表寬度不夠用的情況。
- 是現(xiàn)等高布局
利用margin負值會坍塌的的機制，給他設置一個很大的
margin-bottom坍塌值，然后再利用padding-bottom填補會來，再設置父元素的overflow:hidden, 這是后父元素的高度會是最高一個元素的高度，就實現(xiàn)等高布局（＾?＾●）
.container {
overflow: hidden;
}
.left, .right {
margin-bottom: -600px;
padding-bottom: 600px;
float: left;
width: 50%;
}
.left {
background: yellow;
}
.right {
background: green;
}
- 利用負值實現(xiàn)左邊自適應，又變固定寬度。
- html
<div class="box">
<p class="p">這是很多文字文字這是很多文字文字這是很多文字文字這是很多文字文字這是很多文字文字這是很多文字文字</p>
</div>
<img class="img" src="https://img3.mukewang.com/549beab90001be9037445616-200-200.jpg" alt="">
.box {
float: left;
background: #e7ecec;
width: 100%;
}
.box .p {
padding-right: 170px;
}
.img {
float: left;
width: 150px;
margin-left: -150px;
}
