1
00:00:00,840 --> 00:00:06,440
Tak więc jednym z najważniejszych koncepcji, że do tej pory nie pokrywa i ocenia się usytuowanie elementów.

2
00:00:06,600 --> 00:00:10,290
Więc jak możemy rozłożyć stronę lub przenieść div w prawym górnym rogu.

3
00:00:10,410 --> 00:00:15,720
Albo w jaki sposób dokonać tag kotwicy szerszy lub dodać odstępy między kolejnymi zdjęciami.

4
00:00:15,780 --> 00:00:20,110
Wszystko to jest bardzo ważne, i to wszystko jest związane z czymś o nazwie model box.

5
00:00:20,220 --> 00:00:31,190
Tak więc model box jest to podstawowa idea, że ​​naprawdę w centrum wszystkiego w HD ocenić co jest, że w zasadzie każdy element ma prostokątną ramkę wokół niego.

6
00:00:31,680 --> 00:00:39,620
Widzimy więc tutaj tylko pójść do dowolnej strony internetowej na MDA i mam inspektor otwarta i mam zaznaczone lupy.

7
00:00:40,010 --> 00:00:44,810
I jak unoszą się nad każdym elemencie widać, że istnieje pole wokół niego.

8
00:00:44,910 --> 00:00:48,180
Więc to H2 ma niebieską ramkę wokół niego.

9
00:00:48,180 --> 00:00:49,810
Ten ma pudełko.

10
00:00:50,130 --> 00:00:53,370
Nawet rzeczy, które nie są szczególnie boxy.

11
00:00:53,490 --> 00:00:56,320
Więc ten zaokrąglony narożnik dz ..

12
00:00:56,490 --> 00:00:58,080
To nadal ma pole wokół niego.

13
00:00:58,080 --> 00:00:59,310
Za kulisami.

14
00:00:59,520 --> 00:01:09,130
Tak samo jak to tutaj i ten jest naprawdę nie okrągłe lub nie boxy chce mieć te zaokrąglone narożniki, ale nadal jest to okno.

15
00:01:09,240 --> 00:01:15,870
Więc te pudełka są naprawdę użyteczne zakulisowo ponieważ możemy projektować różne właściwości na nich.

16
00:01:15,870 --> 00:01:19,350
Tak więc istnieją cztery właściwości lub cztery różne części każdego pudełka.

17
00:01:19,350 --> 00:01:23,550
Jest dużo więcej właściwości, ale dla części okna możemy manipulować.

18
00:01:23,610 --> 00:01:29,790
Więc załóżmy, że ten schemat, który jest również z MDA, a to z ust.

19
00:01:29,790 --> 00:01:42,210
Więc mam jakiś tekst w akapicie i daję mu pomarańczowy lub żółty granicę i to, co użytkownik widzi jakiś tekst i obramowanie, ale za kulisami Jest rzeczywiście kilka innych rzeczy dzieje.

20
00:01:42,360 --> 00:01:47,920
Więc między granicą a tekst jest tam coś, co nazywa wyściółka.

21
00:01:48,000 --> 00:01:51,040
Tak wypełnienie znajduje się przestrzeń na wewnętrznej granicy.

22
00:01:51,190 --> 00:02:01,060
Więc między treścią a granicą jest wypełnienie, a następnie istnieje również marża, która jest po drugiej stronie to jest między granicą na zewnątrz i nic innego.

23
00:02:01,170 --> 00:02:04,720
Więc używamy margines często dodać odstępy pomiędzy elementami.

24
00:02:04,860 --> 00:02:11,340
Więc jeśli mieliśmy dwa akapity i chciałem im być dalej od siebie to bym użyć margines i zwiększyć tym.

25
00:02:11,880 --> 00:02:18,700
Więc teraz mamy zamiar zrobić trochę głębokiego nurkowania w rzeczywistości składni pewne właściwości, które chcemy wykorzystać, zanim to zrobimy.

26
00:02:18,720 --> 00:02:29,870
Chcę po prostu pokazać dwie rzeczy można oczekiwać, aby zrobić pierwszy jeden z najbardziej ekscytujących, ale ważne jest to, że teraz mamy sposób na zrobienie czegoś, co wygląda jak ten.

27
00:02:29,880 --> 00:02:39,330
Do tej pory nie mamy sposób dokonywania tych pól, które są połączone ze sobą, że mają z nich przypisane są puste, ale nie ma tekstu w środku.

28
00:02:39,330 --> 00:02:50,830
Więc mamy zamiar dowiedzieć o modelu pudełkowego i zastosować że tutaj, aby ten tic tac toe pokładzie, a następnie jedziemy do tego portfela witryny dla fikcyjnej fotografa.

29
00:02:51,450 --> 00:02:52,350
Więc to jest miłe.

30
00:02:52,420 --> 00:03:00,690
To obrazy to reaguje tak zmienia rozmiar zmianę wielkości okna i siatki.

31
00:03:00,750 --> 00:03:04,270
Wszystko to opiera się pojęć masz zamiar dowiedzieć się tutaj.

32
00:03:04,710 --> 00:03:07,020
Więc mam zamiar iść do przodu i otworzyć Sublime tutaj.

33
00:03:07,560 --> 00:03:10,510
I mam bardzo prosty dokument, że już utworzony.

34
00:03:10,740 --> 00:03:12,600
Więc to tylko prosty HTML.

35
00:03:12,660 --> 00:03:14,670
Ma arkusz stylów podłączony.

36
00:03:14,700 --> 00:03:15,330
To jest puste.

37
00:03:15,330 --> 00:03:18,930
Oprócz kilku uwag, a następnie dwa akapity.

38
00:03:18,930 --> 00:03:27,660
Więc jeśli mogę otworzyć tego się można zobaczyć, że jest to bardzo proste, bardzo nudne, a my po prostu się to wykorzystać, aby bawić się z modelu pudełkowego.

39
00:03:28,860 --> 00:03:43,370
Więc mam zamiar iść do mojego sukcesu i mam zamiar wybrać paragrafy i jestem po prostu skopiować te komentarze w środku tak, że mogę napisać kod pod nimi tylko wizualnie powiedzieć, co robię.

40
00:03:43,380 --> 00:03:45,740
Więc zacznijmy dając nich granicy.

41
00:03:45,900 --> 00:03:57,630
Tak powinno to być ocena granicznej i zróbmy z pixel świecić na niebiesko zapisać, że odświeżanie i widać, że mamy ramkę dookoła treści.

42
00:03:57,630 --> 00:04:02,360
A co można również zauważyć, że treść jest tu idzie całą drogę w poprzek ekranu.

43
00:04:02,370 --> 00:04:09,620
Nasza granica nie zatrzymują się tu i to dlatego, że gdy robimy paragraf domyślnie przechodzi przez całą drogę w poprzek ekranu.

44
00:04:09,630 --> 00:04:23,260
Więc jeśli chcę zmienić szerokość samego akapitu tekstu można wykorzystać właściwości width i mam zamiar iść do przodu i dać szerokość jednego.

45
00:04:23,490 --> 00:04:25,390
Zróbmy 200 pikseli, aby rozpocząć.

46
00:04:25,890 --> 00:04:29,190
A gdybym odświeżyć widać mamy teraz zmienić szerokość.

47
00:04:29,190 --> 00:04:34,920
Gdybym skontrolować zawartość nie jest niebieski.

48
00:04:35,940 --> 00:04:37,840
A potem możemy mieć obramowanie wokół niego.

49
00:04:38,310 --> 00:04:39,700
Tak więc treść jest niebieski.

50
00:04:40,110 --> 00:04:45,350
I na tym schemacie, że jest to pole tutaj pole elementem.

51
00:04:45,630 --> 00:04:48,330
A potem mamy granicę, która jest bezpośrednio wokół niego.

52
00:04:48,330 --> 00:04:52,020
Nie ma przestrzeni między granicą oraz treści.

53
00:04:52,020 --> 00:04:56,920
Jeszcze jedno o szerokości, a także nie jest wysokość.

54
00:04:57,060 --> 00:05:02,360
Więc zróbmy wysokość 300 pikseli i zobaczyć Właśnie dodaliśmy sporo przestrzeni.

55
00:05:02,370 --> 00:05:06,620
Mam zamiar pozbyć się tego, ale nie jest to wysokość, że możemy wykorzystać podobnie jak w przypadku.

56
00:05:06,930 --> 00:05:11,760
Nie mamy po prostu użyć pikseli, dzięki czemu możemy korzystać z procentów.

57
00:05:13,890 --> 00:05:15,780
A ci są bardzo przydatne, więc pozwól mi pokazać.

58
00:05:15,810 --> 00:05:23,310
Zróbmy 50 procent i można się zastanawiać, co to jest 50 procent.

59
00:05:23,310 --> 00:05:27,290
A odpowiedź jest taka, że ​​jest to 50 procent elementu nadrzędnego.

60
00:05:27,300 --> 00:05:35,240
Więc w tym przypadku jest to, że ciało akapit jest wewnątrz akapitu przechodzi przez pół ciała.

61
00:05:35,310 --> 00:05:37,390
W naszym przypadku ciało jest cała strona.

62
00:05:37,410 --> 00:05:38,240
Było aż w poprzek.

63
00:05:38,250 --> 00:05:40,620
Tak więc skończyć z pół strony.

64
00:05:40,800 --> 00:05:54,890
I co jest miłe o tym, czy zmienić rozmiar okna również zmienia się tak wiele osób korzysta z tego i użyje faktycznie do wykorzystania w tej siatki obrazu.

65
00:05:55,280 --> 00:05:59,490
Widać, że obrazy zmienić ich szerokość i to jest procent.

66
00:06:00,040 --> 00:06:04,590
OK, więc mam zamiar trzymać go tak jak teraz.

67
00:06:04,770 --> 00:06:11,600
A potem kolejna właściwość będziemy rozmawiać o to dopełnienie i pamiętać, to jest wypełnienie przestrzeni pomiędzy elementem i granicy.

68
00:06:11,750 --> 00:06:15,410
A teraz nie mamy jakiegokolwiek pomieszczenia granice prawo na górze.

69
00:06:15,840 --> 00:06:22,120
Więc nie ma właściwość o nazwie wyściółka i możemy nadać mu pewną liczbę pikseli i zróbmy 10 pikseli, aby rozpocząć.

70
00:06:22,230 --> 00:06:25,130
Zapisz odświeżenia plików.

71
00:06:25,410 --> 00:06:28,700
A teraz mamy 10 pikseli wyściółka ze wszystkich stron.

72
00:06:29,040 --> 00:06:49,760
Więc jeśli mogę sprawdzić teraz zobaczysz tam teraz ten zielony treści, które wprowadził więc mamy niebieską zawartość sam i wtedy mamy zielone wokół niego, które są między granicą i treści, dzięki czemu możemy oczywiście zwiększamy to i uzyskać wiele więcej przestrzeni wewnątrz.

73
00:06:50,490 --> 00:06:52,890
Ale nie jest to jedyny sposób, aby ustawić dopełnienie.

74
00:06:52,920 --> 00:06:57,250
Ustawia się na wszystkich czterech bokach, jak to dokładnie tak samo.

75
00:06:57,380 --> 00:07:01,760
Ale czasami chcemy tylko dopełnienie po jednej lub obu stronach, tak jak z obramowaniem.

76
00:07:01,800 --> 00:07:09,830
Są to skróty do dłuższej wersji, gdzie jest granica górna 10 pikseli granicy dolnej pięć pikseli.

77
00:07:09,900 --> 00:07:20,270
To samo z wyściółką i komentarz, że na zewnątrz i możemy zrobić coś takiego dopełnienia w lewo o 40 pikseli i świeże.

78
00:07:20,520 --> 00:07:22,090
I mamy dopełnienie tutaj.

79
00:07:22,320 --> 00:07:24,250
I to jedyne miejsce na wypełnienie jest.

80
00:07:24,330 --> 00:07:30,830
I pamiętam przestrzeń tutaj ten niebieski nie jest wyściółka, że ​​jest jej rzeczywista zawartość to z tego, ze tutaj.

81
00:07:30,990 --> 00:07:33,610
Tak różne, chociaż wygląda na to, nie ma miejsca na prawej stronie.

82
00:07:33,620 --> 00:07:35,930
To przychodzi z innego miejsca.

83
00:07:37,170 --> 00:07:40,920
Tak więc kolejna rzecz, że możemy tu zrobić, to grać z marginesem.

84
00:07:41,160 --> 00:07:43,780
Więc margines jest ostatnim elementem układanki.

85
00:07:43,860 --> 00:07:45,900
Jest to przestrzeń na zewnątrz granicy.

86
00:07:45,900 --> 00:07:47,980
Tak między elementami.

87
00:07:48,450 --> 00:08:01,280
Więc to będzie przydatne, ponieważ może chcemy zwiększyć lub zwiększyć tę przestrzeń tutaj lub jako przykład tego miejsca tu między obrazami jest ustawiana za pomocą Marjan.

88
00:08:01,500 --> 00:08:10,240
Więc to rzeczywiście wygląda podobnie jak wyściółka więc możemy powiedzieć, margines i zróbmy coś oczywistego jak 100 pikseli, aby rozpocząć i odświeżyć.

89
00:08:10,410 --> 00:08:17,100
A co się stało, teraz mamy 100 pikseli przestrzeni na wszystkich stronach elementu na zewnętrznej granicy.

90
00:08:18,240 --> 00:08:19,360
Więc znaleźć aspekt.

91
00:08:19,980 --> 00:08:28,710
Zobaczysz, że w Chrome, który jest identyfikowane jako pomarańczowo tak błękitne jest treść Green wyściółka w Orange jest margines.

92
00:08:28,800 --> 00:08:30,030
Tak samo jak wyściółką.

93
00:08:30,030 --> 00:08:38,890
Czasem chcemy jedynie ustawić jedną część marginesu jednej strony więc możemy zrobić coś takiego marginesu szczycie wynosi 500 pikseli.

94
00:08:38,900 --> 00:08:46,070
A potem, gdy przyjdzie na to jedno teraz i zapisać, a my tylko dostać miejsca na górze po lewej stronie nie ma nic.

95
00:08:46,160 --> 00:08:48,180
A następnie więcej przestrzeni w górnej części tego.

96
00:08:48,170 --> 00:08:50,480
Nic na dnie lub w lewo lub w prawo.

97
00:08:50,610 --> 00:08:52,710
Więc to jest margines.

98
00:08:52,710 --> 00:08:59,510
Więc czasami dodać wartości do wszystkich stron na marginesie, ale nie chcemy, aby to zrobić z czterech różnych linii.

99
00:08:59,660 --> 00:09:06,500
Więc nie chcemy ich być dokładnie taka sama, jeśli są tutaj, ale nie wszyscy mają do powiedzenia margines górny margines lewy margines prawy dolny margines.

100
00:09:06,570 --> 00:09:09,550
Więc nie ma innego jak skrót do granicy.

101
00:09:09,570 --> 00:09:14,780
Albo możemy robić rzeczy na raz, co możemy zrobić to margines i nadać mu cztery wartości.

102
00:09:14,820 --> 00:09:21,300
Tak więc pierwszy z nich jest na górze, a następnie w prawo, a potem w dół.

103
00:09:21,750 --> 00:09:36,820
Zróbmy 500 pikseli, a następnie w lewo i przez to, że mamy ten miły czterostronne margines, gdzie wartości te są bardzo różne, ale mieliśmy tylko zrobić w jednej linii.

104
00:09:37,290 --> 00:09:49,920
Więc po prostu sprawdzić to tutaj i zobaczyć, czy możemy uzyskać 500 pikseli na dnie, że jest to 20 na górze otrzymujemy setki po lewej stronie, a następnie mamy 40 po prawej stronie.

105
00:09:50,010 --> 00:09:53,790
Więc jest ostatnia rzecz, którą zobaczysz, często z marginesu, który jest margines.

106
00:09:53,790 --> 00:09:54,480
Automatyczny.

107
00:09:54,780 --> 00:09:59,340
Więc co możemy zrobić, to ustawić margines być auto po lewej lub prawej stronie.

108
00:09:59,370 --> 00:10:02,550
A co to jest rzeczywiście zrobi Centrum elementem dla nas.

109
00:10:02,550 --> 00:10:04,570
Więc pozwól mi pokazać, jak to działa.

110
00:10:04,710 --> 00:10:18,390
A komentarz to się ponownie i możemy napisać margines i powiedzmy zerowy margines auto na górze po lewej stronie lub na prawym marginesie zero i dno i auto po lewej stronie.

111
00:10:18,510 --> 00:10:23,520
A jeśli robię to w pełnym rozmiarze i odświeżyć zobaczysz, że ośrodki to rzeczy dla nas.

112
00:10:23,520 --> 00:10:37,880
Więc, co to znaczy, że uznał, że jest to 50 procent, bo powiedział, że tutaj, a następnie dane z lewa jest auto i prawo to auto tak właśnie czyni go tak dużo, jak to musi zrobić i które będą faktycznie centrum to dla nas.

113
00:10:37,980 --> 00:10:41,540
A potem mamy zero na górze i na dole, więc oni scrunched razem.

114
00:10:41,930 --> 00:10:48,200
Co możemy też zrobić tam jeszcze krótsza droga robi to i to wygląda tak marginesem zerowym Otto.

115
00:10:48,540 --> 00:10:53,470
I tak będzie to ustawić górną i dolną do zera w lewo iw prawo, aby auto.

116
00:10:53,580 --> 00:11:04,700
Więc nic się nie zmienia i możemy również użyć tej składni, jeśli chcę dodać 50 pikseli na górze i na auto i chcę dodać 50 pikseli i 20 pikseli.

117
00:11:04,740 --> 00:11:09,830
Jedyną rzeczą do zapamiętania jest to, czego potrzebujesz w X istnieje, chyba że liczba jest równa zero.

118
00:11:10,430 --> 00:11:18,760
Więc jeśli mogę to zrobić, to dodaje 20 na górze, po lewej i prawej stronie, a następnie dodaje 50 na górze i na dole.

119
00:11:18,780 --> 00:11:21,070
Warto więc podsumować tutaj tylko jeden raz.

120
00:11:21,120 --> 00:11:25,370
Mamy wewnętrzną treść, która jest tutaj.

121
00:11:25,830 --> 00:11:33,440
Mamy wyściółkę, która jest pomiędzy granicami więc wszystko, co mamy, to obicie w lewo i wtedy mamy margines, który jest między granicą a po drugiej stronie.

122
00:11:33,450 --> 00:11:35,530
Tak między elementami basically.