欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

有關(guān)絕對(duì)定位的全面理解

  發(fā)布時(shí)間：2016-07-20 09:58:46   作者：佚名   我要評(píng)論
下面小編就為大家?guī)?lái)一篇有關(guān)絕對(duì)定位的全面理解。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>有關(guān)絕對(duì)定位的理解</title>
</head>
<style type="text/css">

/*  1.未被設(shè)置定位之前是大盒子包裹著小盒子，符合標(biāo)準(zhǔn)文檔流，如圖片1所示

.box1{
width: 500px;
height: 500px;
background:red;
}
.box2{
width: 200px;
height: 200px;
background:blue;
}*/

圖片1


/*2. 絕對(duì)定位使元素的位置與文檔流無(wú)關(guān)，因此不占據(jù)空間。

這一點(diǎn)與相對(duì)定位不同，相對(duì)定位實(shí)際上被看作普通流定位模型的一部分，
因?yàn)樵氐奈恢孟鄬?duì)于它在普通流中的位置。絕對(duì)定位的元素的位置相對(duì)于最近的已定位祖先元素，
如果元素沒(méi)有已定位的祖先元素，那么它的位置相對(duì)于最初的包含塊。

如圖2所示
.box1{
width: 500px;
height: 500px;
background:red;
position: relative;
}
.box2{
width: 200px;
height: 200px;
background:blue;
position:absolute;
top:150px;
left:150px;

}*/

圖片2



/*3、box2沒(méi)有寬高并且在不設(shè)置定位的情況下,box2會(huì)被box1包裹,符合標(biāo)準(zhǔn)文檔流，并且在占據(jù)文檔的位置,
寬繼承父元素的寬,高由內(nèi)容自動(dòng)撐開(kāi)。

如圖片3.
.box1{
width: 500px;
height: 500px;
background:red;
}
.box2{
background:blue;
}*/

圖片3


/*4、box2沒(méi)有寬高在設(shè)置定位的情況下,box2會(huì)脫離文檔流,并且位置在指定相對(duì)于相對(duì)定位元素的位置,
寬會(huì)失效,就是說(shuō)寬高都由內(nèi)容自動(dòng)撐開(kāi)的.如圖片4.如需要寬高需另設(shè)置*/

.box1{
width: 500px;
height: 500px;
background:red;
position: relative;
}
.box2{
background:blue;
position:absolute;
top:150px;
left:150px;
}

圖片4

</style>
<body>
<div class="box1">
<div class="box2">這是一個(gè)小盒子</div>
</div>
</body>
</html>

以上這篇有關(guān)絕對(duì)定位的全面理解就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

原文地址：http://www.cnblogs.com/fybsp58/p/5684711.html

相關(guān)文章

最新評(píng)論