11.312 盒子模型 HTML文檔中的每個元素都被比喻成矩形盒子， 盒子模型通過四個邊界來描述：margin（外邊距），border（邊框），padding（內填充），content（內容區域），如果把一個盒子比喻成一個壁掛相片，那麼 1、css顯示模式:塊級、行內、行內塊級 在HTML中HTML ...
11.312 盒子模型
HTML文檔中的每個元素都被比喻成矩形盒子， 盒子模型通過四個邊界來描述：margin（外邊距），border（邊框），padding（內填充），content（內容區域），如果把一個盒子比喻成一個壁掛相片，那麼
外邊距margin ===== 一個相框與另外一個相框之間的距離
邊框border ====== 邊框指的就是相框
內邊距padding ===== 相片與邊框的距離
寬度width/高度height ===== 指定可以存放相片的區域
1、css顯示模式:塊級、行內、行內塊級
在HTML中HTML將所有標簽分為兩類，分別是容器級和文本級,在CSS中CSS也將所有標簽分為兩類，分別是塊級元素和行內元素
#1、HTML中容器級與文本級 容器級標簽：可以嵌套其他的所有標簽 div、h、ul>li、ol>li、dl>dt+dd 文本級標簽：只能嵌套文字、圖片、超鏈接 span、p、buis、strong、em、ins、del #2、CSS中塊級與行內 塊級：塊級元素會獨占一行，所有的容器類標簽都是塊級，文本標簽中的p標簽也是塊級 div、h、ul、ol、dl、li、dt、dd 還有標簽p 行內：行內元素不會獨占一行，所有除了p標簽以外的文本標簽都是行內 span、buis、strong、em、ins、del #3、塊級元素與行內元素的區別 1、塊級元素(block) 獨占一行,可以設置寬高,若沒有設置寬度，那麼預設和父元素一樣寬 2、行內元素(inline) 共用一行,不可以設置寬高，盒子寬高預設和內容一樣 3、行內塊級元素(inline-block) 不會獨占一行,可以設置寬高 例：<img src="../imags/1.png" alt="">
2、CSS顯示模式轉換
#display:可以通過標簽的display屬性設置顯示模式 none: HTML文檔中元素存在，但是在瀏覽器中不顯示。一般用於配合JavaScript代碼使用 block:塊級 inline:行內 inline-block:行內塊級 #display:"none"與visibility:hidden的區別： 1、visibility:hidden: 可以隱藏某個元素，但隱藏的元素仍需占用與未隱藏之前一樣的空間。也就是說，該元素雖然被隱藏了，但仍然會影響佈局。 2、display:none: 可以隱藏某個元素，且隱藏的元素不會占用任何空間。也就是說，該元素不但被隱藏了，而且該元素原本占用的空間也會從頁面佈局中消失。
3、div與span
佈局都是用塊級元素，而行內元素是控制內容顯示的。
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>
4、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%; #百分比設置（得到一個圓）
5、padding內邊距(內填充)
內邊距：邊框與內容的距離
padding-top：20px；
padding-right：20px；
padding-bottom：20px；
padding-left：20px；
padding: 70px 70px 70px 70px; #上 右 下 左
padding: 70px;
註意：
1、給標簽設置內邊距後，標簽內容占有的寬度和高度會發生變化，設置padding之後標簽內容的寬高是在原寬高的基礎上加上padding值。如果不想改變實際大小，那就在用寬高減掉padding對應方向的值 2、padding是添加給父級的，改變的是父級包含的內容的位置 3、內邊距也會有背景顏色
6、外邊距
標簽與標簽之間的距離就是外邊距
margin-top：20px；
margin-right：20px；
margin-bottom：20px；
margin-left：20px；
margin：上 右 下 左;
註意:
1、外邊距的那一部分是沒有背景顏色的 2、外邊距合併現象和疊加現象 在預設佈局的水平方向上，預設兩個盒子的外邊距會疊加，而在垂直方向上，預設情況下兩個盒子的外邊距是不會疊加的，會出現合併現象，誰的外邊距比較大，就聽誰的
<!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 什麼是脫離文檔流？
1、浮動元素脫離文檔流意味著: 1、不再區分行內、塊級、行內塊級，無論是什麼級的元素都可以水平排版 2、無論是什麼級的元素都可以設置寬高 綜上所述，浮動流中的元素和標準流中的行內塊級元素很像
<!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>
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的替代品 在企業開發中可以為牆添加一個類h20，然後設置h20的高度為20實現外間距，搜狐網站大量使用了外牆法 #2、內牆法 1 在第一個盒子中所有子元素最後添加一個額外的塊級元素 2 給這個額外添加的塊級元素設置clear：both； 註意： 內牆法它可以讓第二個盒子使用margin-top屬性 內牆法可以讓第一個盒子使用margin-bottom屬性 內牆法也可以為牆添加一個類h20，然後設置h20的高度為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,否則偽類選擇器只能在谷歌瀏覽器中生效，其餘沒用 <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 }
5、清除浮動的方式五
overflow:hidden
但它除了清除浮動還有其他方面的用途: 1、可以將超出標簽範圍的內容裁剪掉 2、清除浮動 3、可以通過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 絕對定位的參考點
1、預設情況下所有的絕對定位的元素，無論有無祖先元素，都會以body作為參考點 2、如果一個絕對定位的元素有祖先元素，並且祖先元素也是定位流，那麼這個絕對定位的元素就會以定位流的那個祖先元素作為參考點 2.1 只要是這個絕對定位元素的祖先元素都可以 2.2 祖先必須是定位流，此處的定位流指的是絕對定位、相對定位、固定定位(定位流中只有靜態定位不可以) 2.3 如果一個絕對定位的元素有祖先元素，而且祖先元素中有多個元素都是定位流，那麼這個絕對定位的元素會以離它 最近的那個定位流的祖先元素為參考點
2.2 絕對定位的註意點
1、絕對定位的元素是脫離標準流的,所以絕對定位的元素不區分塊級元素/行內元素/行內塊級元素 2、如果一個絕對定位的元素是以body作為參考點, 那麼其實是以網頁首屏的寬度和高度作為參考點, 而不是以整個網頁的寬度和高度作為參考點，會相對於body定位會隨著頁面的滾動而滾動 3、一個絕對定位的元素會忽略祖先元素的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.固定定位
固定定位的元素是脫離標準流的
1、固定定位（和絕對定位高度相似，和背景的關聯方式也高度相似）: 背景的關聯方式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; }
