CSS - 盒模型（框模型）
目錄
一、盒模型概念
廣義盒模型：文件中所有功能性及內容性標籤，及文件中所有顯示性標籤
俠義盒模型：文件中以塊級形式存在的標籤（塊級標籤擁有盒模型100%特性且最常用）
盒模型組成：margin + border + padding + content
二、盒模型成員介紹
1、content（內容顯示區域）
content控制內容的顯示區域
通過設定width與height來規定content（content = width * height）
塊級標籤可以設定自身寬高，預設寬為父級寬(width=auto)、高為0，高度可以由內容決定
內聯標籤不可以設定自身寬高，預設寬高均為0，寬高一定由內容決定
2、border（邊框）
border 邊框 組成成員（三部分）： border-width(寬度)、border-color(顏色)、border-style(風格)
border 成員：border-left、border-right、border-top、border-bottom
border-width 成員：border-left-width（左邊框寬度）、border-right-width（右邊框寬度）、border-top-width（上邊框寬度）、border-bottom-width（下邊框寬度）
p {border-width: 5px;} p {border-width: thick;} p {border-width: 15px 5px 15px 5px;} p {border-width: 15px 5px;} p { border-top-width: 15px; border-right-width: 5px; border-bottom-width: 15px; border-left-width: 5px; }注：CSS 沒有定義 3 個關鍵字的具體寬度，所以一個使用者代理可能把 thin 、medium 和 thick 分別設定為等於 5px、3px 和 2px，而另一個使用者代理則分別設定為 3px、2px 和 1px。border-color成員：border-left-color、border-right-color、border-top-color、border-bottom-color
p { border-style: solid; border-color: blue rgb(25%,35%,45%) #909090 red; } p { border-style: solid; border-color: blue red; } h1 { border-style: solid; border-color: black; border-right-color: red; }- 透明邊框（邊框顏色 transparent）
我們剛才講過，如果邊框沒有樣式，就沒有寬度。不過有些情況下您可能希望建立一個不可見的邊框。
CSS2 引入了邊框顏色值 transparent。這個值用於建立有寬度的不可見邊框。請看下面的例子：
<a href="#">AAA</a> <a href="#">BBB</a> <a href="#">CCC</a>我們為上面的連結定義瞭如下樣式：
a:link, a:visited { border-style: solid; border-width: 5px; border-color: transparent; } /*懸浮顯示灰色邊框*/ a:hover {border-color: gray;}
border-style 成員：border-left-style、border-right-style、border-top-style、border-bottom-style
p {border-style: solid solid solid none;} p {border-style: solid; border-left-style: none;}注意：如果要使用第二種方法，必須把單邊屬性放在簡寫屬性之後。因為如果把單邊屬性放在 border-style 之前，簡寫屬性的值就會覆蓋單邊值 none。
風格 解釋 solid 實線 dashed 虛線 dotted 點狀線 double 雙實線 groove 槽狀線 ridge 脊線 inset 內嵌效果線 outset 外凸效果線 none 清除邊框線 注意：border滿足整體設定語法，eg：border: 1px solid red;
屬性 描述 border 簡寫屬性，用於把針對四個邊的屬性設定在一個宣告。 border-style 用於設定元素所有邊框的樣式，或者單獨地為各邊設定邊框樣式。 border-width 簡寫屬性，用於為元素的所有邊框設定寬度，或者單獨地為各邊邊框設定寬度。 border-colo 簡寫屬性，設定元素的所有邊框中可見部分的顏色，或為 4 個邊分別設定顏色。 border-bottom 簡寫屬性，用於把下邊框的所有屬性設定到一個宣告中。 border-bottom-color 設定元素的下邊框的顏色。 border-bottom-style 設定元素的下邊框的樣式。 border-bottom-widt 設定元素的下邊框的寬度。 border-left 簡寫屬性，用於把左邊框的所有屬性設定到一個宣告中。 border-left-color 設定元素的左邊框的顏色。 border-left-style 設定元素的左邊框的樣式。 border-left-width 設定元素的左邊框的寬度。 border-right 簡寫屬性，用於把右邊框的所有屬性設定到一個宣告中。 border-right-color 設定元素的右邊框的顏色。 border-right-style 設定元素的右邊框的樣式。 border-right-width 設定元素的右邊框的寬度。 border-top 簡寫屬性，用於把上邊框的所有屬性設定到一個宣告中。 border-top-color 設定元素的上邊框的顏色。 border-top-style 設定元素的上邊框的樣式。 border-top-width 設定元素的上邊框的寬度。
3、padding
padding成員：padding-left、padding-right、padding-top、padding-bottom
padding整體設定
值得個數 方位 1個 -- >> h1 {padding: 10px;} 上下左右 2個 -->> h1 {padding: 10px 2ex;} 上下 | 左右 3個 -->> h1 {padding: 10px 0.25em 2ex;} 上 | 左右 | 下 4個 -->> h1 {padding: 10px 0.25em 2ex 20%;} 上 | 右 | 下 | 左
單邊內邊距屬性
也通過使用下面四個單獨的屬性，分別設定上、右、下、左內邊距：
- padding-top
- padding-right
- padding-bottom:
- padding-left
下面的規則實現的效果與上面的簡寫規則是完全相同的：
h1 { padding-top: 10px; padding-right: 0.25em; padding-bottom: 2ex; padding-left: 20%; }內邊距的百分比數值
可以為元素的內邊距設定百分數值。
百分數值是相對於其父元素的 width 計算的，這一點與外邊距一樣。所以，如果父元素的 width 改變，它們也會改變。下面這條規則把段落的內邊距設定為父元素 width 的 10%：
p {padding: 10%;}例如：如果一個段落的父元素是 div 元素，那麼它的內邊距要根據 div 的 width 計算。
<div style="width: 200px;"> <p>This paragragh is contained within a DIV that has a width of 200 pixels.</p> </div>注意：上下內邊距與左右內邊距一致；即上下內邊距的百分數會相對於父元素寬度設定，而不是相對於高度。
4、margin（外邊距）
margin成員：margin-left、margin-right、margin-top、margin-bottom
margin 的預設值是 0，所以如果沒有為 margin 宣告一個值，就不會出現外邊距。
在實際中，瀏覽器對許多元素已經提供了預定的樣式，外邊距也不例外。 例如，在支援 CSS 的瀏覽器中，外邊距會在每個段落元素的上面和下面生成“空行”。因此，如果沒有為 p 元素宣告外邊距，瀏覽器可能會自己應用一個外邊距。當然，只要你特別作了宣告，就會覆蓋預設樣式。
margin整體設定（值複製概念）
賦值個數 方位 1個 -->> h1 {margin : 0.25px;} 上下左右 2個 -->> h1 {margin: 0.5em 1em;} 上下 | 左右 3個 -->>h1 {margin: 0.25em 1em 0.5em;} 上 | 左右 | 下 4個 -->>h1 {margin : 10px 0px 15px 5px;} 上 | 右 | 下 | 左 - 值複製
p {margin: 0.5em 1em 0.5em 1em;} /*等價於*/ p {margin: 0.5em 1em;}CSS 定義了一些規則，允許為外邊距指定少於 4 個值。規則如下：
如果缺少左外邊距的值，則使用右外邊距的值。
如果缺少下外邊距的值，則使用上外邊距的值。
如果缺少右外邊距的值，則使用上外邊距的值。
下圖提供了更直觀的方法來了解這一點：
如果為外邊距指定了 3 個值，則第 4 個值（即左外邊距）會從第 2 個值（右外邊距）複製得到。
如果給定了兩個值，第 4 個值會從第 2 個值複製得到，第 3 個值（下外邊距）會從第 1 個值（上外邊距）複製得到。
如果只給定一個值，那麼其他 3 個外邊距都由這個值（上外邊距）複製得到。
利用這個簡單的機制，您只需指定必要的值，而不必全部都應用 4 個值，例如：
h1 {margin: 0.25em 1em 0.5em;} /*（上，左右，下）等價於 0.25em 1em 0.5em 1em */ h2 {margin: 0.5em 1em;} /*（上下，左右）等價於 0.5em 1em 0.5em 1em */ p {margin: 1px;} /* （上下左右）等價於 1px 1px 1px 1px */假設希望把 p 元素的上外邊距和左外邊距設定為 20 畫素，下外邊距和右外邊距設定為 30 畫素。在這種情況下，必須寫作：
p {margin: 20px 30px 30px 20px;}這樣才能得到您想要的結果。遺憾的是，在這種情況下，所需值的個數沒有辦法更少了。
如果希望除了左外邊距以外所有其他外邊距都是 auto（左外邊距是 20px）：
p {margin: auto auto auto 20px;}同樣的，這樣才能得到你想要的效果。問題在於，鍵入這些 auto 有些麻煩。如果您只是希望控制元素單邊上的外邊距，請使用單邊外邊距屬性。
- 單邊外邊距屬性
單邊外邊距屬性:為元素單邊上的外邊距設定值。 假設您希望把 p 元素的左外邊距設定為 20px。不必使用 margin（需要鍵入很多 auto），而是可以採用以下方法：
p {margin-left: 20px;}您可以使用下列任何一個屬性來只設置相應上的外邊距，而不會直接影響所有其他外邊距：
margin-top
margin-right
margin-bottom
margin-left
常用值： auto--瀏覽器設定的右外邊距，自定義數字值一個規則中可以使用多個這種單邊屬性，例如：
h2 { margin-top: 20px; margin-right: 30px; margin-bottom: 30px; margin-left: 20px; }當然，對於這種情況，使用 margin 可能更容易一些：
p {margin: 20px 30px 30px 20px;}一般來說，如果希望為多個邊設定外邊距，使用 margin 會更容易一些。
注意：
Netscape 和 IE 對 body 標籤定義的預設邊距（margin）值是 8px。
而 Opera 相反，Opera 將內部填充（padding）的預設值定義為 8px，因此如果希望對整個網站的邊緣部分進行調整，並將之正確顯示於 Opera 中，那麼必須對 body 的 padding 進行自定義。
三、border-radius（邊界圓角）
border-radius成員
成員 解釋 border-top-left-radius 左上 方位 border-top-right-radius 右上 方位 border-bottom-left-radius 左下 方位 border-bottom-right-radius 右下 方位
單方位(指定單角)設定
賦值個數(值型別：長度 | 百分比) 解釋 1 --->> border-top-left-radius: 100px; 單角 橫縱 2 --->> border-top-left-radius: 100px 50px; 單角 橫 | 縱
按角整體設定
賦值個數(值型別：長度 | 百分比) 解釋 1 左上&右上&左下&右下 2 左上&右下，右上&左下 3 左上 ，右上& 左下 ， 右下 4 左上，右上， 右下， 左下
分向整體設定
格式 解釋 1 / 1 --- >> border-radius: 10px 100px 50px / 50px; 橫向/ 縱向 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>邊界圓角</title> <style type="text/css"> .box { width: 200px; height: 200px; background-color: orange; } /*單角設定*/ .box { /*一個固定值: 橫縱*/ border-top-left-radius: 100px; /*兩個固定值:橫 縱*/ border-top-left-radius: 100px 50px; /*百分比賦值*/ border-top-left-radius: 100%; } /*整體賦值*/ .box { /*不分方位(橫縱)*/ /*左上為第一個角,順時針,不足找對角*/ /*border-radius: 10px 100px 50px;*/ /*區分橫縱*/ /*1./前控制橫向,後控制縱向*/ /*2.橫向又可以分為1,2,3,4個值,縱向毅然*/ border-radius: 10px 100px 50px / 50px; /*左上橫10 右上橫100 右下橫50 左下橫100 / 縱向全為50*/ /*所有最多可以賦值8個值*/ } </style> </head> <body> <div class="box"></div> </body> </html>
四、其他相關屬性
1.max、min-width、height
2.display
值 描述 inline 內聯 block 塊級 inline-block 內聯塊 塊（block）：
獨行顯示
支援寬高，寬預設適應父級，高預設由子級或內容撐開
設定寬高後，一定採用設定的寬高
內聯（inline）：
同行顯示
不支援寬高
內聯塊（inline-block）：
同行顯示，之間有間距
支援寬高，寬高由內容撐開
設定寬高後，一定採用設定的寬高
若設定寬高中其一，另一個會根據內容等比縮放
巢狀規則：
塊可以巢狀所有型別
內聯一般只巢狀內聯
內聯塊一般只作為最內層級
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>display</title> <!-- 預設值 --> <style type="text/css"> div { /*塊*/ display: block; /*自適應父級可用content的寬度*/ /*width: auto;*/ /*預設0*/ /*height: 0px;*/ } span { /*內聯*/ display: inline; /*不支援寬高*/ } img { /*內聯塊*/ display: inline-block; width: auto; height: auto; } </style> <!-- 驗證寬高設定 --> <style> .sup { width: 300px; /*height: 100px;*/ background-color: orange } .sub { /*width: 200px;*/ /*height: 200px;*/ background-color: cyan } .s1, .s2 { /*width: 200px; height: 200px;*/ background-color: brown } img { /*width: 350px;*/ /*height: 350px;*/ } </style> </head> <body> <!-- 塊 --> <div></div> <!-- 內聯 --> <span></span> <!-- 內聯塊 --> <!-- 同行顯示,之間有間距 支援寬高,寬高由內容撐開 --> <img src="./img/icon.jpg" alt=""> <img src="./img/icon.jpg" alt=""> <!-- 橘色塊 --> <div class="sup"> <!-- 藍色塊 未設定寬高：預設父寬，內容高--> <div class="sub">111</div> </div> <!-- 內聯 不支援設定寬高 --> <span class="s1">123</span> <span class="s2">456</span> </body> </html>
3.overflow
值 描述 visible 預設值。內容不會被修剪，會呈現在元素框之外。 hidden 內容會被修剪，並且其餘內容是不可見的。 scroll 內容會被修剪，但是瀏覽器會顯示滾動條以便檢視其餘的內容。 auto 如果內容被修剪，則瀏覽器會顯示滾動條以便檢視其餘的內容。 inherit 規定應該從父元素繼承 overflow 屬性的值。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>voerflow</title> <!-- 顯示區域只能由父級大小決定 --> <style type="text/css"> /*子級區域大於父級*/ .sup { width: 100px; height: 100px; /*預設值*/ /*border: 3px none black;*/ /*清除邊框*/ /*border: 0;*/ /*border: none;*/ /*最簡單的設定*/ border: solid; } .sub { width: 200px; height: 200px; background-color: red } /*對父級進行overflow設定*/ .sup { /*以滾動的方式允許子級所有內容顯示*/ overflow: auto; /*overflow: scroll;*/ /*只執行子級在父級所在區域的部分顯示,超出的部分影藏*/ /*overflow: hidden;*/ } </style> </head> <body> <!-- display: block大環境下 --> <!-- <div class="sup"> <div class="sub"></div> </div> --> <div class="sup"> 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 哈哈 呼呼 呵呵 嘻嘻 嘿嘿 </div> </body> </html>
