CSS基礎（三）
阿新 • • 發佈：2018-10-06
inset gin 虛線 讓我 一起 gif white 左右 left 一、CSS盒子模型（Box Model）
所有HTML元素可以看做盒子，在CSS中“box model”這一術語是用來設計和布局使用。
CSS盒模型本質上是一個盒子，封裝周圍的HTML元素，它包括：邊距、邊框、填充和實際內容。
盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素
盒子模型：
說明：
- Margin（外邊距）：清除邊框外的區域，外邊距是透明的
- Border（邊框）：圍繞在內邊距和內容外的邊框
- Pandding（內邊距）：清除周圍的區域，內邊距是透明的
- Content（內容）：盒子的內容，顯示文本和圖像
元素的高度和寬度：
當指定一個CSS元素的寬度和高度屬性時，我們只是設置了內容區域的寬度和高度。而完全大小的元素還需要添加填充、邊框和邊距。
讓我們自己算算：
300px (寬)
+ 50px (左 + 右填充)
+ 50px (左 + 右邊框)
+ 50px (左 + 右邊距)
= 450px
如果我們只有250像素的空間：
1. 邊框樣式
border-style屬性用來定義邊框的樣式
2. 邊框寬度
border-width屬性用來指定邊框的寬度。
為邊框指定寬度有兩種方法：可以指定長度值，比如 2px 或 0.1em(單位為 px, pt, cm, em 等)，或者使用 3 個關鍵字之一，它們分別是 thick 、medium（默認值） 和 thin。
註意：CSS 沒有定義 3 個關鍵字的具體寬度，所以一個用戶可能把 thick 、medium 和 thin 分別設置為等於 5px、3px 和 2px，而另一個用戶則分別設置為 3px、2px 和 1px。
1. 可能的值
- auto：設置瀏覽器邊框。這樣的結果會依賴於瀏覽器
- length：定義一個固定的margin（使用像素、pt、em等）
- %：使用一個百分比的邊距
Margin可以使用負值，重疊內容
2. 單邊外邊距屬性
說明：
- Margin（外邊距）：清除邊框外的區域，外邊距是透明的
- Border（邊框）：圍繞在內邊距和內容外的邊框
- Pandding（內邊距）：清除周圍的區域，內邊距是透明的
- Content（內容）：盒子的內容，顯示文本和圖像
元素的高度和寬度：
當指定一個CSS元素的寬度和高度屬性時，我們只是設置了內容區域的寬度和高度。而完全大小的元素還需要添加填充、邊框和邊距。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jiumo</title> <style> div { background-color: lightgrey; width: 300px; border: 25px solid green; padding: 25px; margin: 25px; } </style> </head> <body> <h2>盒子模型演示</h2> <p>CSS盒模型本質上是一個盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充，和實際內容。</p> <div>這裏是盒子內的實際內容。有 25px 內間距，25px 外間距、25px 綠色邊框。</div> </body> </html>
讓我們自己算算：
300px (寬)
+ 50px (左 + 右填充)
+ 50px (左 + 右邊框)
+ 50px (左 + 右邊距)
= 450px
如果我們只有250像素的空間：
div { width: 220px; padding: 10px; border最終元素的總寬度計算公式是這樣的： 總元素的寬度=寬度+左填充+右填充+左邊框+右邊框+左邊距+右邊距 元素的總高度最終計算公式是這樣的： 總元素的高度=高度+頂部填充+底部填充+上邊框+下邊框+上邊距+下邊距 二、CSS邊框 css邊框屬性允許我們指定一個元素邊框的樣式和顏色: 5px solid gray; margin: 0; }
1. 邊框樣式
border-style屬性用來定義邊框的樣式
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jiumo</title> <style> p.none {border-style:none;} p.dotted {border-style:dotted;} p.dashed {border-style:dashed;} p.solid {border-style:solid;} p.double {border-style:double;} p.groove {border-style:groove;} p.ridge {border-style:ridge;} p.inset {border-style:inset;} p.outset {border-style:outset;} p.hidden {border-style:hidden;} </style> </head> <body> <p class="none">無邊框。</p> <p class="dotted">虛線邊框。</p> <p class="dashed">虛線邊框。</p> <p class="solid">實線邊框。</p> <p class="double">雙邊框。</p> <p class="groove"> 凹槽邊框。</p> <p class="ridge">壟狀邊框。</p> <p class="inset">嵌入邊框。</p> <p class="outset">外凸邊框。</p> <p class="hidden">隱藏邊框。</p> </body> </html>
2. 邊框寬度
border-width屬性用來指定邊框的寬度。
為邊框指定寬度有兩種方法：可以指定長度值，比如 2px 或 0.1em(單位為 px, pt, cm, em 等)，或者使用 3 個關鍵字之一，它們分別是 thick 、medium（默認值） 和 thin。
註意：CSS 沒有定義 3 個關鍵字的具體寬度，所以一個用戶可能把 thick 、medium 和 thin 分別設置為等於 5px、3px 和 2px，而另一個用戶則分別設置為 3px、2px 和 1px。
p.one{ border-style:solid; border-width:5px; } p.two{ border-style:solid; border-width:medium; }3. 邊框顏色 border-color屬性用於設置邊框的顏色 我們還可以設置邊框的顏色為"transparent"
p.one{ border-style:solid; border-color:red; } p.two{ border-style:solid; border-color:#98bf21; }4. 單獨設置各邊 在CSS中，可以指定不同的側面不同的邊框：
p { border-top-style:dotted; border-right-style:solid; border-bottom-style:dotted; border-left-style:solid; }border-style屬性可以有1-4個值： border-style:dotted solid double dashed; 上邊框是 dotted 右邊框是 solid 底邊框是 double 左邊框是 dashed border-style:dotted solid double; 上邊框是 dotted 左、右邊框是 solid 底邊框是 double border-style:dotted solid; 上、底邊框是 dotted 右、左邊框是 solid border-style:dotted; 四面邊框是 dotted 上面的例子用了border-style。然而，它也可以和border-width 、 border-color一起使用。 5. 邊框屬性簡寫
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jiumo</title> <style> p { border-style:solid; /*簡明單獨定義上邊框： 寬度 雙邊框 顏色*/ border-top:thick double #ff0000; } </style> </head> <body> <p>段落中的一些文本。</p> </body> </html>三、CSS外邊距 CSS margin(外邊距)屬性定義了元素周圍的空間 margin清除周圍的（外邊框）元素區域，margin沒有背景顏色，是完全透明的。 margin可以單獨改變元素的上、下、左、右邊距，也可以一次改變所有的屬性。
1. 可能的值
- auto：設置瀏覽器邊框。這樣的結果會依賴於瀏覽器
- length：定義一個固定的margin（使用像素、pt、em等）
- %：使用一個百分比的邊距
Margin可以使用負值，重疊內容
2. 單邊外邊距屬性
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
3. 簡寫屬性
margin屬性可以有一到四個值。/p>
margin:25px 50px 75px 100px;
上邊距為25px
右邊距為50px
下邊距為75px
左邊距為100px
margin:25px 50px 75px;
上邊距為25px
左右邊距為50px
下邊距為75px
margin:25px 50px;
上下邊距為25px
左右邊距為50px
margin:25px;
所有的4個邊距都是25px
四、CSS填充
CSS padding（填充）是一個簡寫的屬性，定義元素邊框與元素內容之間的空間，即：上下左右的內邊距。
1. padding（填充）
當元素的padding（填充）內邊距被清除時，所釋放的區域將會受到元素背景顏色的填充
單獨使用padding屬性可以改變上下左右的填充
padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px
CSS基礎（三）