1
00:00:00,840 --> 00:00:06,440
因此，我們還沒有覆蓋並評估是定位單元的最重要的概念之一。

2
00:00:06,600 --> 00:00:10,290
那麼，我們如何佈局網頁或移動div來右上角。

3
00:00:10,410 --> 00:00:15,720
或者，我們如何使一個錨標記更寬或圖像之間添加間距。

4
00:00:15,780 --> 00:00:20,110
所有這一切是非常重要的，這一切都涉及到所謂的盒模型。

5
00:00:20,220 --> 00:00:31,190
因此盒模型是真的中心在HD您評估一切它是基本上每個元素周圍有一個長方形的盒子這個基本理念。

6
00:00:31,680 --> 00:00:39,620
所以我們可以看到這裡只是要去MDA的任何網頁，我有檢查人員開放的，我有放大鏡選擇。

7
00:00:40,010 --> 00:00:44,810
當我將鼠標懸停在每一個環節都可以看到，有它周圍的框。

8
00:00:44,910 --> 00:00:48,180
所以這個H2周圍有一個藍色的盒子。

9
00:00:48,180 --> 00:00:49,810
這其中有一個框。

10
00:00:50,130 --> 00:00:53,370
即使事情是不是特別四四方方。

11
00:00:53,490 --> 00:00:56,320
所以這個的圓角DIV ..

12
00:00:56,490 --> 00:00:58,080
它仍然有它周圍的框。

13
00:00:58,080 --> 00:00:59,310
幕後。

14
00:00:59,520 --> 00:01:09,130
所以在這裡做到這一點，這一次是真的不圓或不四四方方希望有這些圓潤的邊角，但它仍然是一個框。

15
00:01:09,240 --> 00:01:15,870
因此，這些箱子是幕後真正有用的，因為我們可以對他們的風格不同的屬性。

16
00:01:15,870 --> 00:01:19,350
因此有四個屬性或每盒子的四個不同部分。

17
00:01:19,350 --> 00:01:23,550
還有很多更多屬性但我們可以操縱箱的部件。

18
00:01:23,610 --> 00:01:29,790
因此，讓我們假設這個圖是也是從MDA，是一個段落。

19
00:01:29,790 --> 00:01:42,210
所以我有一個段落一些文字，我給它一個橙色或黃色邊框，這是用戶看到的一些文字和邊框，但在幕後有實際上一些其他的事情發生。

20
00:01:42,360 --> 00:01:47,920
所以，邊界有一種叫做填充文字之間。

21
00:01:48,000 --> 00:01:51,040
所以填充僅僅是在邊界的內部的空間。

22
00:01:51,190 --> 00:02:01,060
這樣的內容和邊界之間是填充，然後有也餘量是在另一側是在外面和其他任何的邊界之間。

23
00:02:01,170 --> 00:02:04,720
所以我們用保證金往往元素之間添加間距。

24
00:02:04,860 --> 00:02:11,340
因此，如果我們有兩個段落，我希望他們能夠進一步分開那麼我會用保證金和增加。

25
00:02:11,880 --> 00:02:18,700
所以，現在我們要做的深入了解一點點進入一些我們想要的，我們這樣做之前，使用的屬性實際上是語法。

26
00:02:18,720 --> 00:02:29,870
我只想告訴你兩件事你可以期待著讓最激動人心的第一個，但最重要的是，我們現在有使一些看起來像這樣的一種方式。

27
00:02:29,880 --> 00:02:39,330
到現在為止，我們實際上並沒有使這些盒子連接到具有分配了彼此的方式，但它們是空的裡面有沒有文字。

28
00:02:39,330 --> 00:02:50,830
所以我們要了解盒模型和應用，在這裡，使這個井字板，然後我們打算使這個投資組合網站一個虛構的攝影師。

29
00:02:51,450 --> 00:02:52,350
因此，這是很好的。

30
00:02:52,420 --> 00:03:00,690
它的圖像是響應所以它改變大小的變化的窗口大小和電網。

31
00:03:00,750 --> 00:03:04,270
所有這一切是基於關閉的你要在這裡學習的概念。

32
00:03:04,710 --> 00:03:07,020
所以我要繼續前進，在這裡開闢昇華。

33
00:03:07,560 --> 00:03:10,510
而我有我創建了一個非常簡單的文檔。

34
00:03:10,740 --> 00:03:12,600
所以它只是簡單的HTML。

35
00:03:12,660 --> 00:03:14,670
它有連接的樣式表。

36
00:03:14,700 --> 00:03:15,330
它是空的。

37
00:03:15,330 --> 00:03:18,930
除了一些看法，然後兩段。

38
00:03:18,930 --> 00:03:27,660
所以，如果我開這件事，你可以看到它是很基本很無聊，我們只是要使用此玩弄盒模型。

39
00:03:28,860 --> 00:03:43,370
所以我會去我的成功，我要選擇的段落，然後我只是要複製裡面的這些評論讓我可以寫一些代碼在他們之下只是為了直觀地告訴你，我在做什麼。

40
00:03:43,380 --> 00:03:45,740
因此，讓我們給這些邊界開始。

41
00:03:45,900 --> 00:03:57,630
所以這應該是檢討邊境，讓我們做紮實像素藍色保存刷新，你可以看到，我們得到了周圍的邊框內容的所有道路。

42
00:03:57,630 --> 00:04:02,360
而且你還會注意到的是，這裡的內容去所有的方式在屏幕上。

43
00:04:02,370 --> 00:04:09,620
我們的邊界不會停止在這裡那是因為當我們作出缺席一段它去所有的方式在屏幕上。

44
00:04:09,630 --> 00:04:23,260
所以，如果我想改變我可以使用width屬性，我要繼續前進，舉一個寬度文本的段落本身的寬度。

45
00:04:23,490 --> 00:04:25,390
讓我們做200像素啟動。

46
00:04:25,890 --> 00:04:29,190
如果我刷新你可以看到，現在我們已經改變了寬度。

47
00:04:29,190 --> 00:04:34,920
如果我檢查的內容是不是藍色的。

48
00:04:35,940 --> 00:04:37,840
然後，我們周圍有邊框。

49
00:04:38,310 --> 00:04:39,700
所以內容是藍色的。

50
00:04:40,110 --> 00:04:45,350
而這個圖就是在這裡這個盒子這個元素框。

51
00:04:45,630 --> 00:04:48,330
然後我們有一個邊界是直接繞過它。

52
00:04:48,330 --> 00:04:52,020
有邊框和內容之間沒有空格。

53
00:04:52,020 --> 00:04:56,920
與寬度的另一件事，也有一個高度。

54
00:04:57,060 --> 00:05:02,360
因此，讓我們做300像素的高度，看看我們剛剛添加了一堆的空間。

55
00:05:02,370 --> 00:05:06,620
我要擺脫這一點，但有我們可以使用就像使用一個高度。

56
00:05:06,930 --> 00:05:11,760
我們不必只使用像素，所以我們可以用百分比。

57
00:05:13,890 --> 00:05:15,780
而那些是真正有用的，所以讓我給你看。

58
00:05:15,810 --> 00:05:23,310
讓我們做50％，你可能想知道它是什麼50％。

59
00:05:23,310 --> 00:05:27,290
答案是，它的父元素的50％。

60
00:05:27,300 --> 00:05:35,240
因此，在這種情況下，它的體，該段是該段內去橫跨半個身體。

61
00:05:35,310 --> 00:05:37,390
在我們的情況下，主體是整個頁面。

62
00:05:37,410 --> 00:05:38,240
這是一路之隔。

63
00:05:38,250 --> 00:05:40,620
因此，我們結束了一半的頁面。

64
00:05:40,800 --> 00:05:54,890
如果我改變窗口大小也改變讓很多人利用這一點，將使用實際上這一形象電網要使用什麼是關於這個漂亮的。

65
00:05:55,280 --> 00:05:59,490
你可以看到，圖像改變其寬度，這是一個百分比。

66
00:06:00,040 --> 00:06:04,590
行，所以我要保持它像現在。

67
00:06:04,770 --> 00:06:11,600
然後，我們要談下屬性是填充和填充記住的是元素和邊框之間的空間。

68
00:06:11,750 --> 00:06:15,410
而現在我們沒有任何空間的邊界權之上。

69
00:06:15,840 --> 00:06:22,120
因此，有一個屬性調用填充和我們可以給它一個像素數，讓我們做10​​個像素啟動。

70
00:06:22,230 --> 00:06:25,130
保存文件刷新。

71
00:06:25,410 --> 00:06:28,700
現在我們有各方面的填充10個像素。

72
00:06:29,040 --> 00:06:49,760
所以，如果我現在檢查你會看到現在是一個的出台，所以我們有藍色的內容本身，然後我們周圍有綠色的是邊框和內容之間，所以我們可以明顯地增加這個這個綠色的內容，我們得到了很多在裡面更多的空間。

73
00:06:50,490 --> 00:06:52,890
但是，這是不設置填充的唯一途徑。

74
00:06:52,920 --> 00:06:57,250
此將其設置在所有四個側面為完全相同。

75
00:06:57,380 --> 00:07:01,760
但有時我們只希望在一側或兩側就像帶邊框填充。

76
00:07:01,800 --> 00:07:09,830
還有對於更長的版本它是一個上邊框10像素邊框底部的五個像素捷徑。

77
00:07:09,900 --> 00:07:20,270
與填充和同樣的事情就評論說出來，我們可以這樣做填充留下40像素和新鮮。

78
00:07:20,520 --> 00:07:22,090
而我們得到的填充就在這裡。

79
00:07:22,320 --> 00:07:24,250
而這對於填充是唯一的地方。

80
00:07:24,330 --> 00:07:30,830
我記得空間在這裡這個藍色是不是是她的實際內容，從這個是這裡的填充。

81
00:07:30,990 --> 00:07:33,610
所以不同的，即使它看起來像有在右邊的空間。

82
00:07:33,620 --> 00:07:35,930
它是從不同的地方來了。

83
00:07:37,170 --> 00:07:40,920
所以，另一件事，我們可以在這裡做是同裕發揮。

84
00:07:41,160 --> 00:07:43,780
因此，保證金是拼圖的最後一塊。

85
00:07:43,860 --> 00:07:45,900
它是在邊界的外側的空間。

86
00:07:45,900 --> 00:07:47,980
所以元件之間。

87
00:07:48,450 --> 00:08:01,280
因此，這將是有用的，因為我們可能要增加或在這裡或在這裡舉例的這個空間增加這個空間就在這裡的圖像之間使用馬里安集。

88
00:08:01,500 --> 00:08:10,240
因此，它實際上看起來就像填充，所以我們可以說利潤率，讓我們做一些像明顯100像素啟動和刷新。

89
00:08:10,410 --> 00:08:17,100
發生了什麼事是我們現在的空間100像素上的邊界之外的元素的所有邊。

90
00:08:18,240 --> 00:08:19,360
所以，有一個方面。

91
00:08:19,980 --> 00:08:28,710
你會看到，在該公司確定為橙色那麼藍Chrome是內容綠色是橙色填充是保證金。

92
00:08:28,800 --> 00:08:30,030
所以就像填充。

93
00:08:30,030 --> 00:08:38,890
有時候，我們只是想設置保證金一面的一部分，所以我們可以這樣做保證金頂部500像素。

94
00:08:38,900 --> 00:08:46,070
然後，當他們來到的這一個，現在並保存，我們只獲得左側頂部空間沒有什麼。

95
00:08:46,160 --> 00:08:48,180
而在這一個頂部，然後更多的空間。

96
00:08:48,170 --> 00:08:50,480
沒有在底部或左或右。

97
00:08:50,610 --> 00:08:52,710
所以這就是緣。

98
00:08:52,710 --> 00:08:59,510
所以有時候，我們將值添加到保證金的各個方面，但我們不希望有四種不同的線路做。

99
00:08:59,660 --> 00:09:06,500
所以，我們不希望他們，如果他們在這裡是完全一樣的，但我們不都不得不說邊距上邊距左邊距右邊距底部。

100
00:09:06,570 --> 00:09:09,550
因此，有另一種捷徑，就像邊境。

101
00:09:09,570 --> 00:09:14,780
或者，我們可以做一次，我們能夠做到這一點餘量，並給它四個值的東西。

102
00:09:14,820 --> 00:09:21,300
所以，第一個是對的頂部，然後右邊，然後底部。

103
00:09:21,750 --> 00:09:36,820
讓我們做500像素，然後將左，通過這樣做，我們得到這個漂亮的四邊保證金其中的值都不同，但我們只有在一行做。

104
00:09:37,290 --> 00:09:49,920
因此，只要在這裡檢查，看看是否我們得到的底部500像素的它在頂部的20，我們在左邊得到一百那麼我們有合適的我們的40。

105
00:09:50,010 --> 00:09:53,790
因此，有你會用保證金是保證金經常看到的最後一件事。

106
00:09:53,790 --> 00:09:54,480
汽車。

107
00:09:54,780 --> 00:09:59,340
那麼，我們能做的就是設置margin是左邊還是右邊的汽車。

108
00:09:59,370 --> 00:10:02,550
而實際上這是什麼會做的是中心對我們的元素。

109
00:10:02,550 --> 00:10:04,570
因此，讓我告訴你如何工作的。

110
00:10:04,710 --> 00:10:18,390
和註釋了這一點一而再，我們可以寫保證金，讓我們只說零邊距在左邊或右邊的零邊距和底部和經銷商的左側頂級汽車。

111
00:10:18,510 --> 00:10:23,520
如果我讓這個全尺寸並刷新你會看到它的東西中心對我們來說。

112
00:10:23,520 --> 00:10:37,880
那麼，這意味著它的決定，這是因為我們在這裡說，然後計算出左邊的是汽車，右邊是汽車的50％，以便只是它需要做的，實際上將居中對我們來說不亞於。

113
00:10:37,980 --> 00:10:41,540
然後我們對頂部和底部，以便它們蜷縮一起為零。

114
00:10:41,930 --> 00:10:48,200
我們還可以做有這樣做的一個更短的方式，它看起來像這樣利潤率為零奧托。

115
00:10:48,540 --> 00:10:53,470
所以這將設置在頂部和底部的左側和右側，以自動歸零。

116
00:10:53,580 --> 00:11:04,700
所以，沒有什麼變化，如果我要50像素添加到頂部和經銷商或我要添加50像素和20像素，我們也可以使用這個語法。

117
00:11:04,740 --> 00:11:09,830
有一件事要記住的是，你需要在x那裡，除非數量是零。

118
00:11:10,430 --> 00:11:18,760
因此，如果我為此它增加了20上的左和右頂部，然後將其添加50上的頂部和底部。

119
00:11:18,780 --> 00:11:21,070
因此，讓我們在這裡回顧一下只是一個更多的時間。

120
00:11:21,120 --> 00:11:25,370
我們有內部內容是就在這裡。

121
00:11:25,830 --> 00:11:33,440
我們有填充它的邊界之間，我們只有留下填充，然後我們有餘量為邊界之間的另一邊。

122
00:11:33,450 --> 00:11:35,530
所以基本上元素之間。