1. 程式人生 > >CSS基礎(三)

CSS基礎(三)

inset gin 虛線 讓我 一起 gif white 左右 left

一、CSS盒子模型(Box Model) 所有HTML元素可以看做盒子,在CSS中“box model”這一術語是用來設計和布局使用。 CSS盒模型本質上是一個盒子,封裝周圍的HTML元素,它包括:邊距、邊框、填充和實際內容。 盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素 盒子模型: 技術分享圖片 說明: - 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
: 5px solid gray; margin: 0; }
最終元素的總寬度計算公式是這樣的: 總元素的寬度=寬度+左填充+右填充+左邊框+右邊框+左邊距+右邊距 元素的總高度最終計算公式是這樣的: 總元素的高度=高度+頂部填充+底部填充+上邊框+下邊框+上邊距+下邊距 二、CSS邊框 css邊框屬性允許我們指定一個元素邊框的樣式和顏色 技術分享圖片 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基礎(三)