background-position
取值為百分比的計算方式margin
相鄰折疊問題position
的absolute
和relative
定位top、left、right、bottom
問題.box {
width:400px;
height:400px;
background-color:black;
background-image:url(mm.jpg); /* 圖片原尺寸150 * 225 */
background-repeat:no-repeat;
background-position:50% 50%;
}
background-position: 50% 50%
你用的不少,這是讓背景圖片居中,相當于center center
。50%
是按照圖片的尺寸(150 * 225
)來計算的,那么其值轉換為像素值應該是75px 112.5px
,你覺得背景圖片能在400 * 400
的塊里居中嗎?答案很明顯,是否定的,那是如何計算的呢?background-size
)不做任何的重置(也就是100% 100%)時,水平百分比的值等于容器寬度百分比值減去背景圖片寬度百分比值。垂直百分比的值等于容器高度百分比值減去背景圖片高度百分比值。水平位置: (400 - 150) * 50% = 125px
垂直位置: (400 - 225) * 50% = 87.5px
margin
,可是它們之間的距離就是不等于兩個div的margin
之間的和,這是為什么呢?其實是因為在某些情況下,兩個或多個塊元素
的相鄰邊界(其間沒有任何非空內容、padding、邊框
)會發(fā)生合并成單一邊界,也就是標題說的折疊。margin
)的折疊規(guī)則:overflow
且值不為visible
的塊級元素與它的子元素之間的外邊距也不會被折疊position:absolute;
)元素的margin
不與任何margin
發(fā)生折疊,并且與它的子元素之間的margin
也不會發(fā)生折疊padding
替代margin
overflow:hidden
padding:1
或者border
float
)或設為(display:inline-block
)position:absolute;
)position:absolute
)的top、left、right、bottom
是相對于其具有相對定位屬性(position
不為static
)的父元素(不一定是其直接父元素,有可能是祖先元素)。top、bottom
)同時存在時,只有top
起作用;如果兩者(left、right
)同時存在時,只有left
起作用。 position:relative
)元素會保留原來占有的位置,其后面的元素按原來文檔流仍然保持原來的位置 top
的值表示對象相對原位置向下偏移的距離 bottom
的值表示對象相對原位置向上偏移的距離 left
的值表示對象相對原位置向右偏移的距離 right
的值表示對象相對原位置向左偏移的距離 top、bottom
)同時存在時,只有top
起作用;如果兩者(left、right
)同時存在時,只有left
起作用。 <style>
.prev{
width:100px;
height:100px;
position:relative;
background:blue;
top:20px;
}
.next{
width:100px;
height:100px;
background:red;
}
.fl{
float:left;
margin:20px;
}
</style>
<div class="fl">
<div class="prev" style="position:static"></div>
<div class="next"></div>
</div>
<div class="fl">
<div class="prev"></div>
<div class="next"></div>
</div>
position:relative
的元素設置了top:20px
,雖然(相對其原位置)向下移動了20px
,可是并不會影響其后面的元素。.box {
color: red;
}
/*第一種*/
.parent .box {
color: green;
}
/*第二種*/
.box {
color: green !important;
}
.box.box {
color: green;
}
更多建議: