05-前端核心技術-CSS排版屬性

本文轉載自查看原文 2021-11-20 15:48 196 前端課件

第05章-前端核心技術-CSS排版屬性

學習目標

掌握無序列表的應用
掌握有序列表
熟悉嵌套列表的使用方法
了解自定義列表的標記
掌握表格樣式的使用
掌握CSS邊框、邊線、邊距等屬性 重點
掌握邊框的擴展運用 重點 難點
掌握內邊距和邊框的合並方法 重點 難點
掌握CSS盒子模型原理
掌握外邊距合並的方法 重點 難點

CSS 列表

CSS有序列表和無序列表屬性

屬性	描述
list-style	簡寫屬性。用於把所有用於列表的屬性設置於一個聲明中
list-style-image	將圖象設置為列表項標志。（url(‘sqpurple.gif’)）
list-style-position	設置列表中列表項標志的位置。（inside\| outside）
list-style-type	設置列表項標志的類型。如下表

列表屬性可以簡寫，按照如下順序

list-style-type
list-style-position
list-style-image

如果上述值丟失一個，其余仍在指定的順序，就沒關系。如：

1
2
3
ul { list-style: square inside url("sqpurple.gif"); }

案例01

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css"> ul{ list-style-type: none; } a{ text-decoration: none; } ul li{ line-height: 50px; width: 200px; letter-spacing: 5px; text-indent: 8px; font-size: 18px; color: blue; font-weight: bold; background-color: bisque; } ul li:hover{ background-color: darkcyan; color: white; } </style>
	</head>
	<body>
		<ul>
			<li><a href="">系統管理</a></li>
			<li><a href="">會員管理</a></li>
			<li><a href="">商品管理</a></li>
			<li><a href="">訂單管理</a></li>
		</ul>
	</body>
</html>

效果展示

list-style-type 屬性設置列表項標記的類型參考

值	描述
none	無標記。
disc	默認。標記是實心圓。
circle	標記是空心圓。
square	標記是實心方塊。
decimal	標記是數字。
decimal-leading-zero	0開頭的數字標記。(01, 02, 03, 等。)
lower-roman	小寫羅馬數字(i, ii, iii, iv, v, 等。)
upper-roman	大寫羅馬數字(I, II, III, IV, V, 等。)
lower-alpha	小寫英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
upper-alpha	大寫英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
lower-greek	小寫希臘字母(alpha, beta, gamma, 等。)
lower-latin	小寫拉丁字母(a, b, c, d, e, 等。)
upper-latin	大寫拉丁字母(A, B, C, D, E, 等。)
hebrew	傳統的希伯來編號方式
armenian	傳統的亞美尼亞編號方式
georgian	傳統的喬治亞編號方式(an, ban, gan, 等。)
cjk-ideographic	簡單的表意數字
hiragana	標記是：a, i, u, e, o, ka, ki, 等。（日文片假名）
katakana	標記是：A, I, U, E, O, KA, KI, 等。（日文片假名）
hiragana-iroha	標記是：i, ro, ha, ni, ho, he, to, 等。（日文片假名）
katakana-iroha	標記是：I, RO, HA, NI, HO, HE, TO, 等。（日文片假名）

CSS 隱藏

顯示控制常用的屬性有display、visibility、opacity

隱藏元素

屬性	顯示	隱藏	特征
display	除了none之外的其他值	none	隱藏的元素不會占用任何空間，消失
visibility	visible	hidden	隱藏的元素仍需占用與未隱藏之前一樣的空間，僅不可見
opacity	1	0	隱藏的元素只是變透明，僅不可見

下拉菜單

前面我們知道超鏈接a標簽具有hover和active狀態屬性，其實這兩個屬性並不是超鏈接a標簽專屬，任何一個標簽都具有這兩個屬性，因此，可以利用這兩個屬性來制作下拉菜單。

案例02

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css"> ul{ list-style-type: none; padding: 0;/*清除內邊距*/ } li{ width: 200px; } a{ text-decoration: none; } #menu1 li a{ display: block; line-height: 50px; width: 200px; letter-spacing: 5px; text-indent: 8px; font-size: 18px; color: blue; font-weight: bold; background-color: bisque; } #menu1 li a:hover{ background-color: darkcyan; color: white; } #menu1 li:hover #menu2{ display: block; } 		<span class="hljs-id">#menu2</span> <span class="hljs-rules">{
			<span class="hljs-rule"><span class="hljs-attribute">display</span>:<span class="hljs-value"> none</span></span>;
		<span class="hljs-rule">}</span></span>
		<span class="hljs-id">#menu2</span> <span class="hljs-tag">li</span> <span class="hljs-tag">a</span><span class="hljs-rules">{
			<span class="hljs-rule"><span class="hljs-attribute">display</span>:<span class="hljs-value"> block</span></span>;
			<span class="hljs-rule"><span class="hljs-attribute">height</span>:<span class="hljs-value"> <span class="hljs-number">50px</span></span></span>;
			<span class="hljs-rule"><span class="hljs-attribute">line-height</span>:<span class="hljs-value"> <span class="hljs-number">50px</span></span></span>;
			<span class="hljs-rule"><span class="hljs-attribute">width</span>:<span class="hljs-value"> <span class="hljs-number">200px</span></span></span>;
			<span class="hljs-rule"><span class="hljs-attribute">letter-spacing</span>:<span class="hljs-value"> <span class="hljs-number">5px</span></span></span>;
			<span class="hljs-rule"><span class="hljs-attribute">text-indent</span>:<span class="hljs-value"> <span class="hljs-number">8px</span></span></span>;
			<span class="hljs-rule"><span class="hljs-attribute">font-size</span>:<span class="hljs-value"> <span class="hljs-number">18px</span></span></span>;
			<span class="hljs-rule"><span class="hljs-attribute">color</span>:<span class="hljs-value"> blueviolet</span></span>;
			<span class="hljs-rule"><span class="hljs-attribute">font-weight</span>:<span class="hljs-value"> bold</span></span>;
			<span class="hljs-rule"><span class="hljs-attribute">background-color</span>:<span class="hljs-value"> darkgrey</span></span>;
		<span class="hljs-rule">}</span></span>
		<span class="hljs-id">#menu2</span> <span class="hljs-tag">li</span> <span class="hljs-tag">a</span><span class="hljs-pseudo">:hover</span><span class="hljs-rules">{
			<span class="hljs-rule"><span class="hljs-attribute">background-color</span>:<span class="hljs-value"> crimson</span></span>;
			<span class="hljs-rule"><span class="hljs-attribute">color</span>:<span class="hljs-value"> white</span></span>;
		<span class="hljs-rule">}</span></span>
	</span><span class="hljs-tag">&lt;/<span class="hljs-title">style</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">head</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">body</span>&gt;</span>
	<span class="hljs-tag">&lt;<span class="hljs-title">ul</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"menu1"</span>&gt;</span>
		<span class="hljs-tag">&lt;<span class="hljs-title">li</span>&gt;</span>
			<span class="hljs-tag">&lt;<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">""</span>&gt;</span>系統管理<span class="hljs-tag">&lt;/<span class="hljs-title">a</span>&gt;</span>
			<span class="hljs-tag">&lt;<span class="hljs-title">ul</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"menu2"</span>&gt;</span>
				<span class="hljs-tag">&lt;<span class="hljs-title">li</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">""</span>&gt;</span>系統參數<span class="hljs-tag">&lt;/<span class="hljs-title">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">li</span>&gt;</span>
				<span class="hljs-tag">&lt;<span class="hljs-title">li</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">""</span>&gt;</span>系統設置<span class="hljs-tag">&lt;/<span class="hljs-title">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">li</span>&gt;</span>
				<span class="hljs-tag">&lt;<span class="hljs-title">li</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">""</span>&gt;</span>系統版本<span class="hljs-tag">&lt;/<span class="hljs-title">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">li</span>&gt;</span>
				<span class="hljs-tag">&lt;<span class="hljs-title">li</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">""</span>&gt;</span>系統更新<span class="hljs-tag">&lt;/<span class="hljs-title">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">li</span>&gt;</span>
			<span class="hljs-tag">&lt;/<span class="hljs-title">ul</span>&gt;</span>
		<span class="hljs-tag">&lt;/<span class="hljs-title">li</span>&gt;</span>
		<span class="hljs-tag">&lt;<span class="hljs-title">li</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">""</span>&gt;</span>會員管理<span class="hljs-tag">&lt;/<span class="hljs-title">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">li</span>&gt;</span>
		<span class="hljs-tag">&lt;<span class="hljs-title">li</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">""</span>&gt;</span>商品管理<span class="hljs-tag">&lt;/<span class="hljs-title">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">li</span>&gt;</span>
		<span class="hljs-tag">&lt;<span class="hljs-title">li</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">""</span>&gt;</span>訂單管理<span class="hljs-tag">&lt;/<span class="hljs-title">a</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-title">li</span>&gt;</span>
	<span class="hljs-tag">&lt;/<span class="hljs-title">ul</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">body</span>&gt;</span>
 </html>

效果圖

CSS 顯示屬性

display主要用的CSS樣式有以下三個：

屬性	描述
display:block	顯示為塊級元素
display:inline	顯示為內聯元素
display:inline-block	顯示為內聯塊元素，表現為同行顯示並可修改寬高內外邊距等屬性

常將<li>元素加上display:inline-block樣式，原本垂直的列表就可以水平顯示了。

塊級元素(block)特性：

總是獨占一行，表現為另起一行開始，而且其后的元素也必須另起一行顯示;
寬度(width)、高度(height)、內邊距(padding)和外邊距(margin)都可控制;

內聯元素(inline)特性：

和相鄰的內聯元素在同一行;
寬度(width)、高度(height)、內邊距的top/bottom(padding-top/padding-bottom)和外邊距的top/bottom(margin-top/margin-bottom)都不可改變，就是里面文字或圖片的大小;

1
2
3
4
/* display: inline-block; */
/* 1.同行顯示，並且可以設置寬高 */
/* 2.默認會產生間距，去間距：上級【font-size: 0px;】，所有下級【font-size: XXpx;】* /* 3.文字基准線導致錯開，解決方案：所有下級【vertical-align: top;】 */

案例03

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css"> ul{ list-style-type: none; } a{ text-decoration: none; } ul li{ display: inline-block; line-height: 50px; width: 200px; letter-spacing: 5px; text-indent: 8px; font-size: 18px; color: blue; font-weight: bold; background-color: bisque; } ul li:hover{ background-color: darkcyan; color: white; } </style>
	</head>
	<body>
		<ul>
			<li><a href="">系統管理</a></li>
			<li><a href="">會員管理</a></li>
			<li><a href="">商品管理</a></li>
			<li><a href="">訂單管理</a></li>
		</ul>
	</body>
</html>

效果圖

CSS 表格

caption-side屬性。

注意：IE8只有指定!DOCTYPE才支持caption-side屬性。

值	描述
top	默認值。把表格標題定位在表格之上。
bottom	把表格標題定位在表格之下。

表格邊框屬性

值	描述
border	表格邊框：border: 1px solid black;

指定CSS表格邊框，使用border屬性。

下面的例子指定了一個表格的th和td元素的黑色邊框：

1
2
3
table, th, td{ border: 1px solid black; }

但是表格有雙邊框。這是因為表和th/ td元素有獨立的邊界。

為了顯示一個表的單個邊框，使用 border-collapse屬性。

border-collapse屬性折疊邊框

值	描述
border-collapse	表格邊框合並：border-collapse: collapse;

border-collapse 屬性設置表格的邊框是否被折疊成一個單一的邊框或隔開：

1
2
3
4
5
6
7
table { /*合並表格與單元格之間的間距*/ border-collapse: collapse; }
table,th,td { border: 1px solid black; }

案例04

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css"> #table1, th, td { border: 1px solid black; } #table2, #table2 th, #table2 td { border-collapse:collapse; border: 1px solid black; width:50%; height:30px; text-align:right; vertical-align:bottom; padding:15px; background-color:green; color:white; } </style>
	</head>
	<body>
		<table id="table1">
			<caption>表格一</caption>
			<tr>
				<th>表頭</th>
				<th>表頭</th>
			</tr>
			<tr>
				<td>單元格</td>
				<td>單元格</td>
			</tr>
		</table>
		<table id="table2">
			<caption>表格二</caption>
			<tr>
				<th>表頭</th>
				<th>表頭</th>
			</tr>
			<tr>
				<td>單元格</td>
				<td>單元格</td>
			</tr>
		</table>
	</body>
</html>

效果圖

表格寬度和高度

值	描述
width	表格寬度：表格、單元格
height	表格高度：表格、行、單元格

下面的例子是設置100％的寬度，50像素的th元素的高度的表格：

1
2
3
4
5
6
table { width:100%; }
th{ height:50px; }

表格內文字對齊

值	描述
text-align	單元格內容水平對其：
vertical-align	單元格內容垂直對其：

表格中的文本對齊和垂直對齊屬性。

text-align屬性設置水平對齊方式，像左，右，或中心：

1
2
3
td{ text-align:right; }

vertical-align垂直對齊屬性設置垂直對齊，比如頂部，底部或中間：

1
2
3
4
td{ height:50px; vertical-align:bottom; }

表格隔行色

實現表格隔行色的方法有很多，如

值	描述
:nth-of-type(odd)	基數
:nth-of-type(even)	偶數
:nth-child (odd)	基數
:nth-child (even)	偶數
:nth-child (2n+1)	基數
:nth-child (2n)	偶數

如：

1
2
3
4
5
6
7
8
td:nth-of-type(odd){ background:#00ccff;}奇數行 
td:nth-of-type(even){ background:#ffcc00;}偶數行 
td:nth-child (odd){ background:#00ccff;}奇數行
 td:nth-child (even){ background:#ffcc00;}偶數行
td:nth-child (2n+1){ background:#00ccff;}奇數行
 td:nth-child (2n){ background:#ffcc00;}偶數行

案例05

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css"> table{ width: 80%; text-align: center; border-collapse: collapse; } th,td{ height: 35px; color: white; } tr:nth-of-type(odd){ background-color: #5F9EA0; } tr:nth-of-type(even){ background-color: darkolivegreen; } td:nth-child(3n+3){ background-color: #A52A2A; } </style>
	</head>
	<body>
		<table border="0" align="center">
			<tr>
				<th>編號</th>
				<th>姓名</th>
				<th>性別</th>
				<th>年齡</th>
				<th>身高</th>
				<th>體重</th>
				<th>簽名</th>
			</tr>
			<tr>
				<td>1</td>
				<td>劉亦菲</td>
				<td>女</td>
				<td>32</td>
				<td>168CM</td>
				<td>50kg</td>
				<td>那時覺得看哈數據庫的</td>
			</tr>
			<tr>
				<td>2</td>
				<td>劉亦菲</td>
				<td>女</td>
				<td>32</td>
				<td>168CM</td>
				<td>50kg</td>
				<td>那時覺得看哈數據庫的</td>
			</tr>
			<tr>
				<td>3</td>
				<td>劉亦菲</td>
				<td>女</td>
				<td>32</td>
				<td>168CM</td>
				<td>50kg</td>
				<td>那時覺得看哈數據庫的</td>
			</tr>
			<tr>
				<td>4</td>
				<td>劉亦菲</td>
				<td>女</td>
				<td>32</td>
				<td>168CM</td>
				<td>50kg</td>
				<td>那時覺得看哈數據庫的</td>
			</tr>
			<tr>
				<td>5</td>
				<td>劉亦菲</td>
				<td>女</td>
				<td>32</td>
				<td>168CM</td>
				<td>50kg</td>
				<td>那時覺得看哈數據庫的</td>
			</tr>
		</table>
	</body>
</html>

效果圖

CSS 盒子模型

所有HTML元素可以看作盒子，在CSS中，“box model”這一術語是用來設計和布局時使用。

CSS盒模型本質上是一個盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充，和實際內容。

下面的圖片說明了盒子模型(Box Model)：

不同部分的說明：

outline(輪廓) - 是繪制於元素周圍的一條線，位於邊框邊緣的外圍，可起到突出元素的作用
margin(外邊距) - 清除邊框外的區域，外邊距是透明的。
border(邊框) - 圍繞在內邊距和內容外的邊框。
padding(內邊距) - 清除內容周圍的區域，內邊距是透明的。
content(內容) - 盒子的內容，顯示文本和圖像。

padding(填充)

padding（填充）屬性定義元素邊框與元素內容之間的空間

屬性	說明
padding	使用縮寫屬性設置在一個聲明中的所有填充屬性
padding-bottom	設置元素的底部填充
padding-left	設置元素的左部填充
padding-right	設置元素的右部填充
padding-top	設置元素的頂部填充

填充- 單邊內邊距屬性

在CSS中，它可以指定不同的側面不同的填充：

1
2
3
4
padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;

填充 - 簡寫屬性

padding:25px;

所有的填充都是25px

1
2
css
padding:25px 50px;

上下填充為25px
左右填充為50px

padding:25px 50px 75px;

上填充為25px
左右填充為50px
下填充為75px

 padding:25px 50px 75px 100px;

上填充為25px
右填充為50px
下填充為75px
左填充為100px

案例06

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css"> .content{ padding: 80px 10% 100px; background-color: rgba(0,0,0,0.1); } </style>
	</head>
	<body>
		<div class="content">
			<h1>歡迎您</h1>
			<p>這是一個神奇的網站</p>
		</div>
	</body>
</html>

效果展示

border(邊框)

CSS 邊框屬性

屬性	描述
border	簡寫屬性，用於把針對四個邊的屬性設置在一個聲明。
border-style	用於設置元素所有邊框的樣式，或者單獨地為各邊設置邊框樣式。
border-width	簡寫屬性，用於為元素的所有邊框設置寬度，或者單獨地為各邊邊框設置寬度。
border-color	簡寫屬性，設置元素的所有邊框中可見部分的顏色，或為 4 個邊分別設置顏色。
border-bottom	簡寫屬性，用於把下邊框的所有屬性設置到一個聲明中。
border-bottom-color	設置元素的下邊框的顏色。
border-bottom-style	設置元素的下邊框的樣式。
border-bottom-width	設置元素的下邊框的寬度。
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	設置元素的上邊框的寬度。

border-style屬性值

值	描述
none	默認。無輪廓。
dotted	點狀的輪廓。
dashed	虛線輪廓。
solid	實線輪廓。
double	雙線輪廓。雙線的寬度等同於 outline-width 的值。
groove	3D 凹槽輪廓。此效果取決於 outline-color 值。
ridge	3D 凸槽輪廓。此效果取決於 outline-color 值。
inset	3D 凹邊輪廓。此效果取決於 outline-color 值。
outset	3D 凸邊輪廓。此效果取決於 outline-color 值。
inherit	規定應該從父元素繼承輪廓樣式的設置。

類型和輪廓是一樣的

border-radius 屬性

語法

border-radius: 左上角 右上角 右下角 左下角;

注意: 每個半徑的四個值的順序是：左上角，右上角，右下角，左下角。如果省略左下角，右上角是相同的。如果省略右下角，左上角是相同的。如果省略右上角，左上角是相同的。

值	描述
length	定義彎道的形狀。
%	使用%定義角落的形狀。

box-sizing屬性

語法：

box-sizing: content-box|border-box|inherit:

值	說明
content-box	指定元素的寬度和高度不包含元素的`padding`和`border`
border-box	指定元素的寬度和高度包含元素的`padding`和`border`

案例07

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>邊框</title>
		<style> .none { border-style: none; } .dotted { border-style: dotted; } .dashed { border-style: dashed; } .solid { border-style: solid; } .double { border-style: double; } .groove { border-style: groove; } .ridge { border-style: ridge; } .inset { border-style: inset; } .outset { border-style: outset; } .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>

效果展示

outline(輪廓)

輪廓（outline）是繪制於元素周圍的一條線，位於邊框邊緣的外圍，可起到突出元素的作用。

CSS outline 屬性規定元素輪廓的樣式、顏色和寬度。

屬性	說明
outline	在一個聲明中設置所有的輪廓屬性
outline-color	設置輪廓的顏色
outline-style	設置輪廓的樣式
outline-width	設置輪廓的寬度

outline-style屬性值

值	描述
none	默認。無輪廓。
dotted	點狀的輪廓。
dashed	虛線輪廓。
solid	實線輪廓。
double	雙線輪廓。雙線的寬度等同於 outline-width 的值。
groove	3D 凹槽輪廓。此效果取決於 outline-color 值。
ridge	3D 凸槽輪廓。此效果取決於 outline-color 值。
inset	3D 凹邊輪廓。此效果取決於 outline-color 值。
outset	3D 凸邊輪廓。此效果取決於 outline-color 值。
inherit	規定應該從父元素繼承輪廓樣式的設置。

案例08

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html>
<span class="hljs-tag">&lt;<span class="hljs-title">head</span>&gt;</span>
	<span class="hljs-tag">&lt;<span class="hljs-title">meta</span> <span class="hljs-attribute">charset</span>=<span class="hljs-value">"utf-8"</span>&gt;</span>
	<span class="hljs-tag">&lt;<span class="hljs-title">title</span>&gt;</span>邊框<span class="hljs-tag">&lt;/<span class="hljs-title">title</span>&gt;</span>
	<span class="hljs-tag">&lt;<span class="hljs-title">style</span>&gt;</span><span class="css">
		<span class="hljs-tag">p</span> <span class="hljs-rules">{
			<span class="hljs-rule"><span class="hljs-attribute">border</span>:<span class="hljs-value"> <span class="hljs-number">1px</span> solid red</span></span>;
		<span class="hljs-rule">}</span></span>
		<span class="hljs-class">.dotted</span> <span class="hljs-rules">{
			<span class="hljs-rule"><span class="hljs-attribute">outline-style</span>:<span class="hljs-value"> dotted</span></span>;
		<span class="hljs-rule">}</span></span>
		<span class="hljs-class">.dashed</span> <span class="hljs-rules">{
			<span class="hljs-rule"><span class="hljs-attribute">outline-style</span>:<span class="hljs-value"> dashed</span></span>;
		<span class="hljs-rule">}</span></span>
		<span class="hljs-class">.solid</span> <span class="hljs-rules">{
			<span class="hljs-rule"><span class="hljs-attribute">outline-style</span>:<span class="hljs-value"> solid</span></span>;
		<span class="hljs-rule">}</span></span>
		<span class="hljs-class">.double</span> <span class="hljs-rules">{
			<span class="hljs-rule"><span class="hljs-attribute">outline-style</span>:<span class="hljs-value"> double</span></span>;
		<span class="hljs-rule">}</span></span>
		<span class="hljs-class">.groove</span> <span class="hljs-rules">{
			<span class="hljs-rule"><span class="hljs-attribute">outline-style</span>:<span class="hljs-value"> groove</span></span>;
		<span class="hljs-rule">}</span></span>
		<span class="hljs-class">.ridge</span> <span class="hljs-rules">{
			<span class="hljs-rule"><span class="hljs-attribute">outline-style</span>:<span class="hljs-value"> ridge</span></span>;
		<span class="hljs-rule">}</span></span>
		<span class="hljs-class">.inset</span> <span class="hljs-rules">{
			<span class="hljs-rule"><span class="hljs-attribute">outline-style</span>:<span class="hljs-value"> inset</span></span>;
		<span class="hljs-rule">}</span></span>
		<span class="hljs-class">.outset</span> <span class="hljs-rules">{
			<span class="hljs-rule"><span class="hljs-attribute">outline-style</span>:<span class="hljs-value"> outset</span></span>;
		<span class="hljs-rule">}</span></span>
	</span><span class="hljs-tag">&lt;/<span class="hljs-title">style</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">head</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">body</span>&gt;</span>
	<span class="hljs-tag">&lt;<span class="hljs-title">p</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"dotted"</span>&gt;</span>點線輪廓<span class="hljs-tag">&lt;/<span class="hljs-title">p</span>&gt;</span>
	<span class="hljs-tag">&lt;<span class="hljs-title">p</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"dashed"</span>&gt;</span>虛線輪廓<span class="hljs-tag">&lt;/<span class="hljs-title">p</span>&gt;</span>
	<span class="hljs-tag">&lt;<span class="hljs-title">p</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"solid"</span>&gt;</span>實線輪廓<span class="hljs-tag">&lt;/<span class="hljs-title">p</span>&gt;</span>
	<span class="hljs-tag">&lt;<span class="hljs-title">p</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"double"</span>&gt;</span>雙線輪廓<span class="hljs-tag">&lt;/<span class="hljs-title">p</span>&gt;</span>
	<span class="hljs-tag">&lt;<span class="hljs-title">p</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"groove"</span>&gt;</span>凹槽輪廓<span class="hljs-tag">&lt;/<span class="hljs-title">p</span>&gt;</span>
	<span class="hljs-tag">&lt;<span class="hljs-title">p</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"ridge"</span>&gt;</span>壟狀輪廓<span class="hljs-tag">&lt;/<span class="hljs-title">p</span>&gt;</span>
	<span class="hljs-tag">&lt;<span class="hljs-title">p</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"inset"</span>&gt;</span>嵌入輪廓<span class="hljs-tag">&lt;/<span class="hljs-title">p</span>&gt;</span>
	<span class="hljs-tag">&lt;<span class="hljs-title">p</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"outset"</span>&gt;</span>外凸輪廓<span class="hljs-tag">&lt;/<span class="hljs-title">p</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">body</span>&gt;</span>

</html>

效果圖

margin(外邊距)

margin(外邊距)屬性定義元素周圍的空間。

屬性	描述
margin	簡寫屬性。在一個聲明中設置所有外邊距屬性。
margin-bottom	設置元素的下外邊距。
margin-left	設置元素的左外邊距。
margin-right	設置元素的右外邊距。
margin-top	設置元素的上外邊距。

margin清除周圍的元素（外邊框）的區域。margin沒有背景顏色，是完全透明的

margin可以單獨改變元素的上，下，左，右邊距。也可以一次改變所有的屬性。

值	說明
auto	設置瀏覽器邊距。這樣做的結果會依賴於瀏覽器
length	定義一個固定的margin（使用像素，pt，em等）
%	定義一個使用百分比的邊距

Margin - 單邊外邊距屬性

1
2
3
4
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;

Margin - 簡寫屬性

為了縮短代碼，有可能使用一個屬性中margin指定的所有邊距屬性。這就是所謂的縮寫屬性。

margin:25px;

所有的4個邊距都是25px

margin:25px 50px;

上下邊距為25px
左右邊距為50px

margin:25px 50px 75px;

上邊距為25px
左右邊距為50px
下邊距為75px

margin:25px 50px 75px 100px;

上邊距為25px
右邊距為50px
下邊距為75px
左邊距為100px

外邊距合並

當子元素的頂部和父元素的頂部僅僅貼在一起（既：中間沒有相隔的內容）時，子元素的頂部外邊距會和父元素的外邊距合並，最終變成父元素的外邊距。
解決方法一：在父元素和子元素之間插入一個br標簽
解決方法二：給父元素加padding:0.1px;
解決方法三：把子元素的margin-top用padding-top來代替
同級的相鄰兄弟元素，上一個兄弟元素的底部外邊距和下一個元素的頂部外邊距會合並，最終兩元素之間的外邊距不是相加，而是變成兩個元素中外邊距的最大值

案例09

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>CSS 盒子模型</title>
	</head>
	<style type="text/css"> #box{ text-align: center; background-color: gray; color: wheat; margin: 30px; outline: 30px solid #FF0000; border: 30px solid #8A2BE2; padding: 30px; width: 80px; height: 80px; font-size: 30px; } #content{ border: 1px solid black; } </style>
	<body>
		<div id="box">
			<div id="content">
				盒子模型
			</div>
		</div>
	</body>
</html>

效果圖

CSS3 box-shadow陰影

語法

box-shadow: h-shadow v-shadow blur spread color inset;

注意：box-shadow 屬性把一個或多個下拉陰影添加到框上。該屬性是一個用逗號分隔陰影的列表，每個陰影由 2-4 個長度值、一個可選的顏色值和一個可選的 inset 關鍵字來規定。省略長度的值是 0。

值	說明
h-shadow	必需的。水平陰影的位置。允許負值
v-shadow	必需的。垂直陰影的位置。允許負值
blur	可選。模糊距離
spread	可選。陰影的大小
color	可選。陰影的顏色。
inset	可選。從外層的陰影（開始時）改變陰影內側陰影

案例11

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
	<head>
		<style> body { margin: 30px; background-color: #E9E9E9; } .polaroid { width: 394px; padding: 10px 10px 20px 10px; border: 1px solid #BFBFBF; background-color: white; /* Add box-shadow */ box-shadow: 2px 2px 3px #aaaaaa; } </style>
	</head>
	<body>
		<div class="polaroid">
			<p class="caption">上海鮮花港的郁金香，花名：Ballade Dream。</p>
		</div>
	</body>
</html>