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像素的空間: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>
div { width: 220px; padding: 10px; border最終元素的總寬度計算公式是這樣的: 總元素的寬度=寬度+左填充+右填充+左邊框+右邊框+左邊距+右邊距 元素的總高度最終計算公式是這樣的: 總元素的高度=高度+頂部填充+底部填充+上邊框+下邊框+上邊距+下邊距 二、CSS邊框 css邊框屬性允許我們指定一個元素邊框的樣式和顏色 1. 邊框樣式 border-style屬性用來定義邊框的樣式: 5px solid gray; margin: 0; }
<!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基礎(三)