CSS Review

發表於 更新於 分類於 Disqus：
文章字數： 12k 所需閱讀時間 ≈ 11 分鐘

CSS Box model

Box model 規範 HTML 每個元素(element)的基本設計規範
Box model 包含 content, padding, border and margin

  • content : 放文字或圖像的地方
  • border : 為 element 的邊框
  • padding : content 與 border 間的區域
  • margin : element 與鄰近 element 的距離

CSS sprite

將多個小圖合併成一張大圖,以節省圖檔load的時間

CSS preprocessor(預處理器)

  • CSS preprocessor 可以使用自訂的語法,經過 compile 產生 CSS
  • CSS preprocessor 可提供一些 CSS 未支援的功能,如 變數, 巢狀 selector,使得CSS可讀性較高,也較易維護
  • 常見的 CSS preprocessor 有 Sass/SCSS, Less

CSS specificity(權重)

  • 權重就是指 css 的優先權,相同權重為後令押前令,以最後設定為其設定值
  • 權重大小 inline style > ID > Class > Element > *
  • !important 可蓋過所有的權重
  • 另外還有 psuedo-class(偽類) => :nth-child(),:link, :hover, :focus 及 attribute（屬性選擇器）= [type:checkbox],,[attr] 都相當於 class

Pseudo-classes(偽類) and pseudo-elements(偽元素)

  • 偽類是應用於一個元素處於特定的狀態,如 :link,:hover
  • 偽元素的作用就像您在標記中添加了一個全新的 HTML 元素, 如 ::before , ::after

什麼是 !important

!important 擁有 CSS 最高的權重,可壓過 CSS 前面所有的設定

visibility: hidden 和 display: none 的差別

  • visibility: hidden 隱藏 element 佔有空間
  • display: none 隱藏 element 不佔空間

position 屬性

  • static 為 default position 值, top, right, bottom, left 和 z-index 皆無作用
  • relative 可相對自己原本的位置調整位置,不會影原本對應的位置
  • absolute 會被從原本頁面layout移除,不會占用特定的位置,參考位置是最接近自己但position 不是 static(default position 值) 的父層
  • fixed 與 absolute 相似,但參考位置 Viewport(用戶網頁的可視區域)
  • sticky : 是 relative 和 fixed 的混和屬性,會排在一搬排列的位置,但移動到設定位置就不會再移動
    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
    <!DOCTYPE html>
    <html lang="en">

    <head>
    	<meta charset="UTF-8">
    	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    	<title>Document</title>
    	<style>
    		/* css */
    		.container {
    			overflow: scroll;
    			margin: 50px;
    			width: 200px;
    			height: 300px;
    			border: 1px solid black
    		}

    		.box {
    			padding: 10px;
    			margin: 0 auto;
    			text-align: center;
    			width: 80%;
    			height: 100px;
    		}

    		.red {
    			background-color: red;
    		}

    		.blue {
    			background-color: blue;
    			height: 300px;
    		}

    		.green {
    			background-color: green;
    			position: sticky;
    			top: 20px ;
    			left: 0;
    		}
    	</style>
    </head>

    <body>
    	<div class="container">
    		<div class="box red">red</div>
    		<div class="box green">green</div>
    		<div class="box blue">blue</div>
    	</div>
    </body>
    </html>
red
green
blue

box-sizing:border-box 的作用

  • 告訴 browser width,height 包含 padding 及 border
  • 設定 border-box 使得在調整畫面時,較不易產生跑版

inline, inline-block 和 block 的差異

  • block 會列在新的一行,並占有整行的空間
  • inline 不會列在新的一行,與前一元素列在同一行
    • height,width 不可調
    • margin 左右可調,上下不可調,
    • padding 左右可調,上下可調但不影響隔壁元件(會影響 background)
  • inline-block 與 inline 相似但可以設定 height, width, margin 和 padding 皆可調
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
86
87
88
89
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		.debug {
			border: 1px solid black;
			width: 600px;
		}
		.wrap {
			border: 1px solid black;
			margin: 10px;
			font-size: 24px;
    	padding: 0;
    	line-height: normal;
		}
	
		/* display: block;
			div deafult is  "display: block;"
			height,width  可調
			margin,padding 可調 */
		.box1 {
			border: 1px solid black;
			display: block;
			background: yellow;
			width: 120px;
			height: 100px;
			margin: 5px 5px;
			padding: 5px 5px;
			line-height: normal;
		}
	
		/* display: inline;
			height,width  不可調
			margin 左右可調,上下不可調
			padding 左右可調,上下可調但不影響隔壁元件(會影響 background) */
		.box2 {
			border: 1px solid black;
			display: inline;
			background: yellow;
			width: 120px;
			height: 100px;
			margin: 5px 5px;
			padding: 5px 5px;
			line-height: normal;
		}
	
		/* inline-block
			height 可調
			width  可調
			margin 可調
			padding 可調 */
		.box3 {
			border: 1px solid black;
			display: inline-block;
			background: yellow;
			width: 120px;
			height: 120px;
			margin: 5px 5px;
			padding: 5px 5px;
			line-height: normal;
		}
	</style>
</head>

<body>
	<div class="debug">
		<div class="wrap">
			<div class="box1">111 block</div>
			<div class="box1">222 block</div>
			<div class="box1">333 block</div>
		</div>
		<div class="wrap">
			<div class="box2">111 inline</div>
			<div class="box2">222 inline</div>
			<div class="box2">333 inline</div>
		</div>
		<div class="wrap">
			<div class="box3">111 inline-block</div>
			<div class="box3">222 inline-block</div>
			<div class="box3">333 inline-block</div>
		</div>
	</div>
</body>
</html>
111 block
222 block
333 block
111 inline
222 inline
333 inline
111 inline-block
222 inline-block
333 inline-block

Flexbox 與 Grid 的差異

  • Flexbox 是一維的 layout設計, 可選擇水平或垂直排列
  • Grid 是二維的 layout設計,有如填表格
  • 這兩種方式相對於一搬的設計都可減少CSS的數量
  • 這兩種設計可混合使用

現代置中的方法

transform/translate

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
<style>
	.container1 {
		position: relative;

		border: 1px solid black;
		background: white;
		width: 600px;
		height: 400px
	}

	.child1 {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);

		border: 1px solid black;
		width: 50px;
		height:50px;
	}
</style>

<div class="container1">
	<div class="child1">
	</div>
</div>

flexbox

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<style>
	.container2 {
		display: flex;
		justify-content: center;
		align-items: center;

		border: 1px solid black;
		background: white;
		width: 600px;
		height: 400px
	}

	.child2 {
		border: 1px solid black;
		width: 50px;
		height:50px;
	}
</style>

<div class="container2">
	<div class="child2">
	</div>
</div>

grid

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<style>
	.container3 {
  display: grid;
  place-items: center;

		border: 1px solid black;
		background: white;
		width: 600px;
		height: 400px
	}

	.child3 {
		border: 1px solid black;
		width: 50px;
		height:50px;
	}
</style>

<div class="container3">
	<div class="child3">
	</div>
</div>

CSS 水平置中

text-align: center

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<style>
.box{
  width: 500px;
  height: 100px;
  border: 1px solid #f00;
  margin: auto;
	
	text-align: center;
}
</style>

<div class="box">
	葡萄美酒夜光杯
</div>

margin: 0 auto

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<style>
.box{
  width: 500px;
  height: 100px;
  border: 1px solid #f00;
  margin: auto;
	
	/* text-align: center; */
}
.content {
	text-align: center;
	margin: 0 auto;
	width: 50%;
	background: #ccc;
}
</style>

<div class="box">
	<div class="content">
		葡萄美酒夜光杯
	</div>
</div>

relative + translateX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<style>
.box{
  width: 500px;
  height: 100px;
  border: 1px solid #f00;
  margin: auto;
}
.content {
	text-align: center;
	width: 50%;
	background: #ccc;
	
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
</style>

<div class="box">
	<div class="content">
		葡萄美酒夜光杯
	</div>
</div>

absolute + translateX

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
<style>
.box{
  width: 500px;
  height: 100px;
  border: 1px solid #f00;
  margin: auto;

	position: relative;
}
.content {
	text-align: center;
	width: 50%;
	background: #ccc;
	
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
</style>

<div class="box">
	<div class="content">
		葡萄美酒夜光杯
	</div>
</div>

CSS 垂直置中

line-height 單行文字置中

1
2
3
4
5
6
7
8
9
10
11
12
<style>
.content{
		width: 400px;
		background: #ccc;
		line-height:100px;
		margin: auto;
}
</style>

<div class="content">
	Lorem ipsam.
</div>

Line-height + inline-block 多行文字置中

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
<style>
	h2{
		text-align: center;
	}
	.box{
		width: 500px;
		border: 1px solid #f00;
		margin: 0 auto;
		text-align: center;

		line-height: 200px;
	}
	.content{
		display: inline-block;
		height: auto;
		line-height:1;
		width: 400px;
		background: #ccc;
		vertical-align: middle;
	}
</style>

<div class="box">
  <div class="content">
		<h2>涼 州 曲</h2>
		葡萄美酒夜光杯，欲飲琵琶馬上催。醉臥沙場君莫笑，古來征戰幾人回。
  </div>
</div>

僞元素::before + inline-block

藉由 僞元素::before,將外框撐開 

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
<style>
h2{
  text-align: center;
}
.box{
  width: 500px;
  border: 1px solid #f00;
  margin: auto;
  text-align: center;

  height: 200px;
}
.box::before{
  content:'';
  display: inline-block;
  height: 100%;
  width: 0;
  vertical-align: middle;
}
.box .content{
  width: 400px;
  background: #ccc;
  display: inline-block;
  vertical-align: middle;
}
</style>

<div class="box">
  <div class="content">
		<h2>涼 州 曲</h2>
		葡萄美酒夜光杯，欲飲琵琶馬上催。醉臥沙場君莫笑，古來征戰幾人回。
  </div>
</div>

absolute + translate

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
h2{
  text-align: center;
}
.box{
  width: 500px;
  border: 1px solid #f00;
  margin: auto;
  height: 200px;

  position: relative;
}
.box .content{
  width: 400px;
  background: #ccc;
  position: absolute;
  top:50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>

<div class="box">
  <div class="content">
		<h2>涼 州 曲</h2>
		葡萄美酒夜光杯，欲飲琵琶馬上催。醉臥沙場君莫笑，古來征戰幾人回。
  </div>
</div>

flex + align-items

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
<style>
h2{
  text-align: center;
}
.box{
  width: 500px;
  border: 1px solid #f00;
  margin: auto;
  height: 200px;

  display: flex;
  justify-content: center;
  align-items: center; 
}
.content{
  width: 400px;
  background: #ccc;
}

</style>

<div class="box">
  <div class="content">
		<h2>涼 州 曲</h2>
		葡萄美酒夜光杯，欲飲琵琶馬上催。醉臥沙場君莫笑，古來征戰幾人回。
  </div>
</div>

calc 對固定高度內容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<style>
.box{
  width: 500px;
  height: 200px;
  border: 1px solid #f00;
  margin: auto;
}
.content{
  width: 400px;
  background: #ccc;
  position: relative;
  top:calc((100% - 70px) / 2);
  margin:auto;
  height: 70px;
}
</style>

<div class="box">
  <div class="content">
		葡萄美酒夜光杯，欲飲琵琶馬上催。醉臥沙場君莫笑，古來征戰幾人回。
  </div>
</div>

relative + translateY

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<style>
.box{
  width: 500px;
  height: 250px;
  border: 1px solid #f00;
  margin: auto;
}
.content{
  width: 400px;
  background: #ccc;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  margin: auto;
}
</style>

<div class="box">
  <div class="content">
		葡萄美酒夜光杯，欲飲琵琶馬上催。醉臥沙場君莫笑，古來征戰幾人回。
  </div>
</div>