CSS處理網頁時，它認為每個元素都包含在一個不可見的盒子里。
• 為什么要想象成盒子呢？因為如果把所有的元素都想象成盒子，那么我們對網頁的布局就相當於是擺放盒子。
• 我們只需要將相應的盒子擺放到網頁中相應的位置即可完成網頁的布局。
盒子模型
一個盒子我們會分成幾個部分：
– 內容區(content)
– 內邊距(padding)
– 邊框(border)
– 外邊距(margin)
盒子和邊框
| width和height | background-color | |
| 盒子 | 設置的盒子內容區的大小 | 設置背景顏色 |
| border-width | border-color | border-style | |
| 盒子邊框 | 邊框的寬度 | 邊框顏色 | 邊框的樣式 可選值： |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box1{ /* * width和height只是設置的盒子內容區的大小，而不是盒子的整個大小， * 盒子可見框的大小由內容區，內邊距和邊框共同決定 */ width: 300px; height: 300px; background-color: #bfa; border-width:10px ; /* 使用border-width可以分別指定四個邊框的寬度 如果在border-width指定了四個值， 則四個值會分別設置給 上 右 下 左，按照順時針的方向設置的 如果指定三個值， 則三個值會分別設置給 上 左右 下 如果指定兩個值， 則兩個值會分別設置給 上下 左右 如果指定一個值，則四邊全都是該值 除了border-width，CSS中還提供了四個border-xxx-width xxx的值可能是top right bottom left 專門用來設置指定邊的寬度 * */ /*border-width:10px 20px 30px 40px ;*/ /*border-width:10px 20px 30px ;*/ /*border-width: 10px 20px ;*/ border-width: 10px; /*border-left-width:100px ;*/ /* * 設置邊框的顏色 * 和寬度一樣，color也提供四個方向的樣式，可以分別指定顏色 * border-xxx-color */ border-color: red; /*border-color: red yellow orange blue;*/ /*border-color: red yellow orange;*/ /*border-color: red yellow;*/ /* * style也可以分別指定四個邊的邊框樣式，規則和width一致， * 同時它也提供border-xxx-style四個樣式，來分別設置四個邊 */ /*border-style: double;*/ border-style: solid dotted dashed double; } </style> </head> <body> <div class="box1"></div> </body> </html>
邊框的簡寫形式：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> .box{ width: 200px; height: 200px; background-color: #bfa; /* border * - 邊框的簡寫樣式，通過它可以同時設置四個邊框的樣式，寬度，顏色 * - 而且沒有任何的順序要求 * - border一指定就是同時指定四個邊不能分別指定 * 可以單獨設置四個邊的樣式，規則和border一樣，只不過它只對一個邊生效 */ /*設置四個邊框*/ border: red solid 10px ; /* 設置上下左右*/ border-top: red solid 10px; border-bottom: red solid 10px; border-left: red solid 10px; border-right: red solid 10px;/*設置三邊，屬性為none一邊無邊框*/ border: red solid 10px; border-right: none; } </style> </head> <body> <div class="box"></div> </body> </html>
需要注意的是，大部分的瀏覽器中，邊框的寬度和顏色都是有默認值，而邊框的樣式默認值都是none。只寫一個border-style: ，就會出現一個默認的邊框。
內邊距
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box1{ width: 200px; height: 200px; background-color: #bfa; /*設置邊框*/ border: 10px red solid; /*設置上右下左內邊距*/ padding-top: 100px; padding-right: 100px; padding-bottom: 100px; padding-left: 100px; /*使用padding可以同時設置四個邊框的樣式，規則和border-width一致*/ /* * 使用padding可以同時設置四個邊框的樣式，規則和border-width一致 */ /*padding: 100px;*/ /*padding: 100px 200px;*/ /*padding: 100px 200px 300px;*/ padding: 100px 200px 300px 400px; } </style> </head> <body> <div class="box1"> <div class="box2"></div> </div> </body> </html>
內邊距會影響盒子的可見框的大小，元素的背景會延伸到內邊距,
* 盒子的大小由內容區、內邊距和邊框共同決定
* 盒子可見框的寬度 = border-left-width + padding-left + width + padding-right + border-right-width
* 盒子 可見框的高度 = border-top-width + padding-top + height + padding-bottom + border-bottom-width
需要注意的是以下這種情況：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box1{ width: 200px; height: 200px; background-color: #bfa; padding: 100px 200px 300px 400px; } /*box2的百分比只與box1的寬度和高度產生比例關系。不與內邊距成比例關系*/ .box2{ width: 100%; height: 100%; background-color: yellow; } </style> </head> <body> <div class="box1"> <div class="box2"></div> </div> </body> </html>
效果：
外邊距
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box1{ width: 200px; height: 200px; background-color: #bfa; border: 10px solid red /*設置上右下左外邊距*/ margin-top: 100px ; margin-right: 100px; margin-bottom: 100px; margin-left: 100px; /* 外邊距也可以指定為一個負值，如果外邊距設置的是負值，則元素會向反方向移動 */ margin-left: -150px; /* margin還可以設置為auto，垂直方向外邊距如果設置為auto，則外邊距默認就是0 如果將left和right同時設置為auto，以使子元素在父元素中水平居中，經常使用. */ margin-right: auto /* * 外邊距同樣可以使用簡寫屬性 margin */ margin: 0 auto; } .box2{ width: 200px; height: 200px; background-color: yellow; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> </body> </html>
垂直外邊距的折疊
在網頁中相鄰的垂直方向的外邊距會發生外邊距的重疊
* 所謂的外邊距重疊指兄弟元素之間的相鄰外邊距會取最大值而不是取和
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box1{ width: 100px; height: 100px; background-color: red; /* * 為上邊的元素設置一個下外邊距 */ margin-bottom: 100px; } .box2{ width: 100px; height: 100px; background-color: green; /** * 為下邊的元素設置一個上外邊距 */ margin-top: 200px; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> </body> </html>
效果:
* 如果父子元素的垂直外邊距相鄰了，則子元素的外邊距會設置給父元素（子元素同樣也會繼承父元素）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box3{ width: 200px; height: 100px; background-color: yellow; } .box4{ width: 100px; height: 100px; background-color: yellowgreen; margin-top: 100px; /* * 為子元素設置一個上外邊距，是子元素的位置下移 */ } </style> </head> <body> <div class="box3"> <div class="box4"></div> </div> </body> </html>
效果：
想要解決垂直外邊距的折疊的問題，只要將兩個元素設置不相鄰即可
方法一：將兩個元素相鄰的元素隔開
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box3{ width: 200px; /*為了高度不變，減掉隔開元素的內邊距px*/ height: 199px; background-color: yellow; /*設置一個上內邊距，將兩個元素隔開*/ padding-top:1px; } .box4{ width: 100px; height: 100px; background-color: yellowgreen; margin-top: 100px; } </style> </head> <body> <div class="box3"> <div class="box4"></div> </div> </body> </html>
方法二：使用垂直內邊距將第二個元素擠下來
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box3{ width: 200px; height: 100px; background-color: yellow; /*設置一個內邊框，將子元素擠下來*/ padding-top: 100px; } .box4{ width: 100px; height: 100px; background-color: yellowgreen; } </style> </head> <body> <div class="box3"> <div class="box4"></div> </div> </body> </html>
瀏覽器默認樣式
瀏覽器為了在頁面中沒有樣式時，也可以有一個比較好的顯示效果，
* 所以為很多的元素都設置了一些默認的margin和padding，
* 而它的這些默認樣式，正常情況下我們是不需要使用的。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /* * 清除瀏覽器的默認樣式 */ *{ margin: 0; padding: 0; }
.box1{ width: 100px; height: 100px; background-color: #bfa; } p{ background-color: yellow; } </style> </head> <body> <div class="box1"></div> <p>段落</p> <p>段落</p> <p>段落</p> <ul> <li>無序列表</li> <li>無序列表</li> <li>無序列表</li> <li>無序列表</li> </ul> </body> </html>
內聯元素盒子模型
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> span{ background-color: #bfa; } .box1{ width: 100px; height: 100px; background-color: red; } .s1{ /* 內容區、內邊距 、邊框 、外邊距 * */ /* * 內聯元素不能設置width和height */ /*width: 200px; height: 200px;*/ /* * 設置水平內邊距,內聯元素可以設置水平方向的內邊距 */ padding-left: 100px ; padding-right: 100px ; /* * 垂直方向內邊距，內聯元素可以設置垂直方向內邊距，但是不會影響頁面的布局 */ /*padding-top: 50px; padding-bottom: 50px;*/ /* * 為元素設置邊框, * 內聯元素可以設置邊框，但是垂直的邊框不會影響到頁面的布局 */ border: 1px blue solid; /* * 水平外邊距 * 內聯元素支持水平方向的外邊距 */ margin-left:100px ; margin-right: 100px; /* * 內聯元素不支持垂直外邊距 */ /*margin-top: 200px; margin-bottom: 200px;*/ } .s2{ /* * 為右邊的元素設置一個左外邊距 * 水平方向的相鄰外邊距不會重疊，而是求和 */ margin-left: 100px; } </style> </head> <body> <span class="s1">我是一個span</span> <span class="s2">我是一個span</span> <span>我是一個span</span> <span>我是一個span</span> <div class="box1"></div> </body> </html>
水平方向的內邊距：
垂直方向內邊距（雖然不影響頁面，但是會擋住下面的元素）：
為元素設置邊框（垂直不會影響頁面，但是會擋住下面的元素。水平的邊框會影響頁面）：
水平方向外邊距，且外邊距不會重疊，而是求和
display樣式
因為內聯元素無法設置寬和高，所以可以用display樣式將內聯元素轉換成寬元素
| inline | block | inline-block | none |
| 可以將一個元素作為內聯元素顯示 | 可以將一個元素設置塊元素顯示 | 將一個元素轉換為行內塊元素 可以使一個元素既有行內元素的特點又有塊元素的特點 |
不顯示元素，並且元素不會在頁面中繼續占有位置 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> a{ background-color: #bfa; display: inline-block; /*為其設置一個寬和高*/ width: 500px; height: 500px; } </style> </head> <body> <a href="#">我是一個大大的超鏈接</a> <span>hello</span> </body> </html>
效果：
一、內聯元素寬高的確定
寬度：不受width的限制，有文字內容決定的，padding 和 margin 可以改變寬度。
高度：不受height的限制，padding 和margin 也不能改變。可以通過line-height 和 font-size來改變。
二、塊級元素寬高的確定
寬度：1、可以自行設置width的值；2、不設置寬度時的值為auto，默認寬度是父元素的寬度-自身的border-自身的margin。3、需要注意的是如果寬度寫了100%，應該是元素內容的寬度（content）等於父元素的寬度，元素的寬度應該等於這個寬度加自身的border，會凸出來一部分。
高度：1、可以自行設置height的值；2、默認值為0；3、由元素內部的文檔流中的元素的高度的總和決定的（里面元素的height+padding+margin有合並的可能），當元素脫離文檔流時，不能用於父元素高度的計算；4、當塊級元素里面是文字時，文字只有一行，高度由line-height決定，文字有多行，會自動換行，但是碰到長度很長的單詞時需要手動添加連字符（-）換行，有一個屬性與之相關，word-breaking: break all; 超出寬度，不管單詞是否結束都換行。
三、inline-block元素寬高的確定
寬度：1、設置width的值，超出寬度部分的處理方式和div一樣，多個inline-block元素處於一行中時和inline元素的效果一樣，可以用white-space控制是否換行；2、內容決定寬度。
visibility樣式
設置元素顯示和隱藏
| visible | hidden |
| 默認值，元素默認會在頁面顯示 | 元素會隱藏不顯示 |
visibility：hidden與display：none有什么區別那？
display: none;
使用該方式隱藏的元素，不會在頁面中顯示，並且不再占據頁面的位置
visibility:hidden
隱藏的元素雖然不會在頁面中顯示，但是它的位置會依然保持
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box1{ width: 100px; height: 100px; background-color: #bfa; display: none; } .box2{ width: 100px; height: 100px; background-color: orange; visibility:hidden ; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> <span>hello</span> </body> </html>
效果：
overflow樣式
如果子元素的大小超過了父元素的內容區，則超過的大小會在父元素以外的位置顯示，超出父元素的內容，我們稱為溢出的內容* 元素默認是將溢出內容，在父元素外邊顯示，通過overflow可以設置父元素如何處理溢出內容：
| visible | hidden | scroll | auto |
| 默認值，不會對溢出內容做處理，元素會在父元素以外的位置顯示 | 溢出的內容，會被修剪，不會顯示 | 會為父元素添加滾動條，通過拖動滾動條來查看完整內容 |
會根據需求自動添加滾動條， |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box1{ width: 200px; height: 200px; background-color: #bfa; overflow: ; } .box2{ width: 100px; height: 500px; background-color: red; } </style> </head> <body> <div class="box1"> <div class="box2"> </div> </div> </body> </html>
visible：
hidden：
scroll（使文本滾動較多使用scroll）：
文檔流
文檔流處在網頁的最底層，它表示的是一個頁面中的位置，我們所創建的元素默認都處在文檔流中
元素在文檔流中的特點
塊元素
1.塊元素在文檔流中會獨占一行，塊元素會自上向下排列。
2.塊元素在文檔流中默認寬度是父元素的100%
3.塊元素在文檔流中的高度默認被內容撐開
內聯元素
1.內聯元素在文檔流中只占自身的大小，會默認從左向右排列，如果一行中不足以容納所有的內聯元素，則換到下一行，
繼續自左向右。
2.在文檔流中，內聯元素的寬度和高度默認都被內容撐開
浮動樣式
塊元素在文檔流中默認垂直排列，所以這個三個div自上至下依次排開，*如果希望塊元素在頁面中水平排列，可以使塊元素脫離文檔流。使用float來使元素浮動，從而脫離文檔流。
| none | left | right |
| 默認值，元素默認在文檔流中排列 | 元素會立即脫離文檔流，向頁面的左側浮動 | 元素會立即脫離文檔流，向頁面的右側浮動 |
當為一個元素設置浮動以后（float屬性是一個非none的值），元素會立即脫離文檔流，元素脫離文檔流以后，它下邊的元素會立即向上移動* 元素浮動以后，會盡量向頁面的左上或這是右上漂浮，直到遇到父元素的邊框或者其他的浮動元素
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box1{ width: 200px; height: 200px; background-color: red; float: right; } .box2{ width: 200px; height: 200px; background-color: yellow; float: left; } .box3{ width: 300px; height: 300px; background-color: blue; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </body> </html>
效果：
box1,box2,box3同時向右浮動（向左同理）：
如果元素過長，而瀏覽器過窄就會換到第二行繼續保持浮動：
浮動的元素不會超過他上邊的兄弟元素，最多最多一邊齊:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box1{ width: 500px; height: 200px; background-color: red; float: left; } .box2{ width: 400px; height: 200px; background-color: yellow; float: left; } .box3{ width: 300px; height: 300px; background-color: blue; float: right; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </body> </html>
需要注意的是：
浮動的元素不會蓋住文字，文字會自動環繞在浮動元素的周圍， 所以我們可以通過浮動來設置文字環繞圖片的效果。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } .box1{ width: 100px; height: 100px; background-color: #bfa; /*box1向左浮動*/ float: left; } .p1{ background-color: yellow; } </style> </head> <body> <div class="box1"></div> <p class="p1"> 一進大門，靠着大門洞子的東壁是三間破房子，靠着大門洞子的西壁仍是三間破房子。再加上一個大門洞，看起來是七間連着串，外表上似乎是很威武的，房子都很高大，架着很粗的木頭的房架。柁頭是很粗的，一個小孩抱不過來。都一律是瓦房蓋，房脊上還有透窿的用瓦做的花，迎着太陽看去，是很好看的，房脊的兩梢上，一邊有一個鴿子，大概也是瓦做的。終年不動，停在那里。這房子的外表，似乎不壞。 </p> </body> </html>
效果：
當元素設置浮動以后，會完全脫離文檔流
塊元素脫離文檔流以后，高度和寬度都被內容撐開
內聯元素脫離文檔流以后會變成塊元素
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box1{ background-color: #bfa; /*float: left;*/ } .s1{ float: left; width: 100px; height: 100px; background-color: yellow; } </style> </head> <body> <div class="box1">a</div> <span class="s1">hello</span> </body> </html>
效果：
