一、文檔流：
文檔流處在網頁的最底層， 它表示的是一個頁面的位置
我們所創建的元素默認都處在文檔流中
元素在文檔流中的特點：
塊元素：
1. 塊元素在文檔流中會獨佔一行， 塊元素會自上向下排列。
2. 塊元素在文檔流中默認寬度是父元素的100 % （鋪滿父元素）。
3. 塊元素在文檔流中默認高度被內容(或者子元素) 撐開（ 包裹內容）
內聯元素：
1. 內聯元素在文檔流中只佔自身大小， 會默認從左向右排列，如果一行中不足以容納所有的內聯元素， 則換到下一行，
繼續自左向右。
2. 在文檔流中，內聯元素的默認寬度和高度被內容撐開（ 包裹內容）。
3. 在文檔流中，內聯元素設置寬高無效。
代碼示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box1 {
width: 100px;
height: 100px;
background-color: cornflowerblue;
}
.box2 {
background-color: yellow;
}
span {
width: 100px;
height: 100px;
background-color: turquoise;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"><span>人的生命是有限的</span></div>
<span>zhh1</span>
<span>zhh1</span>
<span>zhh1</span>
<span>zhh1</span>
<span>zhh1</span>
<span>zhh1</span>
<span>zhh1</span>
<span>zhh1</span>
<span>zhh1</span>
</body>
</html>
二、元素脫離文檔流後的特點：
塊級元素脫離文檔流以後：
1. 不會獨佔一行
2. 寬度高度都被內容(或者子元素)撐開
3. 可以設置寬高
內聯元素脫離文檔流以後：
1.會變成塊級元素（1. 不會獨佔一行2. 寬度高度都被內容撐開3. 可以設置寬高）
開啓 浮動，絕對定位，固定定位 都會使元素脫離文檔流。
代碼示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
padding: 0px;
margin: 0px;
}
.box1 {
height: 100px;
background-color: yellow;
float: left;
}
.box2 {
background-color: turquoise;
float: left;
}
.box3 {
width: 100px;
height: 100px;
background-color: violet;
float: left;
}
</style>
</head>
<body>
<div class="box1">zhh1</div>
<!-- 塊級元素，寬高被子元素撐開 -->
<div class="box2">
<div style="width: 100px;height: 100px; background-color: blueviolet;">box4</div>
</div>
<!-- 內聯元素 -->
<span class="box3">zhh3</span>
</body>
</html>
三、浮動
3.1浮動的使用：
使用float來使元素浮動， 從而脫離文檔流
可選值：
none， 默認值，不浮動，元素默認在文檔流中排列
left， 元素會立刻脫離文檔流， 向父元素左上側浮動
right， 元素會立即脫離文檔流， 向父元素右上側浮動
當爲一個元素設置浮動（ float屬性是一個非none的值） 的特點
1. 元素會脫離文檔流， 元素脫離文檔流以後， 他下邊的元素會立即向上移動
2. 元素浮動以後， 會盡量向父元素的左上角， 或者右上角移動，
直到遇到父元素的邊框或者其他浮動元素,會停止移動
3. 如果浮動元素上邊是一個沒有浮動的塊元素， 則浮動元素不會高過塊元素
4. 浮動元素不會高過他上邊開啓浮動的兄弟元素， 最多一樣高
5. 浮動元素不會蓋住文字， 文字會自動環繞在浮動元素的周圍,
所以我們可以通過浮動來設置文字環繞圖片的效果
代碼示例1：浮動特點1-4
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
padding: 0px;
margin: 0px;
}
.box1 {
width: 600px;
height: 100px;
background-color: brown;
float: left;
}
.box2 {
width: 600px;
height: 100px;
background-color: aqua;
float: left;
}
.box3 {
width: 100px;
height: 100px;
background-color: yellow;
float: right;
;
}
</style>
</head>
<body>
<!-- <div style="margin-top: 100px; height: 500px; background: yellowgreen;">-->
<div class="box1">zhh1</div>
<div class="box2">zhh2</div>
<!-- box3不會高於box2 -->
<div class="box3">zhh3</div>
<!-- </div>-->
</body>
</html>
代碼示例2：浮動特點5，文字環繞圖片的效果
效果圖：
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
padding: 0px;
margin: 0px;
}
.touxiang {
width: 145px;
height: 145px;
padding-right: 10px;
padding-bottom: 2px;
float: left;
}
</style>
</head>
<body>
<img class="touxiang" src="http://img0.imgtn.bdimg.com/it/u=1426019990,2186068774&fm=26&gp=0.jpg">
<div>
如果你是一滴水，你是否滋潤了一寸土地？如果你是一線陽光，你是否照亮了一分黑暗？
如果你是一顆糧食，你是否哺育了有用的生命？ 如果你是一顆最小的螺絲釘，
你是否永遠守在你生活的崗位上？ 如果你要告訴我們什麼思想，你是否在日夜宣揚那最美麗的理想？
你既然活着，你又是否爲了未來的人類生活付出你的勞動，使世界一天天變得更美麗？
我想問你，爲未來帶來了什麼？在生活的倉庫裏，我們不應該只是個無窮盡的支付者。
</div>
</body>
</html>
3.2、清除浮動元素對當前元素的影響
由於元素浮動的影響，後面的兄弟元素（當前元素），會整體向上移動，會移動到浮動元素的下面。
我們有時希望清除掉其他浮動元素對當前元素的影響，這時可以使用clear來完成
clear:清除浮動元素對當前元素的影響
可選值：
none 默認值，不清楚浮動
left 清除左側浮動元素對當前元素的影響
right 清除右側浮動元素對當前元素的影響
both 清除兩側浮動元素對當前元素的影響（清除對本元素影響最大的元素影響）
清除浮動以後，元素不會移動到浮動元素的下面，跟在浮動元素的後面
代碼示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
.box1{
width: 50px;
height: 50px;
background-color: #00FFFF;
float: left;
}
.box2{
width: 150px;
height: 150px;
background-color: #7FFF00;
float: right;
}
.box3{
width: 200px;
height: 200px;
background-color: #D2691E;
clear: both;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
3.3浮動引起的高度塌陷問題：
如果所示紅色部分是父元素（父元素的邊框），綠色部分是子元素，子元素沒有把父元素撐起來。
原因如下：
在文檔流中，父元素的高度默認是被子元素撐開的，
也就是子元素多高，父元素就多高。
但是當爲子元素設置浮動以後，子元素會完全脫離文檔流，
此時將會導致子元素無法撐起父元素的高度，導致父元素高度塌陷。
由於父元素的高度塌陷了，則父元素下面的所有元素都會向上移動，這樣會導致頁面佈局混亂。
所以在開發中一定要避免高度塌陷問題，
我們可以將父元素的高度寫死（和子元素一樣高），以避免塌陷問題出現，
但是一旦高度寫死，父元素的高度將不能自動適應子元素的高度，所以這種方案不推薦使用
高度塌陷代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
/* 父元素 */
.box1 {
border: 10px solid red;
/* 防止塌陷可以設置子元素和父元素的高度一樣 */
/* height: 100px; */
}
/* 子元素 */
.box2 {
width: 100px;
height: 100px;
background-color: yellowgreen;
float: left;
}
.box3 {
height: 100px;
background-color: #6495ED;
}
</style>
</head>
<body>
<!-- 父元素 -->
<div class="box1">
<!-- 子元素 -->
<div class="box2">
</div>
</div>
<div class="box3">
</div>
</body>
</html>
3.4解決浮動引起的高度塌陷問題，方案1，開啓BFC
根據W3C的標準，在頁面中元素都有一個隱含的屬性叫做Block Formatting Context
簡稱BFC，該屬性可以設置打開或者關閉，默認是關閉的
當開啓元素的BFC以後，元素具有如下特性：
1.父元素的垂直外邊距不會和子元素重疊（設置子元素外邊距，父元素不會跟着走）
2.開啓BFC的元素不會被浮動元素所覆蓋
3.開啓BFC的元素可以包含浮動的子元素（不會塌陷）
開啓BFC
開啓的方式很多，推薦使用：
將元素的overflow設置爲一個非visible的值
推薦方式：將overflow設置爲hidden是副作用最小的開啓BFC的方式
副作用：子元素有相對定位時，設置外邊距，超出父元素的寬高會隱藏
但在IE6及以下的瀏覽器中並不支持BFC，所以使用這種方式不能兼容IE6.
在IE6中雖然沒有BFC,但是具有另一種隱含的的屬性叫做hasLayout.
該屬性的作用和BFC類似，所在的IE6瀏覽器可以通過開啓hasLayout來解決該問題
開啓方式很多，我們直接使用一種副作用最小的:
直接將元素的zoom設置爲1.
zoom屬性解析：
zoom表示放大的意思，後邊跟隨一個數值，寫幾就是放大幾倍
zoom:1表示不放大元素，但是通過這樣的方式可以開啓hasLayout
zoom這個樣式，只在IE中支持，其他瀏覽器不支持
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
/* 父元素 */
.box1 {
border: 10px solid red;
/* 解決高度塌陷 */
/* 其他瀏覽器 */
overflow: hidden;
/* 兼容IE6及以下 */
zoom: 1;
}
/* 子元素 */
.box2 {
width: 100px;
height: 100px;
background-color: yellowgreen;
float: left;
}
.box3 {
height: 100px;
background-color: #0000FF;
}
</style>
</head>
<body>
<!-- 父元素 -->
<div class="box1">
<!-- 子元素 -->
<div class="box2">
</div>
</div>
<div class="box3">
</div>
</body>
</html>
3.5解決浮動引起的高度塌陷問題，方案2，清除浮動的一種寫法
解決高度塌陷方案二：
可以在高度塌陷的父元素的最後，添加一個空白的div,
由於這個div並沒有浮動，所以他是可以撐開父元素的高度的，
然後對其進行清除浮動，這樣可以通過這個空白的div來撐開父元素的高度
基本沒有副作用，兼容所有的瀏覽器
使用這種方式雖然可以解決問題，但是會在頁面中添加多餘的結構（多添加了一個div）
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
.box1{
border: 1px red solid;
}
.box2{
width: 100px;
height: 100px;
background-color: yellow;
float: left;
}
.box3{
width: 100px;
height: 100px;
background-color: #00FFFF;
float: left;
}
.box4{
clear: both;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">
</div>
<div class="box3">
</div>
<div class="box4">
</div>
</div>
</body>
</html>
3.6解決浮動引起的高度塌陷問題，方案3，清除浮動的另一種寫法
參考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/clear
解決高度塌陷方案三：
可以通過after僞類向元素的最後添加一個空白的塊元素（子元素），然後對其清除浮動，
這樣和添加一個div的原理一樣，可以達到一個相同的效果，
而且不會再頁面中添加多餘的div,這是我們最推薦的使用方式，幾乎沒有副作用
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
.box1 {
border: 1px red solid;
}
.box2 {
width: 100px;
height: 100px;
background-color: yellow;
float: left;
}
.box3 {
width: 100px;
height: 100px;
background-color: #00FFFF;
float: left;
}
/* 寫一個通用選擇器，那個元素出現高度塌陷，則添加 */
.clearfix:after {
content: "";
display: block;
clear: both;
}
/* 兼容IE6及以下 */
/* IE6及以下，不支持after的僞類，所以還是要通過zoom，開啓hasLayout,解決高度塌陷 */
.clearfix{
zoom: 1;
}
</style>
</head>
<body>
<div class="box1 clearfix">
<div class="box2">
</div>
<div class="box3">
</div>
</div>
</body>
</html>
四、垂直外邊距重疊：
垂直外邊距重疊：
- 在網頁中 相鄰的 垂直方向的 外邊距會發生外邊距的重疊
所謂的外邊距重疊指兄弟元素之間的相鄰外邊距會取最大值而不是取和
如果父子元素的垂直外邊距相鄰了，則元素的外邊距會設置給父元素
（設置子元素外邊距，父元素會跟着走）
常見解決方法：
1.加個div，不讓父元素和子元素外邊距相鄰
<div style="height: 1px;"></div>
2.設置父元素的上邊框，不讓父元素和子元素外邊距相鄰
border-top: yellowgreen 1px solid;
3.設置父元素的內上邊距，不讓父元素和子元素外邊距相鄰
padding-top: 1px;
4.使用空的 table 標籤，可以隔離父子元素的外邊距，阻止外邊距重疊
<table></table>
5使用僞元素選擇器添加一個table元素
element::before{
content: "";
display: table;
}
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 解決垂直外邊距重疊問題的終極解決方案 -->
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
.container{
width: 200px;
height: 200px;
background-color: #FFFF00;
}
/* 使用僞元素選擇器添加一個table元素 */
.container::before{
display: table;
content: "";
}
.box1{
width: 100px;
height: 100px;
background-color: #00FF00;
margin-top: 100px;
}
</style>
</head>
<body>
<!--
解決垂直外邊距重疊的最優方案
1使用空的 table 標籤，可以隔離父子元素的外邊距，阻止外邊距重疊
<table></table>
2使用僞元素選擇器添加一個table元素
element::before{
content: "";
display: table;
}
-->
<div class="container">
<!-- 使用空的 table 標籤，可以隔離父子元素的外邊距，阻止外邊距重疊 -->
<!-- <table></table> -->
<div class="box1">子元素</div>
</div>
</body>
</html>
五、封裝一個選擇器 同時解決 父子元素垂直外邊距重疊問題 和 父元素高度塌陷問題
封裝成一個僞元素選擇器
element::before,
element::after {
content: "";
display: table;
clear: both;
}
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 解決父子元素垂直外邊距重疊問題 和 解決父元素高度塌陷問題的綜合終極解決方案 -->
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
.container {
width: 200px;
height: 200px;
background-color: #FFFF00;
}
.box1 {
width: 100px;
height: 100px;
background-color: #00FF00;
margin-top: 100px;
}
/*解決父子元素垂直外邊距重疊問題 和 解決父元素高度塌陷問題 */
.container::before,
.container2::after {
content: "";
display: table;
clear: both;
}
.container2 {
border: 10px red solid;
}
.box4 {
width: 100px;
height: 100px;
background-color: #8A2BE2;
float: left;
}
</style>
</head>
<body>
<!--
解決父子元素垂直外邊距重疊問題 和 父元素高度塌陷問題
封裝成一個僞元素選擇器
element::before,
element::after {
content: "";
display: table;
clear: both;
}
-->
<!-- 垂直外邊距 -->
<div class="container">
<div class="box1">子元素</div>
</div>
<!-- 高度塌陷問題 -->
<div class="container2">
<div class="box4">box4</div>
</div>
</body>
</html>
六、元素的定位：
定位概述：
定位：就是本元素在父元素（或祖先元素）中擺放位置
通過定位可以任意的擺放元素
通過position屬性來設置元素的定位
可選值：
static: 默認值， 元素沒有開啓定位， 元素出現在正常的流中（ 忽略 top, bottom, left, right 或者 z - index 聲明）
relative: 開啓元素的相對定位
absolute: 開啓元素的絕對定位
fixed: 開啓元素的固定定位（ 也是絕對定位的一種）
當開啓了元素的定位（ position屬性值是一個非static的值） 時，
可以通過left, right, top, bottom四個屬性來設置元素的偏移量
left: 元素相對於其定位位置的左側偏移量
right: 元素相對於其定位位置右側的偏移量
top: 元素相對於其定位位置上邊的偏移量
bottom: 元素相對於其定位位置下邊的偏移量
通常只需要使用其中兩個就可以對元素進行定位
例如： left, top
注意：
left, right, top, bottom 是定位的偏移量
margin-left， margin-top， margin-right， margin-bottom 是外邊距
這兩組獨立屬性，開啓定位之後不影響外邊距（外邊距同樣有效）
6.1相對定位：
當元素的position屬性設置爲relative時， 則開啓了相對定位
1. 相對定位的元素不會脫離文檔流（ 後面元素不佔用他的位置）
2. 當開啓了元素的性對定位以後， 而不設置偏移量時， 元素不會發生任何變化
3. 相對定位是相對於元素在文檔流中原來的位置進行定位
4. 相對定位會使元素提升一個層級
5. 相對定位不會改變元素的性質， 塊元素還是塊元素， 內聯還是內聯
代碼示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box1 {
width: 100px;
height: 100px;
background-color: chocolate;
}
.box2 {
width: 100px;
height: 100px;
background-color: cyan;
position: relative;
top: 100px;
left: 100px;
}
.box3 {
width: 100px;
height: 100px;
background-color: chartreuse;
}
</style>
</head>
<body>
<div class="box1">zhh1</div>
<div class="box2">zhh2</div>
<div class="box3">zhh3</div>
</body>
</html>
6.2絕對定位：
當 position 屬性設置爲 absolute 時， 則開啓了元素的絕對定位
絕對定位
1. 開啓絕對定位， 會使元素脫離文檔流
2. 開啓絕對定位以後， 如果不設置偏移量， 則元素位置不會發生變化
3. 絕對定位是相對於離他最近的開啓了定位的祖先元素進行定位的，
（ 一般情況下， 開啓了子元素的絕對定位都會同時開啓父元素的相對定位）
如果所有所有祖先元素都沒有開啓定位， 則會相對於瀏覽器窗口進行定位
4. 絕對定位會使元素提升一個層級
5. 絕對定位會改變元素的性質，
內聯元素變成塊元素（1. 不會獨佔一行2. 寬度高度都被內容撐開3. 可以設置寬高）
塊元素不會獨佔一行，寬高都被內容撐開，可以設置寬高
代碼示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box1 {
width: 100px;
height: 100px;
background-color: chocolate;
}
.box2 {
width: 100px;
height: 100px;
background-color: cyan;
position: relative;
}
.box3 {
width: 100px;
height: 100px;
background-color: chartreuse;
}
.box4 {
width: 75px;
height: 75px;
background-color: crimson;
position: absolute;
left: 12px;
top: 12px;
}
.box5 {
background-color: darkcyan;
position: absolute;
left: 25px;
top: 25px;
}
</style>
</head>
<body>
<div class="box1">zhh1</div>
<div class="box2">
<!-- 相對於box2定位，內聯元素變成了塊級元素 -->
<span class="box4">box4</span>
<span class="box5">box5</span>
</div>
<div class="box3">zhh3</div>
</body>
</html>
6.3固定定位：
當 position 屬性設置爲 fixed 時， 則開啓了元素的固定定位
固定定位也是一種絕對定位， 他的大部分特點和絕對定位一樣。
不同的是：
固定定位永遠都相對於瀏覽器窗口定位。
固定定位在瀏覽器窗口某個位置， 不會隨着滾動條滾動
IE6不支持固定定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#box1 {
height: 100px;
background-color: blue;
}
#box2 {
height: 100px;
height: 100px;
background-color: yellow;
}
#box3 {
width: 100px;
height: 100px;
background-color: turquoise;
position: fixed;
left: 0px;
top: 0px;
}
</style>
</head>
<body style="height: 2000px;">
<div id="box1">zhh1</div>
<div id="box2">
<!-- 相對於瀏覽器窗口定位 -->
<div id="box3">zhh3</div>
</div>
</body>
</html>
七、元素的層級：
z-index設置層級，z 軸的值：
1默認層級：定位元素>浮動元素>文檔流中的元素
2開啓定位以後才能使用z-index設置層級
3層級高(z-index值大的元素)的元素蓋住層級低的元素
4如果z-index值一樣，或者都沒有z-index，則優先顯示下邊的元素
5父元素永遠不會蓋住子元素（一般是設置層級是兄弟元素相互覆蓋）。
代碼示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
.box1 {
width: 100px;
height: 100px;
background-color: #00FFFF;
position: relative;
}
.box2 {
width: 100px;
height: 100px;
background-color: #A52A2A;
position: absolute;
}
.box3{
width: 100px;
height: 100px;
background-color: #EE82EE;
position: relative;
}
.box4{
width: 100px;
height: 100px;
background-color: yellow;
position: relative;
left: 0px;
top: 200px;
z-index: 2;
}
.box5{
width: 50px;
height: 50px;
background-color: yellowgreen;
position: absolute;
left: 0px;
top: 0px;
z-index: 1;
}
</style>
</head>
<body>
<div class="box1">zhh1</div>
<div class="box2">zhh2</div>
<div class="box3">zhh3</div>
<div class="box4">
<div class="box5">
</div>
</div>
</body>
</html>
八、元素各種居中總結：
1.position是默認值的時候的居中：
元素水平居中：
margin: 0 auto;
元素豎直居中：
margin-top = （父佈局高度-自己高度）/2;
2.絕對定位，固定定位，相對定位的時候的居中：
元素水平居中：
left = (父佈局的寬度-自己寬度)/2;
變形寫法：
left: 50%;
margin-left: -(自己寬度/2);
元素豎直居中
top = （父佈局高度-自己高度）/2;
變形寫法
top: 50%;
margin-top: -(自己高度/2);
3.浮動的時候的居中：
水平居中：
margin-left: (父佈局的寬度-自己寬度)/2;
豎直居中：
margin-top = （父佈局高度-自己高度）/2;
4.文字居中：
line-height: 高度; 文字在高度內豎直居中
text-align: center; 文字水平居中
5.使用 center 標籤居中
<center><p>人生有涯</p></center>
九、flex佈局
參考 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
flex佈局只支持IE10及以上
採用 Flex 佈局的元素，稱爲 Flex 容器（flex container），簡稱"容器"。
它的所有子元素自動成爲容器成員，稱爲 Flex 項目（flex item），簡稱"項目"。
容器存在兩根軸：
主軸（main axis）：默認是水平方向的（但是可以設置爲豎直方向）
交叉軸（cross axis）：和主軸垂直的軸
主軸和交叉軸可以看做是x軸y軸
9.1容器（就是父元素）的6大屬性（開啓1個，主軸3個，交叉軸2個）：
1開啓flex佈局
display: flex;
2設置主軸的方向（即項目的排列方向）。
row（默認值）：主軸爲水平方向，從左向右排列
flex-direction: row;
3項目在主軸方向上是否換行：
nowrap（默認）：不換行。
flex-wrap: wrap;（通常設置爲換行）
4項目在主軸上的對齊方式（子元素怎樣間隔排列）
flex-start（默認值）：左對齊
justify-content: space-between;（常用值）
5 項目在交叉軸上如何對齊。(項目只有一行)
stretch（默認值）：如果項目未設置高度或設爲auto，將佔滿整個容器的高度。
通常設置爲center（子元素豎直居中）
align-items: center;
6項目在交叉軸上如何對齊。（項目有多行時如何對齊，如果只有一行該屬性不起作用）
stretch 默認值。如果項⽬目未設置固定⾼高度，將佔滿整個容器器的⾼高度。
align-content: stretch;
9.2項目（子元素）的六大屬性
1.order屬性規定子容器（項目）的排列順序。數值越小越靠前，默認爲0,支持負數
order: 1;
2.flex-grow屬性規定子容器的放大比例，默認爲0，剩餘空間不足則不會放大。
如果子容器器的flex-grow屬性都爲1，則等分剩餘空間。
就是給子元素設置比重：
主軸方向是水平的:
設置的是子元素寬度的比重,此時設置寬度無效(被比重覆蓋)
高度是默認值，可以設置高度
主軸方向是豎直的:
設置的是子元素高度的比重,此時設置高度無效(被比重覆蓋)
寬度是默認值，可是設置寬度
flex-grow: 1;
3.flex-shrink屬性規定了子容器的縮小比例，默認爲1，如果空間不足，該子容器將縮小。
1)不設置父元素的寬度（默認鋪滿），縮小屏幕，子元素的寬度縮小
2)設置的父元素寬度，縮小屏幕，子元素寬度不縮小。
3)只有寬度縮小,高度不縮小
4)值越大，縮小的越多，值是0時不縮小
4flex-basis屬性可修改子容器佔據的主軸空間的大小。默認值爲auto,即子容器本來大小。
就是改變子元素的寬高
主軸是水平方向，改變的是子元素的寬度
主軸是豎直方向，改變的是子元素的高度
5flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值爲0 1 auto。後兩個屬性可選。
1)後面只跟一個值，flex等同於flex-grow
例如 flex: 1; 等同於 flex-grow: 1;
2)該屬性有兩個快捷值：
auto (1 1 auto) 和 none (0 0 auto)。
6 align-self屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性。
默認值爲auto，表示繼承父元素的align-items屬性。
就是子元素本身在父元素交叉軸上的對齊方式，可以居上，居中，居下
flex佈局中子元素的特點
1不會獨佔一行
2寬高被內容撐開
3可以設置寬高
代碼示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style type="text/css">
* {
padding: 0px;
margin: 0px;
}
.layout {
width: 500px;
height: 100px;
background-color: yellow;
/* flex佈局只支持IE10及以上 */
/* 開啓flex佈局 */
display: flex;
/* 主軸方向：水平（默認就是水平的） */
flex-direction: row;
/* 子元素是否換行 換行*/
flex-wrap: wrap;
/* 子元素間隔排列方式 */
justify-content: flex-start;
/* 子元素在交叉軸上怎樣居中，一行子元素 */
align-items: center;
/* 子元素在交叉軸上怎樣居中，多行子元素 */
/* align-content: center; */
}
.box1{
background: #00FFFF;
}
.box2{
/*
flex佈局中的子元素，自身設置比重
flex: 1; 等同於 flex-grow: 1;
*/
flex: 1;
/* 在交叉軸上居上 */
align-self: flex-start;
background-color: #0000FF;
}
/*
flex佈局中子元素的特點
不會獨佔一行
寬高被內容撐開
可以設置寬高
*/
.box3{
width: 100px;
height: 100px;
line-height: 50px;
background-color: #DC143C;
}
</style>
</head>
<body>
<div class="layout">
<div class="box1">111</div>
<div class="box2">222</div>
<div class="box3">333</div>
</div>
</body>
</html>
十、案例練習：
10.1使用浮動實現導航條：
效果圖：
實現代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
.navigation{
width: 1000px;
background-color: #0000FF;
/* 去掉點 */
list-style: none;
/* 居中 */
margin: 50px auto;
}
.navigation li {
width: 25%;
float: left;
text-align: center;
}
.navigation li a{
/* 內聯元素改成塊元素，才能設置寬高 */
display: block;
width: 100%;
color: #ffffff;
/* 去掉下劃線 */
text-decoration: none;
padding: 10px 0px;
}
.navigation li a:hover{
background-color: #A52A2A;
}
</style>
</head>
<body>
<!-- 寫一個導航條 -->
<ul class="navigation">
<li><a href="#">java</a></li>
<li><a href="#">C#</a></li>
<li><a href="#">javascript</a></li>
<li><a href="#">C++</a></li>
<!-- 防止高度塌陷，及影響其他元素 -->
<div style="clear: both;"></div>
</ul>
</body>
</html>
10.2使用浮動實現如下佈局：
效果圖：
實現代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
color: #000;
font-size: 14px;
}
.title {
width: 385px;
height: 45px;
background-color: #f6f6f6;
margin: 0 auto;
line-height: 45px;
}
.left {
float: left;
margin-left: 27px;
}
.right {
float: right;
margin-right: 20px;
color: #ae515f;
}
.content {
width: 383px;
border: #eae4e7 1px solid;
margin: 0 auto;
}
.content h3 {
margin-left: 27px;
margin-right: 20px;
margin-top: 20px;
margin-bottom: 25px;
}
.content ul {
margin-left: 27px;
margin-right: 20px;
list-style: none;
border-bottom: #cccccc 1px dashed;
}
.content ul li {
display: block;
margin-bottom: 20px;
}
.content ul li a {
text-decoration: none;
float: left;
}
/* 爲超鏈接添加一個僞類 */
.content ul li a:hover{
/* 鼠標滑過是紅色 */
color: red;
/* 鼠標滑過顯示下劃線 */
/* text-decoration: underline; */
}
.content ul li span {
float: right;
}
.red {
color: red;
}
.h3Color{
color: #4f0c3c;
}
.content .noBorder{
border: none;
}
</style>
</head>
<body>
<div class="title">
<h3 class="left">近期開班</h3>
<a href="#" class="right">10年面授開班計劃</a>
</div>
<div class="content">
<h3>JavaEE+雲計算-全程就業班</h3>
<ul>
<li>
<a href="#">開班時間：<span class="red">2016-04-21</span></a>
<span class="red">預約報名</span>
<div style="clear: both;"></div>
</li>
<li>
<a href="#">開班時間：<span class="red">2016-04-21</span></a>
<span class="red">無座，名額報滿</span>
<div style="clear: both;"></div>
</li>
<li>
<a href="#">開班時間：2016-04-21</a>
<span>開班盛況</span>
<div style="clear: both;"></div>
</li>
<li>
<a href="#">開班時間：2016-04-21</a>
<span>開班盛況</span>
<div style="clear: both;"></div>
</li>
<li>
<a href="#">開班時間：2016-04-21</a>
<span>開班盛況</span>
<div style="clear: both;"></div>
</li>
</ul>
<h3>Android+人工智能-全程就業班</h3>
<ul>
<li>
<a href="#">開班時間：<span class="red">2016-04-21</span></a>
<span class="red">預約報名</span>
<div style="clear: both;"></div>
</li>
<li>
<a href="#">開班時間：<span>2016-04-21</span></a>
<span>開班盛況</span>
<div style="clear: both;"></div>
</li>
<li>
<a href="#">開班時間：2016-04-21</a>
<span>開班盛況</span>
<div style="clear: both;"></div>
</li>
<li>
<a href="#">開班時間：2016-04-21</a>
<span>開班盛況</span>
<div style="clear: both;"></div>
</li>
</ul>
<h3 class="h3Color">前端+html5-全程就業班</h3>
<ul class="noBorder">
<li>
<a href="#">開班時間：<span class="red">2016-04-21</span></a>
<span class="red">預約報名</span>
<div style="clear: both;"></div>
</li>
<li>
<a href="#">開班時間：2016-04-21</a>
<span>開班盛況</span>
<div style="clear: both;"></div>
</li>
</ul>
</div>
</body>
</html>
以上所有源代碼下載：
https://download.csdn.net/download/zhaihaohao1/12032872