python 之前端開發（盒子模型、頁面佈局、浮動、定位、z-index、overflow溢出）

時間 2020-06-07

標籤 python 前端開發盒子模型頁面佈局浮動定位 index overflow 溢出欄目 Python 简体版

原文原文鏈接

11.312 盒子模型

HTML文檔中的每一個元素都被比喻成矩形盒子，盒子模型經過四個邊界來描述：margin（外邊距），border（邊框），padding（內填充），content（內容區域），若是把一個盒子比喻成一個壁掛相片，那麼css

外邊距margin ===== 一個相框與另一個相框之間的距離 邊框border ====== 邊框指的就是相框 內邊距padding ===== 相片與邊框的距離 寬度width/高度height ===== 指定能夠存放相片的區域

一、css顯示模式:塊級、行內、行內塊級html

在HTML中HTML將全部標籤分爲兩類，分別是容器級和文本級,在CSS中CSS也將全部標籤分爲兩類，分別是塊級元素和行內元素前端

#一、HTML中容器級與文本級
    容器級標籤：能夠嵌套其餘的全部標籤   div、h、ul>li、ol>li、dl>dt+dd 文本級標籤：只能嵌套文字、圖片、超連接 span、p、buis、strong、em、ins、del
#二、CSS中塊級與行內
 塊級：塊級元素會獨佔一行，全部的容器類標籤都是塊級，文本標籤中的p標籤也是塊級 div、h、ul、ol、dl、li、dt、dd 還有標籤p 行內：行內元素不會獨佔一行，全部除了p標籤之外的文本標籤都是行內 span、buis、strong、em、ins、del
#三、塊級元素與行內元素的區別
    1、塊級元素(block) 獨佔一行,能夠設置寬高,若沒有設置寬度，那麼默認和父元素同樣寬 2、行內元素(inline) 共享一行,不能夠設置寬高，盒子寬高默認和內容同樣 三、行內塊級元素(inline-block)  不會獨佔一行,能夠設置寬高 例：<img src="../imags/1.png" alt="">

二、CSS顯示模式轉換瀏覽器

#display:能夠經過標籤的display屬性設置顯示模式
none: HTML文檔中元素存在，可是在瀏覽器中不顯示。通常用於配合JavaScript代碼使用 block:塊級 inline:行內 inline-block:行內塊級 #display:"none"與visibility:hidden的區別：
1、visibility:hidden: 能夠隱藏某個元素，但隱藏的元素仍需佔用與未隱藏以前同樣的空間。也就是說，該元素雖然被隱藏了，但仍然會影響佈局。 二、display:none: 能夠隱藏某個元素，且隱藏的元素不會佔用任何空間。也就是說，該元素不但被隱藏了，並且該元素本來佔用的空間也會從頁面佈局中消失。

三、div與spanide

佈局都是用塊級元素，而行內元素是控制內容顯示的。工具

1、div標籤 通常用於配合css完成網頁的基本佈局
2、span標籤 通常用於配合css修改網頁中的一些局部信息
3、div和span有什麼區別？
  div通常用於排版，而span通常用於局部文字的樣式
  1、站在HTML的角度：div是一個容器級標籤，而span是一個文本級標籤
  2、站在CSS的角度：div是一個塊級元素、獨佔一行，而span是一個行內元素、不會單獨佔一行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>div與span標籤</title>
    <style> .aside { width: 250px; height: 460px; background: #cccccc; float: left; margin: 20px;
        } span {color: red;}
    </style>
</head>
<body>
    <div class="aside">
        <p> 我是 <span> EGON </span>，一個最接近 <span>神的男人</span> </p>
    </div>
</body>
</html>

四、border邊框佈局

border: 5px solid black; # 同時設置四條邊的邊框 bord-width: 5px 6px 5px 6px #連寫(以三種屬性分別設置四條邊的邊框) border-style: solid dashed solid dashed; border-color: red green blue purple; border-left: 5px solid purple; #以邊框位置分別設置三種屬性 border-top: 5px solid red; border-right: 5px solid green; border-bottom: 5px solid blue; none:無邊框 dotted:點狀虛線邊框 dashed:矩形虛線邊框 solid:實線邊框#邊框的樣式 border-radius: border-top-left-radius: 20px; #單獨設置一個角：數值越大，弧度越大 border-top-right-radius: 20px; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px;  border-radius: 20px; # 縮寫設置 全部角設置相同值 border-radius: 20px 10px 10px 20px; #順時針順序：上左 上右 下左 下右  border-radius: 50%; #百分比設置（獲得一個圓）

五、padding內邊距(內填充)字體

內邊距：邊框與內容的距離網站

padding-top：20px； padding-right：20px； padding-bottom：20px； padding-left：20px；  padding: 70px 70px 70px 70px; #上 右 下 左 padding: 70px;

注意：ui

一、給標籤設置內邊距後，標籤內容佔有的寬度和高度會發生變化，設置padding以後標籤內容的寬高是在原寬高的基礎上加上padding值。若是不想改變實際大小，那就在用寬高減掉padding對應方向的值二、padding是添加給父級的，改變的是父級包含的內容的位置三、內邊距也會有背景顏色

六、外邊距

標籤與標籤之間的距離就是外邊距

margin-top：20px； margin-right：20px； margin-bottom：20px； margin-left：20px； margin：上 右 下 左;

注意:

一、外邊距的那一部分是沒有背景顏色的 二、外邊距合併現象和疊加現象在默認佈局的水平方向上，默認兩個盒子的外邊距會疊加，而在垂直方向上，默認狀況下兩個盒子的外邊距是不會疊加的，會出現合併現象，誰的外邊距比較大，就聽誰的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外邊距合併現象 </title>
    <style> span { display: inline-block; width: 100px; height: 100px; border: 1px solid #000;
        } div { height: 100px; border: 1px solid #000;
        } .hezi1 {margin-right: 50px;} #水平方向上,外邊距會疊加 .hezi2 {margin-left: 100px;}  .box1 {margin-bottom: 50px;} #垂直方向上，外邊距會合併成一個，誰比較大就聽誰的 .box2 {margin-top: 100px;}
    </style>
</head>
<body> #快捷建立span.hezi${我是span}*2 <span class="hezi1">我是span</span>
<span class="hezi2">我是span</span>                           
<div class="box1">我是div1</div>
<div class="box2">我是div2</div>
</body>
</html>

11.313 頁面佈局

1.標準流

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

#1 瀏覽器默認的排版方式就是標準流排版方式 #2 在CSS中將元素分爲三類：分別是
 塊級、行內、行內塊級 #3 在標準流中有兩種排版方式，一種是垂直排版，一種是水平排版
 垂直排版，若是元素是塊級元素，那麼就會垂直排版 水平排版，若是元素是行內元素或行內塊級元素，那麼就會水平排版

2.浮動流

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

1.1 什麼是脫離文檔流？

一、浮動元素脫離文檔流意味着: 一、再也不區分行內、塊級、行內塊級，不管是什麼級的元素均可以水平排版 二、不管是什麼級的元素均可以設置寬高 綜上所述，浮動流中的元素和標準流中的行內塊級元素很像

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <style> * {margin: 0;padding: 0;} .box1 { #span和p都顯示到一行：span這種行內元素也能夠設置寬高 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>

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

1.2 什麼是半脫離文檔流？

脫離分爲半脫離與徹底脫離：
徹底脫離:是元素原先在正常文檔流中所佔的空間會關閉，就好像該元素原來不存在同樣
半脫離：是由於浮動元素浮動以後的位置取決於它在浮動以前的標準流中的位置，跟標準流仍是有必定的關係，好比說浮動的元素在浮動以前處於標準流的第二行，那麼他浮動以後也是處於浮動流的第二行，不會去找其餘行的浮動元素去貼靠，打一個比方就是：浮動流就是在標準流上面覆蓋的一層透明薄膜，元素浮動以後就會被從標準流中扔到浮動流這個薄膜上，他在這個薄膜上的位置仍是之前在標準流的位置上找同方向的浮動元素進行貼靠，貼靠的準則就是：
（1）同一個方向上誰先浮動，誰在前面
（2）不一樣方向上左浮動找左浮動，右浮動找右浮動

1.3 浮動元素貼靠問題

1.當父元素的寬度足夠顯示全部元素時，浮動的元素就會並列顯示 2.當父元素的寬度不足夠顯示全部元素時，浮動的元素就貼前一個元素，若是還不夠，就會再貼前一個元素直到貼到父元素左邊，此時不管是否寬度足夠都會在這一行顯示了

1.4 浮動元素字圍現象

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

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

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

一、在標準流中,內容的高度能夠撐起父元素的高度二、在浮動流中,浮動的元素是不能夠撐起父元素的高度的，當子元素都浮動起來後，父親的內容高度即height變爲0，父元素就好像塌陷了同樣，於是又稱爲父級塌陷

2.1清除浮動

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

二、清除浮動方式二：

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 在兩個盒子中間添加一個額外的塊級元素 2 給這個額外添加的塊級元素設置clear：both； 注意： 外牆法它可讓第二個盒子使用margin-top屬性 外牆法不可讓第一個盒子使用margin-bottom屬性，因此咱們一般用牆的高度做margin的替代品 在企業開發中能夠爲牆添加一個類h20，而後設置h20的高度爲20實現外間距，搜狐網站大量使用了外牆法 #二、內牆法
    1 在第一個盒子中全部子元素最後添加一個額外的塊級元素 2 給這個額外添加的塊級元素設置clear：both； 注意： 內牆法它可讓第二個盒子使用margin-top屬性 內牆法可讓第一個盒子使用margin-bottom屬性 內牆法也能夠爲牆添加一個類h20，而後設置h20的高度爲20實現外間距，搜狐網站大量使用了內牆法

內牆法與外牆法的區別？ 一、外牆法不能夠撐起第一個盒子的高度，而內牆能夠二、在企業開發中清除浮動，內牆法與外牆法都不經常使用，由於添加一個無用的牆，在前端開發中推崇結構與樣式分離，而隔牆法須要添加大量的沒有意義的空標籤div

四、清除浮動的方式四

本質原理與內牆法同樣，但咱們用的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,不然僞類選擇器只能在谷歌瀏覽器中生效，其他沒用 <div class="header"></div> #整段代碼就至關於在浮動元素後面跟了個寬高爲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 }

五、清除浮動的方式五

overflow:hidden

但它除了清除浮動還有其餘方面的用途: 一、能夠將超出標籤範圍的內容裁剪掉二、清除浮動三、能夠經過overflow：hidden，讓裏面的盒子設置margin-top屬性後，外面的盒子不被頂下來，這樣就不用爲外邊的盒子添加邊框了

3.定位流

1.相對定位

相對定位就是相對於本身之前在標準流中的位置來移動,相對定位是不脫離標準流的

格式：

position：relative 須要配合如下四個屬性一塊兒使用 top:20px; left:30px; right:40px; bottom:50px;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style> * { margin:0; padding:0;} div { width: 100px; height: 100px;} .box1 { background-color: red;} .box2 { background-color: green; position: relative; #相對原來的位置上邊讓出20px,左邊讓出20px top: 20px; left: 20px;} .box3 { background-color: blue;
        }
    </style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>

相對定位

1.1 相對定位的注意點

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

top/bottom (只能用一個) left/right (只能用一個)

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

2.絕對定位

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

2.1 絕對定位的參考點

一、默認狀況下全部的絕對定位的元素，不管有無祖先元素，都會以body做爲參考點 二、若是一個絕對定位的元素有祖先元素，而且祖先元素也是定位流，那麼這個絕對定位的元素就會以定位流的那個祖先元素做爲參考點 2.1 只要是這個絕對定位元素的祖先元素均可以 2.2 祖先必須是定位流，此處的定位流指的是絕對定位、相對定位、固定定位(定位流中只有靜態定位不能夠) 2.3 若是一個絕對定位的元素有祖先元素，並且祖先元素中有多個元素都是定位流，那麼這個絕對定位的元素會以離它最近的那個定位流的祖先元素爲參考點

2.2 絕對定位的注意點

一、絕對定位的元素是脫離標準流的,因此絕對定位的元素不區分塊級元素/行內元素/行內塊級元素 二、若是一個絕對定位的元素是以body做爲參考點, 那麼實際上是以網頁首屏的寬度和高度做爲參考點, 而不是以整個網頁的寬度和高度做爲參考點，會相對於body定位會隨着頁面的滾動而滾動三、一個絕對定位的元素會忽略祖先元素的padding

2.3 絕對定位水平居中

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

<head>  
    <style> * {margin: 0; padding: 0;} .box1 { width: 200px; height: 50px; background-color: red; position: absolute; left: 50%; margin-left: -100px;}
    </style>
</head>
<body>
<div class="box1"></div>
</body>

3.固定定位

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style> * { margin: 0; padding: 0;} .bg { width: 600px; height: 1000px; border: 1px solid #000; background-image: url("https://images2018.cnblogs.com/blog/1036857/201805/1036857-20180515224016405-1306758469.jpg"); background-repeat: no-repeat; background-attachment: fixed;
        } div { width: 100px; height: 100px; } .box1 { background-color: red;
        } .box2 { border: 1px solid #000; border-radius: 50%; text-align: center; line-height: 100px;  background-color: green; position: fixed; right: 0; bottom: 0;
        } .box3 { background-color: blue;
        } .box4 { background-color: yellow; height: 2000px;
        }
    </style>
</head>
<body>
<div class="bg"></div>
<div class="box1"></div>
<div class="box2">回到頂部</div>
<div class="box3"></div>
<div class="box4"></div>
</body>
</html>

注意:

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

4.靜態定位

默認狀況下標準流中的元素position屬性就等於static, 因此靜態定位其實就是默認的標準流

5.z-index

一、z-index屬性：用於指定定位的元素的覆蓋關係 1.一、z-index值表示誰壓着誰,數值大的壓蓋住數值小的 1.二、只有定位了的元素，纔能有z-index值,也就是說，無論相對定位、絕對定位、固定定位，均可以使用z-index值,而浮動的東西不能用。 1.三、z-index值沒有單位，就是一個正整數。默認的z-index值是0。 1.四、若是你們都沒有z-index值(默認全部元素z-index值爲0),或者z-index值同樣，那麼誰寫在HTML後面，誰在上面能壓住別人。定位了的元素，永遠可以壓住沒有定位的元素。二、注意：從父現象 2.1父元素沒有z-index值, 那麼子元素誰的z-index大,誰蓋住誰 2.2父元素z-index值不同, 那麼父元素誰的z-index大,誰蓋住誰

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>z-index示例</title>
    <style> body { margin: 0;
        } .c1 { height: 1000px; width: 100%;
        } .cover { background-color: rgba(0,0,0,0.35); position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 999;
        } .modal { background-color: white; height: 400px; width: 600px; position: absolute; top: 50%; left: 50%; margin-left: -300px; margin-top: -200px; z-index: 1000;
        }
    </style>
</head>
<body>
<div class="c1">
   <p>asasadds</p>
</div>
<div class="cover"></div>
<div class="modal">
    <form action="">
        <p>姓名<input type="text"></p>
        <p>密碼<input type="password"></p>
        <p><input type="submit" value="登陸"></p>
    </form>
</div>
</body>
</html>

4. overflow溢出屬性

值	描述
visible	默認值。內容不會被修剪，會呈如今元素框以外。
hidden	內容會被修剪，而且其他內容是不可見的。
scroll	內容會被修剪，可是瀏覽器會顯示滾動條以便查看其他的內容。
auto	若是內容被修剪，則瀏覽器會顯示滾動條以便查看其他的內容。
inherit	規定應該從父元素繼承 overflow 屬性的值。