1
00:00:00,840 --> 00:00:06,090
Dolayısıyla henüz ele almamız ve değerlendirmemiz gereken en önemli konulardan biri de öğelerin konumlandırılmasıdır.

2
00:00:06,600 --> 00:00:10,290
Peki bir sayfayı nasıl düzenleriz veya sağ üst köşeye div taşırız.

3
00:00:10,410 --> 00:00:15,720
Veya bir çapa etiketini nasıl daha geniş yapacağız veya resimler arasında boşluk ekleyelim.

4
00:00:15,780 --> 00:00:20,110
Bunların hepsi gerçekten önemli ve hepsi kutu modeli adı verilen bir şeyle alâkalı.

5
00:00:20,220 --> 00:00:26,820
Dolayısıyla, kutu modeli, HD'deki her şeyin temelini oluşturan bu temel fikir olup, temelde

6
00:00:26,820 --> 00:00:31,190
her öğenin etrafında bir dikdörtgen kutu bulunduğunu değerlendirirsiniz.

7
00:00:31,680 --> 00:00:38,040
Dolayısıyla burada sadece MDA'daki herhangi bir web sayfasına gideceğiz ve müfettişi açtığımızı ve

8
00:00:38,040 --> 00:00:39,620
büyüteç seçildiğini görebiliyoruz.

9
00:00:40,010 --> 00:00:44,810
Ve her öğenin üzerine geldiğimde etrafında bir kutunun olduğunu görebilirsiniz.

10
00:00:44,910 --> 00:00:48,180
Yani bu H2'nin çevresinde mavi bir kutu var.

11
00:00:48,180 --> 00:00:49,810
Bunun bir kutusu var.

12
00:00:50,130 --> 00:00:53,370
Özellikle kutu olmayan şeyler bile.

13
00:00:53,490 --> 00:00:56,320
Yani köşe div yuvarlaktı. Hâlâ etrafında bir kutu var.

14
00:00:56,490 --> 00:00:58,080
Kamera ARKASI.

15
00:00:58,080 --> 00:00:59,310
Bu da burada

16
00:00:59,520 --> 00:01:05,790
ve bu yuvarlak köşeli olmaya gerçekten benzeyen yuvarlak veya kutu değil ama yine de bir kutu.

17
00:01:05,820 --> 00:01:09,130
Dolayısıyla bu kutular perde arkasında gerçekten kullanışlıdır çünkü onlarla ilgili farklı özellikler stil edebiliriz.

18
00:01:09,240 --> 00:01:14,940
Dolayısıyla her kutunun dört özelliği veya dört farklı parçası vardır.

19
00:01:15,870 --> 00:01:19,350
Çok daha fazla özellik var ama biz değiştirebileceğimiz kutunun parçaları için.

20
00:01:19,350 --> 00:01:23,550
Öyleyse, MDA'dan gelen bu paragrafın bir paragraf olduğunu varsayalım.

21
00:01:23,610 --> 00:01:29,790
Bu nedenle bir paragraftaki bazı metinlerim var ve ben portakal veya sarı bir sınır veriyorum ve

22
00:01:29,790 --> 00:01:35,010
kullanıcının bazı metinleri ve bir sınır gördüğünü ancak sahnelerin arkasında aslında başka şeyler oluyor.

23
00:01:35,010 --> 00:01:42,210
Böylece sınır ile metin arasında dolgu adı verilen bir şey var.

24
00:01:42,360 --> 00:01:47,920
Dolayısıyla, dolgu sadece sınırın içindeki boşluktur.

25
00:01:48,000 --> 00:01:51,040
Dolayısıyla içerik ile sınır arasındaki dolgu ve ardından

26
00:01:51,190 --> 00:01:56,730
diğer tarafta dış kenar boşluğu ve başka herhangi bir şey arasında kenar boşluğu var.

27
00:01:56,730 --> 00:02:01,060
Bu nedenle, öğeler arasında boşluk eklemek için sık sık kenar boşluğu kullanırız.

28
00:02:01,170 --> 00:02:04,720
Dolayısıyla, iki paragrafa sahip olsaydık

29
00:02:04,860 --> 00:02:10,470
ve birbirlerinden daha uzak olmasını istediysek, marjı kullanıp arttırırdık.

30
00:02:10,470 --> 00:02:11,340
Şimdi, bunu

31
00:02:11,880 --> 00:02:16,380
yapmadan önce kullanmak istediğimiz bazı özelliklerin sözdizimine biraz derin bir atış yapacağız.

32
00:02:16,380 --> 00:02:18,700
şu anda böyle bir şey yapmanın bir yoludur.

33
00:02:18,720 --> 00:02:24,000
Size en heyecanlı şeylerden birini yapmayı dört gözle beklediğiniz iki şeyi göstermek istiyorum, ancak önemli olan şey

34
00:02:24,330 --> 00:02:29,870
Şimdiye dek aslında bu kutuları birbirine bağlayan ve içinde bir atanmış

35
00:02:29,880 --> 00:02:34,500
kutuya sahip oldukları ancak boş oldukları kutuda metin yoktur.

36
00:02:34,500 --> 00:02:39,330
Dolayısıyla, kutu modeli hakkında bilgi edineceğiz ve bunu bu tik tatik

37
00:02:39,330 --> 00:02:46,260
ayak parmağı tahtası yapmak için uygulayacağız ve ardından bu portfolyoyu hayali bir fotoğrafçı için hazırlayacağız.

38
00:02:46,260 --> 00:02:50,830
Bu hoş bir şey.

39
00:02:51,450 --> 00:02:52,350
Bu, resmin duyarlı olması nedeniyle bir pencerenin boyutunu ve ızgarasını değiştirmek üzere boyutu değiştirir.

40
00:02:52,420 --> 00:03:00,690
Bütün bunlar, burada öğrenmek istediğiniz kavramları temel alır.

41
00:03:00,750 --> 00:03:04,270
Bu yüzden burada devam edeceğim ve burada yüce tavrını açacağım.

42
00:03:04,710 --> 00:03:07,020
Ve oluşturduğum gerçekten basit bir belgem var.

43
00:03:07,560 --> 00:03:10,510
Yani basit bir HTML.

44
00:03:10,740 --> 00:03:12,600
Bağlı bir stil sayfası var.

45
00:03:12,660 --> 00:03:14,670
Bu boş.

46
00:03:14,700 --> 00:03:15,330
Birkaç yorum ve bir iki paragrafın bir kenara.

47
00:03:15,330 --> 00:03:18,930
Bu yüzden, bunu açarsam bunun çok temel

48
00:03:18,930 --> 00:03:25,620
bir iş olduğunu ve bunu sadece kutu modeliyle oynamak için kullanacağımızı görebilirsiniz.

49
00:03:25,620 --> 00:03:27,660
Bu yüzden başarıya

50
00:03:28,860 --> 00:03:35,910
gideceğim ve paragrafları seçeceğim ve sonra bu yorumları kopyalayacağım, böylece

51
00:03:35,910 --> 00:03:41,940
sadece ne yaptığımı görsel olarak anlatacak bir kod yazabileceğim.

52
00:03:41,940 --> 00:03:43,370
Bu yüzden bunlara bir sınır vererek başlayalım.

53
00:03:43,380 --> 00:03:45,740
Bu yüzden sınırın gözden geçirilmesi

54
00:03:45,900 --> 00:03:54,450
ve bu yenilemeyi göz önüne alarak piksel düz mavi yapmak için yapalım ve içeriğin etrafında bir sınır elde ettiğimizi görebilirsiniz.

55
00:03:54,450 --> 00:03:57,630
Ve ayrıca fark ettiğiniz şey, burada içeriğin ekran boyunca ilerlediğidir.

56
00:03:57,630 --> 00:04:02,360
bir paragraf yaptığımızda ekran boyunca ilerlemektedir.

57
00:04:02,370 --> 00:04:08,460
Sınırımız burada tam olarak durmaz çünkü varsayılan olarak

58
00:04:08,460 --> 00:04:09,620
Metnin

59
00:04:09,630 --> 00:04:20,210
paragrafın genişliğini değiştirmek istersem width özelliğini kullanabilirsiniz ve ileride gidip bir genişlik verecektim.

60
00:04:20,220 --> 00:04:23,260
Başlamak için 200 piksel yapalım.

61
00:04:23,490 --> 00:04:25,390
Yenilersem görebildiğiniz kadar genişliği değiştirdik.

62
00:04:25,890 --> 00:04:29,190
Eğer içeriği mavi değilse teftiş edersem.

63
00:04:29,190 --> 00:04:34,920
Ve sonra çevremizde bir sınır var.

64
00:04:35,940 --> 00:04:37,840
Yani içerik mavi.

65
00:04:38,310 --> 00:04:39,700
Ve bu diyagramda bu kutu burada bu element kutusu.

66
00:04:40,110 --> 00:04:45,350
Ve sonra çevremizde bir sınır var.

67
00:04:45,630 --> 00:04:48,330
Sınır ve içerik arasında boşluk yok.

68
00:04:48,330 --> 00:04:52,020
Genişliğiyle birlikte başka bir şey var ve ayrıca bir yükseklik var.

69
00:04:52,020 --> 00:04:56,920
Bu yüzden 300 piksel yükseklikle bakalım ve bir miktar alan ekledik görüyoruz.

70
00:04:57,060 --> 00:05:02,360
Bundan kurtulacağım, ancak kullanabileceğimiz bir yükseklik var.

71
00:05:02,370 --> 00:05:06,620
Yüzdeleri kullanabilmemiz için sadece piksel kullanmamız gerekmiyor.

72
00:05:06,930 --> 00:05:11,760
Ve bunlar gerçekten kullanışlıdır, bu yüzden sana göstermeme izin verin.

73
00:05:13,890 --> 00:05:15,780
Hadi yüzde 50 yapalım ve yüzde 50'sinin ne olduğunu merak ediyor olabilirsiniz.

74
00:05:15,810 --> 00:05:23,310
Ve cevap, ana öğenin yüzde 50'sinin olmasıdır.

75
00:05:23,310 --> 00:05:27,290
Dolayısıyla bu davada, paragrafın

76
00:05:27,300 --> 00:05:34,230
paragrafın içerisindeki vücut, vücudun yarısına kadar gider.

77
00:05:34,230 --> 00:05:35,240
Bizim durumumuzda vücut tüm sayfadır.

78
00:05:35,310 --> 00:05:37,390
Tüm yol buydu.

79
00:05:37,410 --> 00:05:38,240
Böylece sayfanın yarısı ile sonuçlanıyor.

80
00:05:38,250 --> 00:05:40,620
ızgarasında kullanmak için kullanır.

81
00:05:40,800 --> 00:05:51,870
Ve pencere boyutunu değiştirirsem bunun neye benzediğini de değiştirir; böylece bir çok insan bunu kullanır ve bunu aslında bu resim

82
00:05:51,900 --> 00:05:54,890
Görsellerin genişliklerini değiştirdiğini ve yüzdesinin bir oran olduğunu görebilirsiniz.

83
00:05:55,280 --> 00:05:59,490
Tamam şimdi öyle bir şekilde saklayacağım.

84
00:06:00,040 --> 00:06:04,590
Ve sonra konuşacağımız bir sonraki mülk dolgu

85
00:06:04,770 --> 00:06:10,080
ve dolgu unutmayın eleman ve sınır arasındaki bu boşluk.

86
00:06:10,080 --> 00:06:11,600
Ve şu anda sınırların hemen üstünde herhangi bir yerimiz yok.

87
00:06:11,750 --> 00:06:15,410
Dolayısıyla dolgu adı verilen bir özellik var

88
00:06:15,840 --> 00:06:21,570
ve bir dizi piksel verebiliriz ve başlamak için 10 piksel yapalım.

89
00:06:21,570 --> 00:06:22,120
Dosyayı yenilemeyi kaydedin.

90
00:06:22,230 --> 00:06:25,130
Ve şimdi her taraftan 10 piksel dolgu var.

91
00:06:25,410 --> 00:06:28,700
Dolayısıyla şimdi incelersem şu an tanıttığımız bu

92
00:06:29,040 --> 00:06:36,660
yeşil içerik olduğunu göreceksiniz; bu nedenle mavi içeriğin kendisi var ve çevremizde sınıra ve içeriğin

93
00:06:37,080 --> 00:06:45,390
arasına yeşil renk kazanıyoruz, böylece açık artırmamız mümkün oluyor ve çok şey alıyoruz. içeride daha fazla yer.

94
00:06:45,380 --> 00:06:49,760
Ancak dolguyu ayarlamanın tek yolu bu değil.

95
00:06:50,490 --> 00:06:52,890
Bu dört tarafın hepsini aynı şekilde ayarlar.

96
00:06:52,920 --> 00:06:57,250
Fakat bazen sadece kenarlığı gibi bir yanda veya iki kenarda dolgu istiyoruz.

97
00:06:57,380 --> 00:07:01,760
Bir kenarlık üst 10 piksel kenar alt beş piksel olduğu için daha uzun versiyon için kısa yollar var.

98
00:07:01,800 --> 00:07:09,510
Dolgu ile aynı şey ve bunu yorumladı ve dolgu

99
00:07:09,900 --> 00:07:17,940
gibi bir şey yapabiliriz 40 piksel ve taze bıraktı.

100
00:07:19,440 --> 00:07:20,270
Ve burada dolgu var.

101
00:07:20,520 --> 00:07:22,090
Ve dolgu yapmak için tek yer budur.

102
00:07:22,320 --> 00:07:24,250
Ve buradaki alanı

103
00:07:24,330 --> 00:07:29,640
hatırlıyorum, bu mavi, buradaki gerçek içeriği olan dolgu değil.

104
00:07:29,630 --> 00:07:30,830
Sağdaki alana benziyor olsa da çok farklı.

105
00:07:30,990 --> 00:07:33,610
Farklı bir yerden geliyor.

106
00:07:33,620 --> 00:07:35,930
Burada yapabileceğimiz başka bir şey marjıyla oynamaktır.

107
00:07:37,170 --> 00:07:40,920
Böylece kenar boşluğu bulmacanın son parçasıdır.

108
00:07:41,160 --> 00:07:43,780
Sınırın dışındaki alan.

109
00:07:43,860 --> 00:07:45,900
Öyleyse elementler arasında.

110
00:07:45,900 --> 00:07:47,980
Dolayısıyla bu yararlı olacaktır, çünkü

111
00:07:48,450 --> 00:07:54,620
burada bu alanı arttırmak veya artırmak isteyebiliriz veya buradaki örnekte burada bu alan Marjan kullanılarak ayarlanmıştır.

112
00:07:54,620 --> 00:08:01,280
ve başlatmak ve yenilemek için 100 piksel gibi açık bir şey yapalım.

113
00:08:01,500 --> 00:08:07,090
Dolayısıyla aslında dolgu gibi görünüyor, bu yüzden kenar boşlukları diyebiliriz

114
00:08:07,110 --> 00:08:10,240
Ve ne oldu şimdi sınırın

115
00:08:10,410 --> 00:08:15,810
dışındaki elemanın her tarafında 100 piksel alanımız var.

116
00:08:15,810 --> 00:08:17,100
Yani boy bul.

117
00:08:18,240 --> 00:08:19,360
Turuncu renkte

118
00:08:19,980 --> 00:08:26,910
mavi renkte olduğunu belirten Chrome'da Turuncu renkte dolgu olduğu yeşil renkte olduğunu göreceksiniz.

119
00:08:27,000 --> 00:08:28,710
Dolayısıyla dolgu gibi.

120
00:08:28,800 --> 00:08:30,030
bir şey yapabiliriz.

121
00:08:30,030 --> 00:08:36,050
Bazen marjın bir bölümünü bir tarafa ayarlamak istiyoruz, bu yüzden margin top 500 piksel gibi

122
00:08:36,690 --> 00:08:38,890
Ve şimdi bunlardan birine gelirler

123
00:08:38,900 --> 00:08:45,000
ve kurtarırız ve solda sadece üst kısımda boşluk kalırsa hiçbir şey yoktur.

124
00:08:45,000 --> 00:08:46,070
Ve daha sonra bunun üstünde daha fazla yer var.

125
00:08:46,160 --> 00:08:48,180
Tabanda veya solda veya sağda bir şey yok.

126
00:08:48,170 --> 00:08:50,480
Bu da marj.

127
00:08:50,610 --> 00:08:52,710
Bu yüzden bazen kenar boşluğunun

128
00:08:52,710 --> 00:08:58,500
tüm kenarlarına değerler eklemeliyiz ancak bunu dört farklı çizgi ile yapmak zorunda kalmak istemiyoruz.

129
00:08:58,500 --> 00:08:59,510
Dolayısıyla burada olsalar da

130
00:08:59,660 --> 00:09:04,110
tam olarak aynı olmalarını istemeyiz fakat hepimizin margin üst kenar boşluğu sol kenar boşluğu sol boşluk bıraktığını söylemek zorunda değiliz.

131
00:09:04,200 --> 00:09:06,500
Yani sınırda olduğu gibi başka bir kısayol var.

132
00:09:06,570 --> 00:09:09,550
Veya bir şeyi aynı anda yapabiliriz, bu marjı yapabilir ve ona dört değer veririz.

133
00:09:09,570 --> 00:09:14,780
İlki üst, sonra sağ ve alt için.

134
00:09:14,820 --> 00:09:21,300
Şimdi 500 piksel yapalım ve daha sonra sola dönelim ve bunu

135
00:09:21,750 --> 00:09:24,330
yaparak değerlerin hepsinin farklı olduğu

136
00:09:27,570 --> 00:09:35,550
güzel dört taraflı kenar boşluğu elde ediyoruz, ancak tek bir satırda yapmak zorunda kaldık.

137
00:09:35,550 --> 00:09:36,820
Bu yüzden burada

138
00:09:37,290 --> 00:09:44,190
incelemek ve altta 500 piksel olsun, üstte 20 olsun, soldaki yüz olsun diye sağdaki 40'ımız olsun diye bakmanız yeterli.

139
00:09:44,180 --> 00:09:49,920
Dolayısıyla marjı olan marjıyla sıklıkla göreceğiniz son bir şey var.

140
00:09:50,010 --> 00:09:53,790
Oto.

141
00:09:53,790 --> 00:09:54,480
Bu durumda, marjı sola veya sağa otomatik olarak ayarlayabiliriz.

142
00:09:54,780 --> 00:09:59,340
Ve ne yapacak gerçekte Merkezi bizim için bir unsurdur.

143
00:09:59,370 --> 00:10:02,550
İzin ver sana nasıl çalıştığını göstereyim.

144
00:10:02,550 --> 00:10:04,570
otomatik olarak sıfır marjı söyleyelim.

145
00:10:04,710 --> 00:10:12,870
Ve tekrar yorum yapalım ve marj yazabiliriz ve soldaki en üstteki otomatik veya sağdaki sıfır kenar boşluğunda alt ve sol

146
00:10:12,870 --> 00:10:18,390
Ve eğer bu boyutta bir yenileme yaparsam, şeylerin merkezlenmesini göreceksin.

147
00:10:18,510 --> 00:10:23,520
Peki ne demektir ki bunun yüzde 50 olduğu

148
00:10:23,520 --> 00:10:30,740
kararlaştırıldı demektir, çünkü burada ve sonra solun otomatik, sağın oto olduğu kadar

149
00:10:30,750 --> 00:10:36,810
yapması gerektiği kadar aslında o da bizim için merkezi olacağını söylemiştik.

150
00:10:36,810 --> 00:10:37,880
Ve üstte ve altta sıfır var bu yüzden birlikte scrunched konum.

151
00:10:37,980 --> 00:10:41,540
Yapabileceğimiz şey, bunu yapmanın daha kısa bir yoludur ve bu sıfır Otto'ya benziyor.

152
00:10:41,930 --> 00:10:47,940
Ve böylece bu üst ve alt sıfıra sola, sağa otomatik ayarlar.

153
00:10:48,540 --> 00:10:53,470
Dolayısıyla hiçbir şey değişmez ve üste 50 piksel ve

154
00:10:53,580 --> 00:11:01,380
otomatik eklemek istiyorsanız veya 50 piksel ve 20 piksel eklemek istiyorsanız bu sözdizimini de kullanabiliriz.

155
00:11:01,380 --> 00:11:04,700
Unutulmaması gereken şey, sıfır olmadığı sürece x'e ihtiyacınız olmasıdır.

156
00:11:04,740 --> 00:11:09,830
Bunu yaparsam, sol ve sağda en üstte 20, üstte ve altta 50 ekler.

157
00:11:10,430 --> 00:11:17,720
O halde burada bir kez daha anla bakalım.

158
00:11:18,780 --> 00:11:21,070
İçerideki içerik burada.

159
00:11:21,120 --> 00:11:25,370
Sınırlar arasında dolgu var, böylece elimizdeki tek şey

160
00:11:25,830 --> 00:11:31,290
dolguya soluyor ve sonra kenar ile diğer tarafta kenar boşluğu var.

161
00:11:31,430 --> 00:11:33,440
Temel olarak öğeler arasında.

162
00:11:33,450 --> 00:11:35,530
Dolayısıyla önümüzdeki birkaç videoda bu kavramları uygulayacağız ve bu ders boyunca kullanacağız

163
00:11:35,610 --> 00:11:40,150