Dolayısıyla henüz ele almamız ve değerlendirmemiz gereken en önemli konulardan biri de öğelerin konumlandırılmasıdır.
Peki bir sayfayı nasıl düzenleriz veya sağ üst köşeye div taşırız.
Veya bir çapa etiketini nasıl daha geniş yapacağız veya resimler arasında boşluk ekleyelim.
Bunların hepsi gerçekten önemli ve hepsi kutu modeli adı verilen bir şeyle alâkalı.
Dolayısıyla, kutu modeli, HD'deki her şeyin temelini oluşturan bu temel fikir olup, temelde
her öğenin etrafında bir dikdörtgen kutu bulunduğunu değerlendirirsiniz.
Dolayısıyla burada sadece MDA'daki herhangi bir web sayfasına gideceğiz ve müfettişi açtığımızı ve
büyüteç seçildiğini görebiliyoruz.
Ve her öğenin üzerine geldiğimde etrafında bir kutunun olduğunu görebilirsiniz.
Yani bu H2'nin çevresinde mavi bir kutu var.
Bunun bir kutusu var.
Özellikle kutu olmayan şeyler bile.
Yani köşe div yuvarlaktı. Hâlâ etrafında bir kutu var.
Kamera ARKASI.
Bu da burada
ve bu yuvarlak köşeli olmaya gerçekten benzeyen yuvarlak veya kutu değil ama yine de bir kutu.
Dolayısıyla bu kutular perde arkasında gerçekten kullanışlıdır çünkü onlarla ilgili farklı özellikler stil edebiliriz.
Dolayısıyla her kutunun dört özelliği veya dört farklı parçası vardır.
Çok daha fazla özellik var ama biz değiştirebileceğimiz kutunun parçaları için.
Öyleyse, MDA'dan gelen bu paragrafın bir paragraf olduğunu varsayalım.
Bu nedenle bir paragraftaki bazı metinlerim var ve ben portakal veya sarı bir sınır veriyorum ve
kullanıcının bazı metinleri ve bir sınır gördüğünü ancak sahnelerin arkasında aslında başka şeyler oluyor.
Böylece sınır ile metin arasında dolgu adı verilen bir şey var.
Dolayısıyla, dolgu sadece sınırın içindeki boşluktur.
Dolayısıyla içerik ile sınır arasındaki dolgu ve ardından
diğer tarafta dış kenar boşluğu ve başka herhangi bir şey arasında kenar boşluğu var.
Bu nedenle, öğeler arasında boşluk eklemek için sık sık kenar boşluğu kullanırız.
Dolayısıyla, iki paragrafa sahip olsaydık
ve birbirlerinden daha uzak olmasını istediysek, marjı kullanıp arttırırdık.
Şimdi, bunu
yapmadan önce kullanmak istediğimiz bazı özelliklerin sözdizimine biraz derin bir atış yapacağız.
şu anda böyle bir şey yapmanın bir yoludur.
Size en heyecanlı şeylerden birini yapmayı dört gözle beklediğiniz iki şeyi göstermek istiyorum, ancak önemli olan şey
Şimdiye dek aslında bu kutuları birbirine bağlayan ve içinde bir atanmış
kutuya sahip oldukları ancak boş oldukları kutuda metin yoktur.
Dolayısıyla, kutu modeli hakkında bilgi edineceğiz ve bunu bu tik tatik
ayak parmağı tahtası yapmak için uygulayacağız ve ardından bu portfolyoyu hayali bir fotoğrafçı için hazırlayacağız.
Bu hoş bir şey.
Bu, resmin duyarlı olması nedeniyle bir pencerenin boyutunu ve ızgarasını değiştirmek üzere boyutu değiştirir.
Bütün bunlar, burada öğrenmek istediğiniz kavramları temel alır.
Bu yüzden burada devam edeceğim ve burada yüce tavrını açacağım.
Ve oluşturduğum gerçekten basit bir belgem var.
Yani basit bir HTML.
Bağlı bir stil sayfası var.
Bu boş.
Birkaç yorum ve bir iki paragrafın bir kenara.
Bu yüzden, bunu açarsam bunun çok temel
bir iş olduğunu ve bunu sadece kutu modeliyle oynamak için kullanacağımızı görebilirsiniz.
Bu yüzden başarıya
gideceğim ve paragrafları seçeceğim ve sonra bu yorumları kopyalayacağım, böylece
sadece ne yaptığımı görsel olarak anlatacak bir kod yazabileceğim.
Bu yüzden bunlara bir sınır vererek başlayalım.
Bu yüzden sınırın gözden geçirilmesi
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.
Ve ayrıca fark ettiğiniz şey, burada içeriğin ekran boyunca ilerlediğidir.
bir paragraf yaptığımızda ekran boyunca ilerlemektedir.
Sınırımız burada tam olarak durmaz çünkü varsayılan olarak
Metnin
paragrafın genişliğini değiştirmek istersem width özelliğini kullanabilirsiniz ve ileride gidip bir genişlik verecektim.
Başlamak için 200 piksel yapalım.
Yenilersem görebildiğiniz kadar genişliği değiştirdik.
Eğer içeriği mavi değilse teftiş edersem.
Ve sonra çevremizde bir sınır var.
Yani içerik mavi.
Ve bu diyagramda bu kutu burada bu element kutusu.
Ve sonra çevremizde bir sınır var.
Sınır ve içerik arasında boşluk yok.
Genişliğiyle birlikte başka bir şey var ve ayrıca bir yükseklik var.
Bu yüzden 300 piksel yükseklikle bakalım ve bir miktar alan ekledik görüyoruz.
Bundan kurtulacağım, ancak kullanabileceğimiz bir yükseklik var.
Yüzdeleri kullanabilmemiz için sadece piksel kullanmamız gerekmiyor.
Ve bunlar gerçekten kullanışlıdır, bu yüzden sana göstermeme izin verin.
Hadi yüzde 50 yapalım ve yüzde 50'sinin ne olduğunu merak ediyor olabilirsiniz.
Ve cevap, ana öğenin yüzde 50'sinin olmasıdır.
Dolayısıyla bu davada, paragrafın
paragrafın içerisindeki vücut, vücudun yarısına kadar gider.
Bizim durumumuzda vücut tüm sayfadır.
Tüm yol buydu.
Böylece sayfanın yarısı ile sonuçlanıyor.
ızgarasında kullanmak için kullanır.
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
Görsellerin genişliklerini değiştirdiğini ve yüzdesinin bir oran olduğunu görebilirsiniz.
Tamam şimdi öyle bir şekilde saklayacağım.
Ve sonra konuşacağımız bir sonraki mülk dolgu
ve dolgu unutmayın eleman ve sınır arasındaki bu boşluk.
Ve şu anda sınırların hemen üstünde herhangi bir yerimiz yok.
Dolayısıyla dolgu adı verilen bir özellik var
ve bir dizi piksel verebiliriz ve başlamak için 10 piksel yapalım.
Dosyayı yenilemeyi kaydedin.
Ve şimdi her taraftan 10 piksel dolgu var.
Dolayısıyla şimdi incelersem şu an tanıttığımız bu
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
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.
Ancak dolguyu ayarlamanın tek yolu bu değil.
Bu dört tarafın hepsini aynı şekilde ayarlar.
Fakat bazen sadece kenarlığı gibi bir yanda veya iki kenarda dolgu istiyoruz.
Bir kenarlık üst 10 piksel kenar alt beş piksel olduğu için daha uzun versiyon için kısa yollar var.
Dolgu ile aynı şey ve bunu yorumladı ve dolgu
gibi bir şey yapabiliriz 40 piksel ve taze bıraktı.
Ve burada dolgu var.
Ve dolgu yapmak için tek yer budur.
Ve buradaki alanı
hatırlıyorum, bu mavi, buradaki gerçek içeriği olan dolgu değil.
Sağdaki alana benziyor olsa da çok farklı.
Farklı bir yerden geliyor.
Burada yapabileceğimiz başka bir şey marjıyla oynamaktır.
Böylece kenar boşluğu bulmacanın son parçasıdır.
Sınırın dışındaki alan.
Öyleyse elementler arasında.
Dolayısıyla bu yararlı olacaktır, çünkü
burada bu alanı arttırmak veya artırmak isteyebiliriz veya buradaki örnekte burada bu alan Marjan kullanılarak ayarlanmıştır.
ve başlatmak ve yenilemek için 100 piksel gibi açık bir şey yapalım.
Dolayısıyla aslında dolgu gibi görünüyor, bu yüzden kenar boşlukları diyebiliriz
Ve ne oldu şimdi sınırın
dışındaki elemanın her tarafında 100 piksel alanımız var.
Yani boy bul.
Turuncu renkte
mavi renkte olduğunu belirten Chrome'da Turuncu renkte dolgu olduğu yeşil renkte olduğunu göreceksiniz.
Dolayısıyla dolgu gibi.
bir şey yapabiliriz.
Bazen marjın bir bölümünü bir tarafa ayarlamak istiyoruz, bu yüzden margin top 500 piksel gibi
Ve şimdi bunlardan birine gelirler
ve kurtarırız ve solda sadece üst kısımda boşluk kalırsa hiçbir şey yoktur.
Ve daha sonra bunun üstünde daha fazla yer var.
Tabanda veya solda veya sağda bir şey yok.
Bu da marj.
Bu yüzden bazen kenar boşluğunun
tüm kenarlarına değerler eklemeliyiz ancak bunu dört farklı çizgi ile yapmak zorunda kalmak istemiyoruz.
Dolayısıyla burada olsalar da
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.
Yani sınırda olduğu gibi başka bir kısayol var.
Veya bir şeyi aynı anda yapabiliriz, bu marjı yapabilir ve ona dört değer veririz.
İlki üst, sonra sağ ve alt için.
Şimdi 500 piksel yapalım ve daha sonra sola dönelim ve bunu
yaparak değerlerin hepsinin farklı olduğu
güzel dört taraflı kenar boşluğu elde ediyoruz, ancak tek bir satırda yapmak zorunda kaldık.
Bu yüzden burada
incelemek ve altta 500 piksel olsun, üstte 20 olsun, soldaki yüz olsun diye sağdaki 40'ımız olsun diye bakmanız yeterli.
Dolayısıyla marjı olan marjıyla sıklıkla göreceğiniz son bir şey var.
Oto.
Bu durumda, marjı sola veya sağa otomatik olarak ayarlayabiliriz.
Ve ne yapacak gerçekte Merkezi bizim için bir unsurdur.
İzin ver sana nasıl çalıştığını göstereyim.
otomatik olarak sıfır marjı söyleyelim.
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
Ve eğer bu boyutta bir yenileme yaparsam, şeylerin merkezlenmesini göreceksin.
Peki ne demektir ki bunun yüzde 50 olduğu
kararlaştırıldı demektir, çünkü burada ve sonra solun otomatik, sağın oto olduğu kadar
yapması gerektiği kadar aslında o da bizim için merkezi olacağını söylemiştik.
Ve üstte ve altta sıfır var bu yüzden birlikte scrunched konum.
Yapabileceğimiz şey, bunu yapmanın daha kısa bir yoludur ve bu sıfır Otto'ya benziyor.
Ve böylece bu üst ve alt sıfıra sola, sağa otomatik ayarlar.
Dolayısıyla hiçbir şey değişmez ve üste 50 piksel ve
otomatik eklemek istiyorsanız veya 50 piksel ve 20 piksel eklemek istiyorsanız bu sözdizimini de kullanabiliriz.
Unutulmaması gereken şey, sıfır olmadığı sürece x'e ihtiyacınız olmasıdır.
Bunu yaparsam, sol ve sağda en üstte 20, üstte ve altta 50 ekler.
O halde burada bir kez daha anla bakalım.
İçerideki içerik burada.
Sınırlar arasında dolgu var, böylece elimizdeki tek şey
dolguya soluyor ve sonra kenar ile diğer tarafta kenar boşluğu var.
Temel olarak öğeler arasında.
Dolayısıyla önümüzdeki birkaç videoda bu kavramları uygulayacağız ve bu ders boyunca kullanacağız