css概述（續2）
1.檔案流
檔案流指的是檔案中的標簽在排列時所占用的位置，將長提自上而下分成一行行，并在每行中按從左至右的順序排放標簽，即為檔案流，
在檔案流中標簽默認會緊貼到上一個標簽的右邊，如果右邊不足以放下標簽，標簽則會另起一行，在新的一行中繼續從左至右擺放，
2.浮動
浮動是使標簽脫離原來的檔案流，在父標簽中浮動起來，
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#div{
margin: 0px auto;
width: 504px;
}
/* 浮動是使標簽脫離原來的檔案流，在父標簽中浮動起來，
浮動使用float屬性，
該屬性有三個值：none 不浮動
left 向左浮動
right 向右浮動
塊級標簽和行級標簽都可以浮動，，行級標簽浮動以后將會自動變為塊級標簽
當一個塊級標簽浮動以后，寬度會默認是內容的寬度
當一個標簽浮動以后，其下方的標簽會上移，標簽的內容將會環繞在標簽的周圍，
*/
.box_1{
float: left;
background-color: fuchsia;
color: aliceblue;
padding: 10px 20px;
margin: 10px auto;
}
#box2{
width: 504px;
height: 400px;
background-color: aqua;
}
.box2_1{
background-color: gold;
}
.box2_2{
background-color: brown;
}
.box2_3{
background-color: darkorange;
}
.box2_1,.box2_2,.box2_3{
height: 300px;
width: 168px;
float: left;
}
</style>
</head>
<body >
<div id="div">
<div id="box">
<div class="box_1">首頁</div>
<div class="box_1">熱門</div>
<div class="box_1">關注</div>
<div class="box_1">同城</div>
<div class="box_1">榜單</div>
<div class="box_1">明星</div>
<div class="box_1">國際</div>
<!--浮動會使標簽完全脫離檔案流，不在檔案中占用位置，也就是浮動標簽不會撐開父標簽
clear屬性可以用于清除標簽周圍的浮動對標簽的影響，使其他標簽的位置不發生變化
它的值對應浮動屬性的值：left 忽略左側浮動
right 忽略右側浮動
both 忽略全部浮動
我們一般在浮動標簽的后面加一個空白div標簽來清除浮動標簽的影響
-->
<div style="clear: left;"></div>
</div>
<div id="box2">
<div class="box2_1">左</div>
<div class="box2_2">中</div>
<div class="box2_3">右</div>
<div style="clear: left;"></div>
<div class="box2_4">下</div>
</div>
</div>
</body>
</html>
上述代碼實作結果如下：（網頁中通過浮動來布局，如下圖所示，我們可以在左、中、右、下來布置我們想要的內容，）
3.css定位
定位就是允許你定義的標簽相對于其正常位置，或者相對于父標簽、另一個標簽甚至瀏覽器視窗本身而出現的位置，
它分為三種：相對定位、絕對定位、固定定位
（1）相對定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box1{
background-color: #ffaaff;
width: 100px;
height: 100px;
/* 相對定位就是相對于它的起點進行移動，移動后原來的位置還被占用，
通過 position:relative; 開啟相對定位
left right top bottom 四個屬性來設定標簽的偏移量，
開啟了相對定位以后，不設定偏移量，標簽不會發生變化；
相對定位的標簽不會脫離檔案流，也不會改變標簽的性質；
相對定位會使標簽提升一個層次
*/
position: relative;
left: 100px;
top: 100px;
}
#box2{
background-color: #0055ff;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div id="box1">
開啟相對定位的區域
</div>
<div id="box2">
對照區域
</div>
</body>
</html>
上述代碼實作結果如下：
（2）絕對定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box1{
background-color: #00FFFF;
width: 100px;
height: 100px;
/* 絕對定位是不占空間的
運用了絕對定位的標簽會脫離原來的檔案流，浮動起來
通過position：absolute;來開啟絕對定位
left right top bottom 來設定偏移量，
絕對定位是相對于離它最近的 開啟了定位的祖先標簽進行定位；
一般情況下，開啟子標簽的絕對定位會同時開啟父標簽的相對定位，
如果所有的祖先標簽都沒有開啟定位，則會相對于瀏覽器視窗進行定位，
絕對標簽會使標簽提升一個層次，會改變標簽的性質，行級標簽會變成塊級標簽，*/
position: absolute;
left: 100px;
top: 100px;
}
#div1{
background-color: #00aaff;
width: 200px;
height: 200px;
position: relative;
}
</style>
</head>
<body>
<div id="div1">
對照區域
<div id="box1">
移動區域
</div>
</div>
</body>
</html>
上述代碼實作結果如下：
（3）固定定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<a name="top"></a>
<!-- 固定定位是把使用了固定定位的標簽 固定在某個位置，即便滑動滑鼠，該標簽位置不變
通過position: fixed;來開啟固定定位
left right top bottom 來設定偏移量，
它是相對于瀏覽器視窗進行定位的，
-->
<div style="height: 21px; position: fixed;top: 0px;left: 20px;">
<a href="#p1">產品1</a>
<a href="#p2">產品2</a>
<a href="#p3">產品3</a>
<a href="#p4">產品4</a>
<a href="#p5">產品5</a></div>
<hr />
<h3>產品1 <a name="p1"></a> </h3>
<img src="img/1.png" />
<h3>產品2 <a name="p2"></a></h3>
<img src="img/2.png" />
<h3>產品3 <a name="p3"></a></h3>
<img src="img/3.png" />
<h3>產品4 <a name="p4"></a></h3>
<img src="img/4.png" />
<h3>產品5 <a name="p5"></a></h3>
<img src="img/5.png" />
<hr />
<a href="#top" style="position: fixed;right: 20px;bottom: 20px;">回傳頂部</a>
</body>
</html>
上述代碼實作結果如下：（上述代碼對 下圖中的頂部藍色字體以及右下角的 “回傳頂部”使用了固定定位，即使滾動滑鼠，這兩個位置的內容也不會移動，）
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/197234.html
標籤：其他
上一篇：vue 敏感詞過濾 前端
下一篇：一個程式員如何給LPL發彈幕加油