一、網頁布局方式
1、什么是網頁布局方式 ？
布局可以理解為排版，我們所熟知的文本編輯類工具都有自己的排版方式，比如word，nodpad++等等 而網頁的布局方式指的就是瀏覽器這款工具是如何對網頁中的元素進行排版的
2、網頁布局/排版的三種方式
標準流
浮動流
定位流
二、標準流
標準流的排版方式，又稱為：檔案流/普通流，所謂的檔案流，指的是元素排版布局程序中，元素會自動從左往右，從上往下的流式排列，
# 1 瀏覽器默認的排版方式就是標準流排版方式
# 2 在CSS中將元素分為三類：分別是
塊級
行內
行內塊級
# 3 在標準流中有兩種排版方式，一種是垂直排版，一種是水平排版
垂直排版，如果元素是塊級元素，那么就會垂直排版
水平排版，如果元素是行內元素或行內塊級元素，那么就會水平排版
三、浮動流
浮動流是一種半脫離標準流的排版方式
1、脫離檔案流
1、 什么是脫離檔案流？
（1）浮動元素脫離檔案流意味著
不再區分行內、塊級、行內塊級，無論是什么級的元素都可以水平排版
無論是什么級的元素都可以設定寬高
綜上所述，浮動流中的元素和標準流總的行內塊級元素很像
（2）浮動元素脫標檔案流意味著
當某一個元素浮動走之后，那么這個元素看上去就像被從標準流中洗掉了一樣，這個就是浮動元素的脫標
如果前面一個元素浮動走了，而后面一個元素沒有浮動，那么垂直方向的元素會自動填充，浮動元素重新歸位后就會覆寫該元素
2、注意點：
（1）浮動流只有一種排版方式，就是水平排版，它只能設定某個元素左對齊或者右對齊，沒有居中對齊，也就是沒有center這個取值
（2）一旦使用了浮動流，則margin:0 auto;失效
ps:讓兩個元素顯示到一行，有兩種實作方式，一種是修改元素的顯示方式為inline-block，另外一種就是用浮動的方式
2、半脫離檔案流
1、什么是半脫離檔案流？
脫離分為：半脫離與完全脫離，
其中完全脫離指的是元素原先在正常檔案流中所占的空間會關閉，就好像該元素原來不存在一樣
而之所以稱為半脫離：是因為浮動元素浮動之后的位置取決于它在浮動之前的標準流中的位置，跟標準流還是有一定的關系，比如說浮動的元素在浮動之前處于標準流的第二行，那么他浮動之后也是處于浮動流的第二行，不會去找其他行的浮動元素去貼靠，打一個比方就是：浮動流就是在標準流上面覆寫的一層透明薄膜，元素浮動之后就會被從標準流中扔到浮動流這個薄膜上，他在這個薄膜上的位置還是以前在標準流的位置上找同方向的浮動元素進行貼靠，貼靠的準則就是：
（1）同一個方向上誰先浮動，誰在前面
（2）不同方向上左浮動找左浮動，右浮動找右浮動
ps:(1)浮動元素浮動之后的位置取決于它在浮動之前的標準流中的位置
(2)同一個方向上誰先浮動，誰在前面
(3)不同方向上左浮動找左浮動，右浮動找右浮動
3、浮動元素貼靠問題
當父元素的寬度足夠顯示所有元素時，浮動的元素就會并列顯示
當父元素的寬度不足夠顯示所有元素時，浮動的元素就貼前一個元素，如果還不夠，就會再貼前一個元素
直到貼到父元素左邊，此時無論是否寬度足夠都會在這一行顯示了
4、浮動元素字圍現象
沒有浮動文字、圖片、超鏈接等元素會給浮動的元素讓位置，并圍繞在浮動元素的周圍
ps:只要是行內塊級元素，都會有字圍效果
5、浮動流排版練習
#注意：在企業開發中，如何對網頁進行布局
#1、垂直方向的布局用標準流布局，水平方向用浮動流布局
#2、從上至下布局
#3、從外向內布局
#4、水平方向可以先劃分為一左一右再對左邊后者右邊進一步布局
6、浮動元素高度問題(又稱父級塌陷)
#1、在標準流中,內容的高度可以撐起父元素的高度
#2、在浮動流中,浮動的元素是不可以撐起父元素的高度的，當子元素都浮動起來后，父親的內容高度即height變為0，父元素就好像塌陷了一樣，因而又稱為父級塌陷
7、清除浮動
四、定位流
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/76812.html
標籤：Html/Css
上一篇：如何制作免費的WordPress聯系表單？這個插件提供了付費表單才有的功能【視頻+圖文教程】
下一篇：手寫滾動條設計----直接粘貼