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

11.313 頁面布局

站在用戶的角度思考問題，與客戶深入溝通，找到鄭州網(wǎng)站設(shè)計(jì)與鄭州網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：做網(wǎng)站、成都做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、主機(jī)域名、虛擬空間、企業(yè)郵箱。業(yè)務(wù)覆蓋鄭州地區(qū)。

1.標(biāo)準(zhǔn)流

標(biāo)準(zhǔn)流的排版方式，又稱為：文檔流/普通流，所謂的文檔流，指的是元素排版布局過程中，元素會(huì)自動(dòng)從左往右，從上往下的流式排列。

#1 瀏覽器默認(rèn)的排版方式就是標(biāo)準(zhǔn)流排版方式

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

塊級(jí)、行內(nèi)、行內(nèi)塊級(jí)

#3 在標(biāo)準(zhǔn)流中有兩種排版方式，一種是垂直排版，一種是水平排版

垂直排版，如果元素是塊級(jí)元素，那么就會(huì)垂直排版

水平排版，如果元素是行內(nèi)元素或行內(nèi)塊級(jí)元素，那么就會(huì)水平排版

2.浮動(dòng)流

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

1.1 什么是脫離文檔流?

1、浮動(dòng)元素脫離文檔流意味著: 1、不再區(qū)分行內(nèi)、塊級(jí)、行內(nèi)塊級(jí)，無論是什么級(jí)的元素都可以水平排版 2、無論是什么級(jí)的元素都可以設(shè)置寬高 綜上所述，浮動(dòng)流中的元素和標(biāo)準(zhǔn)流中的行內(nèi)塊級(jí)元素很像

我是span

我是段落

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

1.2 什么是半脫離文檔流?

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

1.3 浮動(dòng)元素貼靠問題

1.當(dāng)父元素的寬度足夠顯示所有元素時(shí)，浮動(dòng)的元素就會(huì)并列顯示 2.當(dāng)父元素的寬度不足夠顯示所有元素時(shí)，浮動(dòng)的元素就貼前一個(gè)元素，如果還不夠，就會(huì)再貼前一個(gè)元素直到貼到父元素左邊，此時(shí)無論是否寬度足夠都會(huì)在這一行顯示了

1.4 浮動(dòng)元素字圍現(xiàn)象

沒有浮動(dòng)文字、圖片、超鏈接等元素會(huì)給浮動(dòng)的元素讓位置，并圍繞在浮動(dòng)元素的周圍

注意：在企業(yè)開發(fā)中，如何對(duì)網(wǎng)頁進(jìn)行布局:1、垂直方向的布局用標(biāo)準(zhǔn)流布局，水平方向用浮動(dòng)流布局2、從上至下布局3、從外向內(nèi)布局4、水平方向可以先劃分為一左一右再對(duì)左邊后者右邊進(jìn)一步布局

1.5 浮動(dòng)元素高度問題(又稱父級(jí)塌陷)

1、在標(biāo)準(zhǔn)流中,內(nèi)容的高度可以撐起父元素的高度 2、在浮動(dòng)流中,浮動(dòng)的元素是不可以撐起父元素的高度的，當(dāng)子元素都浮動(dòng)起來后，父親的內(nèi)容高度即height變?yōu)?，父元素就好像塌陷了一樣，因而又稱為父級(jí)塌陷

2.1清除浮動(dòng)

1、清除浮動(dòng)方式一：為浮動(dòng)的那些子元素的父親設(shè)置一個(gè)高度 注意點(diǎn)：在企業(yè)開發(fā)中，這樣限定固定高度會(huì)使頁面操作不靈活，不推薦

2、清除浮動(dòng)方式二：

clear : none / left / right / both

注意：clear這個(gè)屬性必須設(shè)置在塊級(jí)、并且不浮動(dòng)的元素中

1、取值：

none : 默認(rèn)值。允許兩邊都可以有浮動(dòng)對(duì)象

left : 不允許左邊有浮動(dòng)對(duì)象

right : 不允許右邊有浮動(dòng)對(duì)象

both : 不允許左右有浮動(dòng)對(duì)象

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

.content {

width: 960px;

height: 200px;

background-color: yellow;

clear: both;

margin-top: 500px;

}

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

3.清除浮動(dòng)的方式三

隔墻法：

#1、外墻法

1 在兩個(gè)盒子中間添加一個(gè)額外的塊級(jí)元素

2 給這個(gè)額外添加的塊級(jí)元素設(shè)置clear：both;

注意：

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

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

在企業(yè)開發(fā)中可以為墻添加一個(gè)類h30，然后設(shè)置h30的高度為20實(shí)現(xiàn)外間距，搜狐網(wǎng)站大量使用了外墻法

#2、內(nèi)墻法

1 在第一個(gè)盒子中所有子元素最后添加一個(gè)額外的塊級(jí)元素

2 給這個(gè)額外添加的塊級(jí)元素設(shè)置clear：both;

注意：

內(nèi)墻法它可以讓第二個(gè)盒子使用margin-top屬性

內(nèi)墻法可以讓第一個(gè)盒子使用margin-bottom屬性

內(nèi)墻法也可以為墻添加一個(gè)類h30，然后設(shè)置h30的高度為20實(shí)現(xiàn)外間距，搜狐網(wǎng)站大量使用了內(nèi)墻法

內(nèi)墻法與外墻法的區(qū)別? 1、外墻法不可以撐起第一個(gè)盒子的高度，而內(nèi)墻可以 2、在企業(yè)開發(fā)中清除浮動(dòng)，內(nèi)墻法與外墻法都不常用，因?yàn)樘砑右粋€(gè)無用的墻，在前端開發(fā)中推崇結(jié)構(gòu)與樣式分離，而隔墻法需要添加大量的沒有意義的空標(biāo)簽div

4、清除浮動(dòng)的方式四

本質(zhì)原理與內(nèi)墻法一樣，但我們用的css的偽元素選擇器實(shí)現(xiàn)的，用css來控制樣式，符合前端開發(fā)思想

I、詳細(xì)用法：

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

content: "."; #內(nèi)容為“.”就是一個(gè)英文的句號(hào)而已,也可以不寫。

display: block; #加入的這個(gè)元素轉(zhuǎn)換為塊級(jí)元素。

clear: both; #清除左右兩邊浮動(dòng)。

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

height: 0; #高度為0;

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

}

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

#整段代碼就相當(dāng)于在浮動(dòng)元素后面跟了個(gè)寬高為0的空div，然后設(shè)定它c(diǎn)lear:both來達(dá)到清除浮動(dòng)的效果。之所以用它，是因?yàn)?，你不必在html文件中寫入大量無意義的空標(biāo)簽，又能清除浮動(dòng)。

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

.clearfix:after {

content: '';

display: block;

clear: both;

}

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

content: ".";

display: block;

height: 0;

clear: both;

visibility: hidden;

通用寫法:定義一個(gè)清除浮動(dòng)的工具樣式類

.clearfix { #before的作用是子元素設(shè)置margin-top父元素不會(huì)一起被頂下來,after的作用是清除浮動(dòng)

*zoom:1

}

.clearfix:before,.clearfix:after {

content: "";

display: block

}

.clearfix:after {

clear: both

}

5、清除浮動(dòng)的方式五

overflow:hidden

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

3.定位流

1.相對(duì)定位

相對(duì)定位就是相對(duì)于自己以前在標(biāo)準(zhǔn)流中的位置來移動(dòng),相對(duì)定位是不脫離標(biāo)準(zhǔn)流的

格式：

position：relative

需要配合以下四個(gè)屬性一起使用

top:20px;

left:30px;

right:40px;

bottom:50px;

相對(duì)定位

1.1 相對(duì)定位的注意點(diǎn)

1 在相對(duì)定位中同一個(gè)方向上的定位屬性只能使用一個(gè)

top/bottom (只能用一個(gè))

left/right (只能用一個(gè))

2 相對(duì)定位是不脫離標(biāo)準(zhǔn)流的，會(huì)繼續(xù)在標(biāo)準(zhǔn)流中占用一份空間，相對(duì)原來的位置定位，還占據(jù)原來的位置 3 由于相對(duì)定位是不脫離標(biāo)準(zhǔn)流的，所以在相對(duì)定位中是區(qū)分塊級(jí)、行內(nèi)、行內(nèi)塊級(jí)元素的 4 由于相對(duì)定位是不脫離標(biāo)準(zhǔn)流的，并且相對(duì)定位的元素會(huì)占用標(biāo)準(zhǔn)流中的位置，所以當(dāng)給相對(duì)定位的元素設(shè)置margin/padding等屬性時(shí)會(huì)影響到標(biāo)準(zhǔn)流的布局，即給相對(duì)定位的標(biāo)簽設(shè)置margin或padding，是以該標(biāo)簽原來的位置為基礎(chǔ)來進(jìn)行偏移的

2.絕對(duì)定位

絕對(duì)定位就是相對(duì)于body或者某個(gè)定位流中的祖先元素(已定位)來定位,絕對(duì)定位的元素是脫離標(biāo)準(zhǔn)流的

2.1 絕對(duì)定位的參考點(diǎn)

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

2.2 絕對(duì)定位的注意點(diǎn)

1、絕對(duì)定位的元素是脫離標(biāo)準(zhǔn)流的,所以絕對(duì)定位的元素不區(qū)分塊級(jí)元素/行內(nèi)元素/行內(nèi)塊級(jí)元素 2、如果一個(gè)絕對(duì)定位的元素是以body作為參考點(diǎn), 那么其實(shí)是以網(wǎng)頁首屏的寬度和高度作為參考點(diǎn), 而不是以整個(gè)網(wǎng)頁的寬度和高度作為參考點(diǎn)，會(huì)相對(duì)于body定位會(huì)隨著頁面的滾動(dòng)而滾動(dòng) 3、一個(gè)絕對(duì)定位的元素會(huì)忽略祖先元素的padding

2.3 絕對(duì)定位水平居中

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

3.固定定位

固定定位的元素是脫離標(biāo)準(zhǔn)流的

1、固定定位(和絕對(duì)定位高度相似，和背景的關(guān)聯(lián)方式也高度相似): 背景的關(guān)聯(lián)方式background-attachment: fixed;可以讓圖片不隨著滾動(dòng)條的滾動(dòng)而滾動(dòng),而固定定位可以讓某一個(gè)元素不隨著滾動(dòng)條的滾動(dòng)而滾動(dòng)

回到頂部

注意:

1、固定定位，就是相對(duì)瀏覽器窗口定位,頁面如何滾動(dòng)，這個(gè)盒子顯示的位置不變。 2、固定定位的元素是脫離標(biāo)準(zhǔn)流的，不會(huì)占用標(biāo)準(zhǔn)流中的空間 3、固定定位和絕對(duì)定位一樣不區(qū)分行內(nèi)、塊級(jí)、行內(nèi)塊級(jí) 4、E6不支持固定定位

4.靜態(tài)定位

默認(rèn)情況下標(biāo)準(zhǔn)流中的元素position屬性就等于static, 所以靜態(tài)定位其實(shí)就是默認(rèn)的標(biāo)準(zhǔn)流

5.z-index

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

asasadds

姓名

密碼

4. overflow溢出屬性

值描述

visible　　默認(rèn)值。內(nèi)容不會(huì)被修剪，會(huì)呈現(xiàn)在元素框之外。

hidden　　內(nèi)容會(huì)被修剪，并且其余內(nèi)容是不可見的。

scroll　　內(nèi)容會(huì)被修剪，但是瀏覽器會(huì)顯示滾動(dòng)條以便查看其余的內(nèi)容。

auto　　如果內(nèi)容被修剪，則瀏覽器會(huì)顯示滾動(dòng)條以便查看其余的內(nèi)容。

inherit　　規(guī)定應(yīng)該從父元素繼承 overflow 屬性的值。

水平和垂直均設(shè)置：overflow 設(shè)置水平方向：overflow-x 設(shè)置垂直方向：overflow-y

分享題目：python之前端開發(fā)(頁面布局、浮動(dòng)、定位、z-index、overflow溢出)
路徑分享：http://muchs.cn/article6/ihgiig.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供商城網(wǎng)站、定制網(wǎng)站、網(wǎng)站維護(hù)、營銷型網(wǎng)站建設(shè)、品牌網(wǎng)站設(shè)計(jì)、網(wǎng)站改版

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)