前端之css網頁布局等相關內容 54

#1、什麼是網頁布局方式

布局可以理解為排版，我們所熟知的文字編輯類工具都有自己的排版方式，比如word，nodpad++等等

而網頁的布局方式指的就是瀏覽器這款工具是如何對網頁中的元素進行排版的

#2、網頁布局/排版的三種方式

2.1、標準流2.2、浮動流2.3、定位流

標準流的排版方式，又稱為：文件流/普通流，所謂的文件流，指的是元素排版布局過程中，元素會自動從左往右，從上往下的流式排列。

# 1 瀏覽器預設的排版方式就是標準流排版方式

# 2 在css中將元素分為三類：分別是

塊級行內

行內塊級

# 3 在標準流中有兩種排版方式，一種是垂直排版，一種是水平排版

垂直排版，如果元素是塊級元素，那麼就會垂直排版

水平排版，如果元素是行內元素或行內塊級元素，那麼就會水平排版

浮動流是一種半脫離標準流的排版方式那什麼是脫離文件流？什麼又是半脫離文件流？

1、浮動元素脫離文件流意味著

#1、不再區分行內、塊級、行內塊級，無論是什麼級的元素都可以水平排版

#2、無論是什麼級的元素都可以設定寬高

綜上所述，浮動流中的元素和標準流總的行內塊級元素很像

2、浮動元素脫標文件流意味著

#1、當某乙個元素浮動走之後，那麼這個元素看上去就像被從標準流中刪除了一樣，這個就是浮動元素的脫標

#2、如果前面乙個元素浮動走了，而後面乙個元素沒有浮動，那麼垂直方向的元素會自動填充，浮動元素重新歸位後就會覆蓋該元素

注意點：

1、浮動流只有一種排版方式，就是水平排版，它只能設定某個元素左對齊或者右對齊，沒有居中對齊，也就是沒有center這個取值

2、一旦使用了浮動流，則margin:0 auto;失效

脫離分為：半脫離與完全脫離，

其中完全脫離指的是元素原先在正常文件流中所佔的空間會關閉，就好像該元素原來不存在一樣

而之所以稱為半脫離：是因為浮動元素浮動之後的位置取決於它在浮動之前的標準流中的位置，跟標準流還是有一定的關係，比如說浮動的元素在浮動之前處於標準流的第二行，那麼他浮動之後也是處於浮動流的第二行，不會去找其他行的浮動元素去貼靠，打乙個比方就是：浮動流就是在標準流上面覆蓋的一層透明薄膜，元素浮動之後就會被從標準流中扔到浮動流這個薄膜上，他在這個薄膜上的位置還是以前在標準流的位置上找同方向的浮動元素進行貼靠，貼靠的準則就是：

（1）同乙個方向上誰先浮動，誰在前面

（2）不同方向上左浮動找左浮動，右浮動找右浮動

當父元素的寬度足夠顯示所有元素時，浮動的元素就會並列顯示

當父元素的寬度不足夠顯示所有元素時，浮動的元素就貼前乙個元素，如果還不夠，就會再貼前乙個元素

直到貼到父元素左邊，此時無論是否寬度足夠都會在這一行顯示了

沒有浮動文字、、超連結等元素會給浮動的元素讓位置，並圍繞在浮動元素的周圍

#注意：在企業開發中，如何對網頁進行布局

#1、垂直方向的布局用標準流布局，水平方向用浮動流布局

#2、從上至下布局

#3、從外向內布局

#4、水平方向可以先劃分為一左一右再對左邊後者右邊進一步布局

#1、在標準流中,內容的高度可以撐起父元素的高度

#2、在浮動流中,浮動的元素是不可以撐起父元素的高度的，當子元素都浮動起來後，父親的內容高度即height變為0，父元素就好像塌陷了一樣，因而又稱為父級塌陷

清除浮動方式一：

為浮動的那些子元素的父親設定乙個高度

#1、注意點：

在企業開發中，這樣限定固定高度會使頁面操作不靈活，不推薦！

清除浮動方式二：

clear : none | left | right | both 注意：clear這個屬性必須設定在塊級、並且不浮動的元素中

#1、取值：

none : 預設值。允許兩邊都可以有浮動物件

left : 不允許左邊有浮動物件

right : 不允許右邊有浮動物件

both : 不允許左右有浮動物件

#2、把握住兩點：

1、元素是從上到下、從左到右依次載入的。

2、clear: left;對自身起作用，而不會影響其他元素。一旦左邊有浮動元素，即切換到下一行來保證左邊元素不是浮動的，依據這一點解決父級塌陷問題。

#注意1：

元素是從上到下、從左到右依次載入的。在右側元素還沒有載入到時，clear：right是無用的

#注意2：

這種方式的弊端是：當我們給某個元素新增clear屬性之後，那麼這個屬性的margin-top屬性可能會失效，因而也不推薦直接用clear

清除浮動的方式四

本質原理與內牆法一樣，但我們用的css的偽元素選擇器實現的，就應該用css來控制樣式，符合前端開發思想

#i、詳細用法

.header:after

.header <----相容ie6,否則偽類選擇器只能在谷歌瀏覽器中生效，其餘沒用

整段**就相當於在浮動元素後面跟了個寬高為0的空div，然後設定它clear:both來達到清除浮動的效果。

之所以用它，是因為，你不必在html檔案中寫入大量無意義的空標籤，又能清除浮動。

#通用寫法

.clearfix

.clearfix:before,.clearfix:after

.clearfix:after

清除浮動的方式五：

overflow:hidden，但其實它除了清除浮動還有其他方面的用途

#1、可以將超出標籤範圍的內容裁剪掉

#2、清除浮動

#3、可以通過overflow：hidden，讓裡面的盒子設定margin-top屬性後，外面的盒子不被頂下來，這樣就不用為外邊的盒子新增邊框了

前端之css網頁布局等相關內容 54

sqlachemy之增刪改查等相關內容 145

django框架之目錄介紹等相關內容 60

python之模組包相關內容

前端之css網頁布局等相關內容 54

sqlachemy之增刪改查等相關內容 145

django框架之目錄介紹等相關內容 60

python之模組 包相關內容

相關推薦

python之模組包相關內容