一、 網頁佈局方式 二、 標準流 三、 浮動流 四、 定位流 一、 網頁佈局方式 1、什麼是網頁佈局方式 佈局可以理解為排版，我們所熟知的文本編輯類工具都有自己的排版方式， 比如word，nodpad++等等 而網頁的佈局方式指的就是瀏覽器這款工具是如何對網頁中的元素進行排版的 2、網頁佈局/排版的 ...
一、 網頁佈局方式
1、什麼是網頁佈局方式 佈局可以理解為排版，我們所熟知的文本編輯類工具都有自己的排版方式，
比如word，nodpad++等等 而網頁的佈局方式指的就是瀏覽器這款工具是如何對網頁中的元素進行排版的
2、網頁佈局/排版的三種方式
2.1、標準流
2.2、浮動流
2.3、定位流
二、 標準流
標準流的排版方式，又稱為：文檔流/普通流，所謂的文檔流，指的是元素排版佈局過程中，元素會自動從左往右，從上往下的流式排列。
1 、瀏覽器預設的排版方式就是標準流排版方式
2 、在CSS中將元素分為三類：分別是 塊級 行內 行內塊級
3、在標準流中有兩種排版方式，一種是垂直排版，一種是水平排版 垂直排版，如果元素是塊級元素，那麼就會垂直排版 水平排版，
如果元素是行內元素或行內塊級元素，那麼就會水平排版
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div,h1,p { border: 1px solid red; } span，strong,b { border: 1px solid #000; } </style> </head> <body> <div>我是div</div> <h1>我是標題</h1> <p>我是段落</p> <span>span</span> <strong>我是強調</strong> <b>我是加粗</b> </body> </html>實例
三、 浮動流
1、浮動流是一種半脫離標準流的排版方式那什麼是脫離文檔流？什麼又是半脫離文檔流？
1.1 什麼是脫離文檔流？
1、浮動元素脫離文檔流意味著
1、不再區分行內、塊級、行內塊級，無論是什麼級的元素都可以水平排版
2、無論是什麼級的元素都可以設置寬高 綜上所述，浮動流中的元素和標準流總的行內塊級元素很像
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <style> * { margin: 0; padding: 0; } /* 不再區分行內、塊級、行內塊級，無論是什麼級的元素都可以水平排版：span和p都顯示到一行 無論是什麼級的元素都可以設置寬高：span這種行內元素也可以設置寬高 */ .box1 { width: 100px; height: 100px; background-color: red; float: left; } .box2 { width: 100px; height: 100px; background-color: blue; float: left; } </style> </head> <body> <span class="box1">我是span</span> <p class="box2">我是段落</p> </body> </html>實例
2、浮動元素脫標文檔流意味著
1、當某一個元素浮動走之後，那麼這個元素看上去就像被從標準流中刪除了一樣，這個就是浮動元素的脫標
2、如果前面一個元素浮動走了，而後面一個元素沒有浮動，那麼垂直方向的元素會自動填充，浮動元素重新歸位後就會覆蓋該元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>浮動元素脫標</title> <style> .box1 { float: left; width: 100px; height: 100px; background-color: red; } .box2 { width: 150px; height: 150px; background-color: blue; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> </body> </html>實例
註意點：
1、浮動流只有一種排版方式，就是水平排版，它只能設置某個元素左對齊或者右對齊，沒有居中對齊，也就是沒有center這個取值
2、一旦使用了浮動流，則margin:0 auto;失效
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <style> * { margin: 0; padding: 0; } .header { width: 930px; height: 100px; border: 1px solid #000; margin: 0 auto; } .logo { width: 100px; height: 50px; background-color: yellow; float: left; } .nav { width: 300px; height: 50px; background-color: green; float: left; /*失效*/ margin: 0 auto; } </style> </head> <body> <div class="header"> <div class="logo"></div> <div class="nav"></div> </div>實例
<!DOCTYPE html> <html> <head> <title>方式一：修改顯示方式為inline-block</title> <meta charset="utf-8"> <style> .box1 { display: inline-block; width: 100px; height: 100px; background-color: red; } .box2 { display: inline-block; width: 100px; height: 100px; background-color: blue; /* 當設置box2的margin-left足夠大時，第二個盒子就靠右面顯示了 但是當瀏覽器界面縮小時，box2由於左邊的margin-left不夠930，則必須換一個新行顯示，就無法讓兩個盒子處於一行 */ margin-left: 930px; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> </body> </html> <!DOCTYPE html> <html> <head> <title>方式二：用浮動的方式</title> <meta charset="utf-8"> <style> .box1 { display: inline-block; width: 100px; height: 100px; background-color: red; float: left; } .box2 { display: inline-block; width: 100px; height: 100px; background-color: blue; float: right; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> </body> </html>讓兩個元素顯示到一行，有兩種實現方式，一種是修改元素的顯示方式為inline-block，另外一種就是用浮動的方式
1.2、 那什麼又是半脫離文檔流？
脫離分為：半脫離與完全脫離， 其中完全脫離指的是元素原先在正常文檔流中所占的空間會關閉，就好像該元素原來不存在一樣
而之所以稱為半脫離：是因為浮動元素浮動之後的位置取決於它在浮動之前的標準流中的位置，跟標準流還是有一定的關係，
比如說浮動的元素在浮動之前處於標準流的第二行，那麼他浮動之後也是處於浮動流的第二行，不會去找其他行的浮動元素去貼靠，
打一個比方就是：浮動流就是在標準流上面覆蓋的一層透明薄膜，元素浮動之後就會被從標準流中扔到浮動流這個薄膜上，
他在這個薄膜上的位置還是以前在標準流的位置上找同方向的浮動元素進行貼靠，貼靠的準則就是：
（1）同一個方向上誰先浮動，誰在前面
（2）不同方向上左浮動找左浮動，右浮動找右浮動
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>浮動元素排序規則</title> <style> .box1 { float: left; width: 100px; height: 100px; background-color: red; } .box2 { width: 150px; height: 150px; background-color: blue; } .box3 { float: left; width: 250px; height: 250px; background-color: yellow; } .box4 { width: 300px; height: 300px; background-color: rebeccapurple; } </style> </head> <body> <div class="box1">1</div> <div class="box2">2</div> <div class="box3">3</div> <div class="box4">4</div>浮動元素浮動之後的位置取決於它在浮動之前的標準流中的位置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>浮動元素排序規則</title> <style> .box1 { float: left; width: 100px; height: 100px; background-color: red; } .box2 { float: left; width: 150px; height: 150px; background-color: blue; } .box3 { float: left; width: 250px; height: 250px; background-color: yellow; } .box4 { float: left; width: 300px; height: 300px; background-color: rebeccapurple; } </style> </head> <body> <div class="box1">1</div> <div class="box2">2</div> <div class="box3">3</div> <div class="box4">4</div> </body> </html>同一個方向上誰先浮動，誰在前面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>浮動元素排序規則</title> <style> .box1 { float: left; width: 100px; height: 100px; background-color: red; } .box2 { float: left; width: 150px; height: 150px; background-color: blue; } .box3 { float: right; width: 250px; height: 250px; background-color: yellow; }
