python 之 前端開發(頁面布局、浮動、定位、z-index、overflow溢出)

　　11.313 頁面布局

　　1.標準流

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

　　#1 瀏覽器默認的排版方式就是標準流排版方式

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

　　塊級、行內、行內塊級

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

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

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

　　2.浮動流

　　浮動流是一種半脫離文檔流的排版方式 那什么是脫離文檔流?什么又是半脫離文檔流?

　　1.1 什么是脫離文檔流?

　　1、浮動元素脫離文檔流意味著: 1、不再區分行內、塊級、行內塊級，無論是什么級的元素都可以水平排版 2、無論是什么級的元素都可以設置寬高 綜上所述，浮動流中的元素和標準流中的行內塊級元素很像

　　我是span

　　我是段落

　　2、浮動元素脫標文檔流意味著: 1、當某一個元素浮動走之后，那么這個元素看上去就像被從標準流中刪除了一樣,不再占用位置，這個就是浮動元素的脫標 2、如果前面一個元素浮動走了，而后面一個元素沒有浮動，那么垂直方向的元素會自動填充，浮動元素重新歸位后就會覆蓋該元素 注意點： 1、浮動流只有一種排版方式，就是水平排版，它只能設置某個元素左對齊或者右對齊，沒有居中對齊，也就是沒有center這個取值 2、一旦使用了浮動流，則margin:0 auto;失效 讓兩個元素顯示到一行，有兩種實現方式，一種是修改元素的顯示方式為inline-block，另外一種就是用浮動的方式

　　1.2 什么是半脫離文檔流?

　　脫離分為半脫離與完全脫離：完全脫離:是元素原先在正常文檔流中所占的空間會關閉，就好像該元素原來不存在一樣半脫離：是因為浮動元素浮動之后的位置取決于它在浮動之前的標準流中的位置，跟標準流還是有一定的關系，比如說浮動的元素在浮動之前處于標準流的第二行，那么他浮動之后也是處于浮動流的第二行，不會去找其他行的浮動元素去貼靠，打一個比方就是：浮動流就是在標準流上面覆蓋的一層透明薄膜，元素浮動之后就會被從標準流中扔到浮動流這個薄膜上，他在這個薄膜上的位置還是以前在標準流的位置上找同方向的浮動元素進行貼靠，貼靠的準則就是：(1)同一個方向上誰先浮動，誰在前面(2)不同方向上左浮動找左浮動，右浮動找右浮動

　　1.3 浮動元素貼靠問題

　　1.當父元素的寬度足夠顯示所有元素時，浮動的元素就會并列顯示 2.當父元素的寬度不足夠顯示所有元素時，浮動的元素就貼前一個元素，如果還不夠，就會再貼前一個元素直到貼到父元素左邊，此時無論是否寬度足夠都會在這一行顯示了

　　1.4 浮動元素字圍現象

　　沒有浮動文字、圖片、超鏈接等元素會給浮動的元素讓位置，并圍繞在浮動元素的周圍

　　注意：在企業開發中，如何對網頁進行布局:1、垂直方向的布局用標準流布局，水平方向用浮動流布局2、從上至下布局3、從外向內布局4、水平方向可以先劃分為一左一右再對左邊后者右邊進一步布局

　　1.5 浮動元素高度問題(又稱父級塌陷)

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

　　2.1清除浮動

　　1、清除浮動方式一：為浮動的那些子元素的父親設置一個高度 注意點：在企業開發中，這樣限定固定高度會使頁面操作不靈活，不推薦

　　2、清除浮動方式二：

　　clear : none / left / right / both

　　注意：clear這個屬性必須設置在塊級、并且不浮動的元素中

　　1、取值：

　　none : 默認值。允許兩邊都可以有浮動對象

　　left : 不允許左邊有浮動對象

　　right : 不允許右邊有浮動對象

　　both : 不允許左右有浮動對象

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

　　.content {

　　width: 960px;

　　height: 200px;

　　background-color: yellow;

　　clear: both;

　　margin-top: 500px;

　　}

　　注意： 元素是從上到下、從左到右依次加載的，在右側元素還沒有加載到時，clear：right是無用的 這種方式的弊端是：當我們給某個元素添加clear屬性之后，那么這個屬性的margin-top屬性可能會失效，因而也不推薦直接用clear

　　3.清除浮動的方式三

　　隔墻法：

　　#1、外墻法

　　1 在兩個盒子中間添加一個額外的塊級元素

　　2 給這個額外添加的塊級元素設置clear：both;

　　注意：

　　外墻法它可以讓第二個盒子使用margin-top屬性

　　外墻法不可以讓第一個盒子使用margin-bottom屬性，所以我們通常用墻的高度作margin的替代品

　　在企業開發中可以為墻添加一個類h30，然后設置h30的高度為20實現外間距，搜狐網站大量使用了外墻法

　　#2、內墻法

　　1 在第一個盒子中所有子元素最后添加一個額外的塊級元素

　　2 給這個額外添加的塊級元素設置clear：both;

　　注意：

　　內墻法它可以讓第二個盒子使用margin-top屬性

　　內墻法可以讓第一個盒子使用margin-bottom屬性

　　內墻法也可以為墻添加一個類h30，然后設置h30的高度為20實現外間距，搜狐網站大量使用了內墻法

　　內墻法與外墻法的區別? 1、外墻法不可以撐起第一個盒子的高度，而內墻可以 2、在企業開發中清除浮動，內墻法與外墻法都不常用，因為添加一個無用的墻，在前端開發中推崇結構與樣式分離，而隔墻法需要添加大量的沒有意義的空標簽div

　　4、清除浮動的方式四

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

　　I、詳細用法：

　　.header:after { #在類名為“clearfix”的元素內最后面加入內容;

　　content: "."; #內容為“.”就是一個英文的句號而已,也可以不寫。

　　display: block; #加入的這個元素轉換為塊級元素。

　　clear: both; #清除左右兩邊浮動。

　　visibility: hidden; #visibility:hidden;仍然占據空間，只是看不到而已 line-height: 0; #行高為0;

　　height: 0; #高度為0;

　　font-size:0; #字體大小為0;

　　}

　　.header { *zoom:1;} #兼容ie6,否則偽類選擇器只能在谷歌瀏覽器中生效，其余沒用

　　#整段代碼就相當于在浮動元素后面跟了個寬高為0的空div，然后設定它clear:both來達到清除浮動的效果。之所以用它，是因為，你不必在html文件中寫入大量無意義的空標簽，又能清除浮動。

　　II、必須要寫的是下面這三句話

　　.clearfix:after {

　　content: '';

　　display: block;

　　clear: both;

　　}

　　III、新浪首頁清除浮動的方法，也是采用偽元素

　　content: ".";

　　display: block;

　　height: 0;

　　clear: both;

　　visibility: hidden;

　　通用寫法:定義一個清除浮動的工具樣式類

　　.clearfix { #before的作用是子元素設置margin-top父元素不會一起被頂下來,after的作用是清除浮動

　　*zoom:1

　　}

　　.clearfix:before,.clearfix:after {

　　content: "";

　　display: block

　　}

　　.clearfix:after {

　　clear: both

　　}

　　5、清除浮動的方式五

　　overflow:hidden

　　但它除了清除浮動還有其他方面的用途: 1、可以將超出標簽范圍的內容裁剪掉 2、清除浮動 3、可以通過overflow：hidden，讓里面的盒子設置margin-top屬性后，外面的盒子不被頂下來，這樣就不用為外邊的盒子添加邊框了

　　3.定位流

　　1.相對定位

　　相對定位就是相對于自己以前在標準流中的位置來移動,相對定位是不脫離標準流的

　　格式：

　　position：relative

　　需要配合以下四個屬性一起使用

　　top:20px;

　　left:30px;

　　right:40px;

　　bottom:50px;

　　相對定位

　　1.1 相對定位的注意點

　　1 在相對定位中同一個方向上的定位屬性只能使用一個

　　top/bottom (只能用一個)

　　left/right (只能用一個)

　　2 相對定位是不脫離標準流的，會繼續在標準流中占用一份空間，相對原來的位置定位，還占據原來的位置 3 由于相對定位是不脫離標準流的，所以在相對定位中是區分塊級、行內、行內塊級元素的 4 由于相對定位是不脫離標準流的，并且相對定位的元素會占用標準流中的位置，所以當給相對定位的元素設置margin/padding等屬性時會影響到標準流的布局，即給相對定位的標簽設置margin或padding，是以該標簽原來的位置為基礎來進行偏移的

　　2.絕對定位

　　絕對定位就是相對于body或者某個定位流中的祖先元素(已定位)來定位,絕對定位的元素是脫離標準流的

　　2.1 絕對定位的參考點

　　1、默認情況下所有的絕對定位的元素，無論有無祖先元素，都會以body作為參考點 2、如果一個絕對定位的元素有祖先元素，并且祖先元素也是定位流，那么這個絕對定位的元素就會以定位流的那個祖先元素作為參考點 2.1 只要是這個絕對定位元素的祖先元素都可以 2.2 祖先必須是定位流，此處的定位流指的是絕對定位、相對定位、固定定位(定位流中只有靜態定位不可以) 2.3 如果一個絕對定位的元素有祖先元素，而且祖先元素中有多個元素都是定位流，那么這個絕對定位的元素會以離它 最近的那個定位流的祖先元素為參考點無錫比較好的婦科醫院 http://www.120jlfk.com/

　　2.2 絕對定位的注意點

　　1、絕對定位的元素是脫離標準流的,所以絕對定位的元素不區分塊級元素/行內元素/行內塊級元素 2、如果一個絕對定位的元素是以body作為參考點, 那么其實是以網頁首屏的寬度和高度作為參考點, 而不是以整個網頁的寬度和高度作為參考點，會相對于body定位會隨著頁面的滾動而滾動 3、一個絕對定位的元素會忽略祖先元素的padding

　　2.3 絕對定位水平居中

　　1.注意當一個盒子絕對定位之后不能使用margin: 0 auto;讓盒子自身居中 2.如果想讓過一個絕對定位的盒子自身居中, 可以使用left: 50%; margin-left:-元素寬度一半px;

　　3.固定定位

　　固定定位的元素是脫離標準流的

　　1、固定定位(和絕對定位高度相似，和背景的關聯方式也高度相似): 背景的關聯方式background-attachment: fixed;可以讓圖片不隨著滾動條的滾動而滾動,而固定定位可以讓某一個元素不隨著滾動條的滾動而滾動

　　回到頂部

　　注意:

　　1、固定定位，就是相對瀏覽器窗口定位,頁面如何滾動，這個盒子顯示的位置不變。 2、固定定位的元素是脫離標準流的，不會占用標準流中的空間 3、固定定位和絕對定位一樣不區分行內、塊級、行內塊級 4、E6不支持固定定位

　　4.靜態定位

　　默認情況下標準流中的元素position屬性就等于static, 所以靜態定位其實就是默認的標準流

　　5.z-index

　　1、z-index屬性：用于指定定位的元素的覆蓋關系 1.1、z-index值表示誰壓著誰,數值大的壓蓋住數值小的 1.2、只有定位了的元素，才能有z-index值,也就是說，不管相對定位、絕對定位、固定定位，都可以使用z-index值,而 浮動的東西不能用。 1.3、z-index值沒有單位，就是一個正整數。默認的z-index值是0。 1.4、如果大家都沒有z-index值(默認所有元素z-index值為0),或者z-index值一樣，那么誰寫在HTML后面，誰在上面能 壓住別人。定位了的元素，永遠能夠壓住沒有定位的元素。 2、注意：從父現象 2.1父元素沒有z-index值, 那么子元素誰的z-index大,誰蓋住誰 2.2父元素z-index值不一樣, 那么父元素誰的z-index大,誰蓋住誰

　　asasadds

　　姓名

　　密碼

　　4. overflow溢出屬性

　　值描述

　　visible　　默認值。內容不會被修剪，會呈現在元素框之外。

　　hidden　　內容會被修剪，并且其余內容是不可見的。

　　scroll　　內容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內容。

　　auto　　如果內容被修剪，則瀏覽器會顯示滾動條以便查看其余的內容。

　　inherit　　規定應該從父元素繼承 overflow 屬性的值。

　　水平和垂直均設置：overflow 設置水平方向：overflow-x 設置垂直方向：overflow-y