一、前言
標(biāo)準(zhǔn)流布局
正常我們看到的所有的網(wǎng)頁(yè)標(biāo)簽都在標(biāo)準(zhǔn)流的布局中，也就是看到的標(biāo)簽都是從上到下，從左到右排列的。
脫離標(biāo)準(zhǔn)流布局
有時(shí)候我們想要某個(gè)工具欄或者某個(gè)自定義的div層懸浮在瀏覽器的上下左右位置(或者網(wǎng)頁(yè)的任何位置)，這個(gè)圖層不會(huì)隨著網(wǎng)頁(yè)的滾動(dòng)而移出它固定在屏幕的那個(gè)位置范圍，這個(gè)時(shí)候這個(gè)div層其實(shí)已經(jīng)脫離了標(biāo)準(zhǔn)流布局了。那么脫離標(biāo)準(zhǔn)流有幾種方式呢，兩種：
- float屬性
- position屬性搭配left/right/top/bottom屬性
二、float屬性
float屬性讓子標(biāo)簽浮動(dòng)在父標(biāo)簽的左邊和右邊。有兩個(gè)取值：left/right，代碼樣式和效果如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Float浮動(dòng)-脫離標(biāo)準(zhǔn)流</title>
<style>
#main{
background-color: red;
width: 500px;
height: 200px;
color: white;
}
.test1{
background-color: blue;
float: left;
width: 150px;
height: 60px;
}
.test2{
background-color: orange;
float: right;
}
.test3{
background-color: purple;
}
</style>
</head>
<body>
<div id="main">
<div class="test1">浮動(dòng)父標(biāo)簽左邊</div>
<div class="test2">浮動(dòng)父標(biāo)簽右邊</div>
<div class="test3">未浮動(dòng)的子標(biāo)簽</div>
</div>
</body>
</html>
float浮動(dòng)
PS：任何標(biāo)簽只要一浮動(dòng)，類(lèi)型就會(huì)被轉(zhuǎn)為行內(nèi)-塊級(jí)標(biāo)簽。
三、position定位屬性
position可以讓子標(biāo)簽在父標(biāo)簽的任意位置進(jìn)行定位。默認(rèn)值為static，要浮動(dòng)定位時(shí)設(shè)置子標(biāo)簽為absolute，父標(biāo)簽為relative，簡(jiǎn)稱(chēng)子絕父相。PS：任何標(biāo)簽只要設(shè)置position屬性，類(lèi)型就會(huì)被轉(zhuǎn)為行內(nèi)-塊級(jí)標(biāo)簽。下面是position的屬性：
position屬性
- absolute：絕對(duì)定位，自己的位置根據(jù)父標(biāo)簽體系中最后一個(gè)值為static的父標(biāo)簽進(jìn)行定位。
- relative：相對(duì)定位，相對(duì)于正常位置進(jìn)行定位。
- fixed：相對(duì)于瀏覽器窗口進(jìn)行定位。一般用于讓標(biāo)簽粘著瀏覽器的上下左右位置。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Position定位-脫離標(biāo)準(zhǔn)流</title>
<style>
*{
margin:0;
}
div.test1{
background-color: red;
height: 50px;
position: fixed;
top:0;
width: 50%;
}
div.test2{
margin:100px;
width: 200px;
height: 150px;
background-color: greenyellow;
position: relative;
}
div.test3{
width: 100px;
height: 40px;
background-color: purple;
position: absolute;
left: 0;
bottom:0;
}
</style>
</head>
<body>
<div class="test1">定位到瀏覽器的頂部</div>
<div class="test2">
<div class="test3">position定位</div>
</div>
</body>
</html>
position定位
四、總結(jié)
float屬性和position屬性區(qū)別
- float屬性：只可以浮動(dòng)在父標(biāo)簽的左邊或右邊。設(shè)置float屬性的標(biāo)簽還是跟父標(biāo)簽中的其他標(biāo)簽有關(guān)系，比如說(shuō)，父標(biāo)簽的下一個(gè)子標(biāo)簽還是會(huì)相對(duì)于它的左上角進(jìn)行定位。
- position定位：可以在任何位置浮動(dòng)定位。設(shè)置position屬性的標(biāo)簽脫離了標(biāo)準(zhǔn)了，其他任何標(biāo)簽不受它影響。
最后，如果有什么問(wèn)題歡迎向我指出，謝謝。
