網頁端的布局方式比起iOS客戶端比較靈活，iOS從最初的絕對定位，逐步發展到現在的autolayout，可以通過約束設置控件相對于其他控件的邊距。但是比起網頁端，很多需求實現起來還是很難實現，所以學習下網頁的CSS布局方式，長長見識，記錄下知識，希望以后自己用到的時候不會完全沒有思路。
CSS布局方式比較靈活多樣，根據排版方式不同可以分為標準流，浮動流，定位流。
1.標準流
標準流時瀏覽器的默認排版方式，在標準流中CSS元素分為以下三類元素
- 塊級元素
獨占一行（所以垂直排版），可以設置寬度和高度,如p,div,h,ul,ol,ul - 行內元素
在同一行顯示（所以水平排版），不能設置寬度和高度 a,img,select,input - 行內塊級元素
在同一行顯示（水平排版），可以設置寬度和高度。
標準流里面主要是根據設置元素的display為inline，block，inline-block來改變元素的顯示模式?？梢院芊奖愕目刂圃氐乃胶痛怪迸虐娴模材軌蚩刂圃氐拇笮?。但是僅僅依靠標準流，許多網頁布局效果無法實現。
2. 浮動流排版
浮動流只有水平排版，只能設置某個元素左對齊或者右對齊，是一種半脫離標準流的排版方式，可以通過設置元素的float屬性設置浮動方向，當某一個元素浮動之后, 那么這個元素看上去就像被從標準流中刪除了一樣，如果前面一個元素浮動了, 而后面一個元素沒有浮動 , 那么這個時候前面一個元就會蓋住后面一個元素。
1.浮動流中沒有居中對齊, 也就是沒有center這個取值
2.在浮動流中是不可以使用margin: 0 auto;
- 特點:
1.在浮動流中是不區分塊級元素/行內元素/行內塊級元素的無論是級元素/行內元素/行內塊級元素都可以水平排版
2.在浮動流中無論是塊級元素/行內元素/行內塊級元素都可以設置寬高
3.綜上所述, 浮動流中的元素和標準流中的行內塊級元素很像
實現案例
2.1 浮動元素貼靠現象
規則
- 如果父元素的寬度能夠顯示所有浮動元素, 那么浮動的元素會并排顯示
- 如果父元素的寬度不能顯示所有浮動元素, 那么會從最后一個元開始往前貼靠
- 如果貼靠了前面所有浮動元素之后都不能顯示, 最終會貼靠到父元素的左邊或者右邊
<style>
.father{
width: 400px;
height: 400px;
border: 1px solid #000;
}
.box1{
float: left;
width: 50px;
height: 300px;
background-color: red;
}
.box2{
float: left;
width: 50px;
height: 100px;
background-color: green;
}
.box3{
float: left;
width: 250px;
height: 100px;
background-color: blue;
}
</style>
<div class="father">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
2.2 文字環繞現象
浮動元素不會擋住沒有浮動元素中的文字, 沒有浮動的文字會自動給浮動的元素讓位置,這個就是浮動元素字圍現象。
<style>
.c1 {
float: left;
background-color: green;
}
.c2{
background-color: red;
width: 200px;
}
</style>
2.3 浮動元素的高度
在標準流中內容的高度可以撐起父元素的高度，在浮動流中浮動的元素是不可以撐起父元素的高度的。
<head>
<meta charset="UTF-8">
<style>
*{
margin: 0;
padding: 0;
}
div{
border: 1px solid #000;
}
p{
float: left;
width: 50px;
height: 50px;
background-color: red;
}
</style>
</head>
<body>
<div>
<p></p>
</div>
</body>
清除浮動影響
浮動的元素在標準流中默認不占位置，但是有點時候確實需要浮動的元素占據位置，否則頁面會塌陷，有以下幾種方式解決浮動帶來的問題。
給浮動元素的一個父標簽設置高度，比如給上段代碼的div設置個高度。這個方法不常用，盡量不寫高度。
clear屬性
可以給浮動元素的后面的盒子添加clear屬性。
none: 默認取值, 按照浮動元素的排序規則來排序(左浮動找左浮動, 右浮動找右浮動)
left: 不要找前面的左浮動元素
right: 不要找前面的右浮動元素
both: 不要找前面的左浮動元素和右浮動元素
<head>
<meta charset="UTF-8">
<style>
*{
margin: 0;
padding: 0;
}
p{
background-color: red;
float: left;
}
div{
background-color: green;
float: left;
clear: left;
}
</style>
</head>
<body>
<p>段落段落浮動了</p>
<div>div也浮動了但是沒有出現在p的右邊</div>
</body>
3.設置overflow屬性
1overflow: hidden的作用很多不局限于解決浮動的元素在標準流中不占位置的問題。
- 可以將超出標簽范圍的內容裁剪掉
- 清除浮動
-
可以通過overflow: hidden;讓里面的盒子設置margin-top之后, 外面的盒子不被頂下來
overflow.png
3.定位流排版
3.1 相對定位
相對定位就是相對于自己以前在標準流中的位置來移動,4用于對元素進行微調或者配合絕對定位來使用。
- 相對定位是不脫離標準流的, 會繼續在標準流中占用一份空間
- 在相對定位中同一個方向上的定位屬性只能使用一個，
- 由于相對定位是不脫離標準流的, 所以在相對定位中是區分塊級元素/行內元素/行內塊級元素
- 由于相對定位是不脫離標準流的, 并且相對定位的元素會占用標準流中的位置, 所以當給相對定位的元素設置margin/padding等屬性的時會影響到標準流的布局。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 50px;
height: 50px;
}
.d1{
background-color: red;
}
.d2{
background-color: green;
position: relative;
left: 10px;
top: 10px;
/*同一個方向只能有一個*/
right: 10px;
margin-bottom: 20px;
}
.d3{
background-color:yellow;
}
span{
position: relative;
left: 10px;
top: 10px;
width: 1000px;
background-color: red;
}
</style>
</head>
<body>
<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
<span>這是span標簽</span>
</body>
</html>
3.2絕對定位
絕對定位的元素脫離標準流，不區分塊級元素/行內元素/行內塊級元素。
3.2.1 參考點選取規則
默認情況下所有的絕對定位的元素, 無論有沒有祖先元素, 都會以body作為參考點
如果一個絕對定位的元素有祖先元素, 并且祖先元素也是定位流, 那么這個絕對定位的元素就會以定位流的那個祖先元素作為參考點
只要是這個絕對定位元素的祖先元素都可以
指的定位流是指絕對定位/相對定位/固定定位
定位流中只有靜態定位不行
如果一個絕對定位的元素有祖先元素, 并且祖先元素也是定位流, 而且祖先元素中有多個元素都是定位流, 那么這個絕對定位的元素會以離它最近的那個定位流的祖先元素為參考點
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 50px;
height: 50px;
}
.d1{
background-color: red;
}
.d2{
background-color: green;
position: absolute;
left: 30px;
width: 100px;
top: 10px;
font-size: 12px;
}
.d3{
width: 100px;
height: 100px;
background-color:cyan;
/*祖先元素的有定位*/
position: relative;
}
.d4{
position: absolute;
width: 50px;
height: 50px;
bottom: 0px;
right: 0px;
background-color: blue;
}
</style>
</head>
<body>
<div class="d1"></div>
<div style="background-color: deeppink"><span class="d2">這是span標簽</span></div>
<div class="d3">
<div class="d4"></div>
</div>
</body>
3.3固定定位
固定定位和前面學習的背景關聯方式很像, 背景定位可以讓背景圖片不隨著滾動條的滾動而滾動, 而固定定位可以讓某個盒子不隨著滾動條的滾動而滾動
1.固定定位的元素是脫離標準流的, 不會占用標準流中的空間
2.固定定位和絕對定位一樣不區分行內/塊級/行內塊級
<head>
<meta charset="UTF-8">
<title>83-定位流-固定定位</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 100px;
height: 100px;
}
.box1{
background-color: red;
}
.box2{
background-color: green;
position: fixed;
}
.box3{
background-color: blue;
}
.box4{
height: 2000px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<!--<span>我是span</span>-->
</body>
