Örneklerle Açıklanan CSS Kutu Modeli

Harika bir web sayfası düzeni oluşturmayı planlıyorsanız, kenar boşlukları, kenarlıklar, dolgu ve içerik hakkında bilgi sahibi olmanız gerekir. Web tasarımındaki her öğe, ister resim ister metin olsun, bu özelliklere sahip bir kutu kullanır. Kutu modeliyle oynayarak kolayca karmaşık düzenler oluşturabilirsiniz. Bu yazıda, CSS Kutu Modelini inceleyeceğiz ve bu özelliklerin nasıl kullanılacağını pratik örneklerle göstereceğiz.

CSS Kutu Modeli Nedir?

CSS kutu modeli, tarafından oluşturulan bir standarttır. World Wide Web Konsorsiyumu. Bir HTML belgesindeki tüm öğeleri kendi boyutlarına sahip dikdörtgen kutular olarak tanımlar. Bu kutular, bir içerik alanı ve isteğe bağlı çevreleyen kenar boşluğu, kenarlık ve dolgu alanları içerir. Öyleyse, bir CSS kutusunun bölümlerini keşfedelim.

CSS kutu modelinin dört katmanını ortaya çıkaralım.

İlk Katman: İçerik

İçerik alanı, öğenin bir resim, metin veya herhangi bir tür medya içeriği olabilecek ana içeriğini içerir. kullanarak blok düzeyindeki öğelerin boyutlarını değiştirebilirsiniz. boy uzunluğu ve Genişlik özellikler.

İkinci Katman: Dolgu

Doldurma, içerik kutusu ile kenarlık kutusu arasındaki boşluktur. İçeriğinizin etrafında boşluk olarak dursa da, farkı görselleştirmek için bir arka plan rengi kullanabilirsiniz. Basvurabilirsin dolgulu üst, dolgu-sağ, alt dolgu, ve dolgu-sol alanı değiştirmek için özellikler.

Üçüncü Katman: Kenarlık

Kenarlık, içeriği ve dolgu alanını sarar. Kullanarak kenarlığı yeniden boyutlandırabilir ve şekillendirebilirsiniz. sınır genişliği, kenarlık tarzı, ve sınır rengi özellikler.

Dördüncü katman: Kenar Boşluğu

Kutu modelinin son katmanı, elemanlar arasında boşluk oluşturmak için yaygın olarak kullanılır. Kenar boşluğu içeriği, dolguyu ve kenarlık alanını sarar. Kullanabilirsiniz kenar boşluğu,kenar-sağ, kenar boşluğu-alt, ve kenar-sol özellikler. Ayrıca margin özelliğine negatif bir değer verebilir veya Oto bazı harika yerleştirme teknikleri elde etmek için.

CSS Kutu Modeli için Proje Kurulumu

İçerik kutusu ve dolgu, kenarlık ve kenar boşluğu özelliklerine sahip temel kutu modelini göstermek için mini bir proje oluşturalım. Metin, resim veya medya içeriği ile gidebilirsiniz. Doğru şekilde yapılandırıldığından emin olarak başlayacağız.

HTML ile Yapı

Çıktı:

gibi tarayıcınızın yerleşik özelliklerini kullanabilirsiniz. Chrome Geliştirici Araçları, neler olduğunu görmek için. Unsplash'tan iki resim kullanıyoruz. Basit olması için akıllı telefon görüntüsünü kullanarak gizleyeceğiz. görüntü yok; daha sonra ihtiyacımız olana kadar.

CSS Kullanarak Stil Oluşturma

/*************************
TEMEL STİL
*************************/
* {
kenar boşluğu: 0 piksel;
dolgu: 0 piksel;
}
vücut {
ekran: esnek;
esnek yön: satır;
} 
.Görüntüle {
ekran: yok !önemli;
}

Şimdi içerik kutumuzu şekillendirelim. İlk olarak, ayarlayacağız boy uzunluğu ve Genişlik resmin. Ayrıca, arka plan rengi vermek daha iyi görselleştirmeye yardımcı olur. Öyleyse hadi yapalım.

/*************************
İÇERİK KUTUSU
*************************/
.content-box {
ekran: esnek;
esnek yön: satır;
haklı içerik: merkez;
hizalama öğeleri: merkez;
/* Yükseklik ve genişlik özelliklerini kullanarak içerik kutusunu şekillendirme */
arka plan rengi: #fdf;
yükseklik: 20em;
genişlik: 30em;
}

Dolgu ile İçeriğe Nefes Alacak Yer Verin

ya ayarlayabilirsiniz dolgulu üst, dolgu-sağ, alt dolgu, ve dolgu-sol özellikleri ayrı ayrı veya kısayolu kullanın. Size biraz zaman kazandırabileceğinden, mümkünse stenografiyi kullanmaya çalışın. Doldurmanın nasıl çalıştığını görelim.

 /*************************
DOLGU MALZEMESİ
*************************/
/* Dolgu uygulanıyor */
üst dolgu: 5em;
dolgu-sağ: 2em;
alt dolgu: 8em;
dolgu-sol: 2em;
/* Dolgu kısayolu */
/* üst/sağ/alt/sol */
dolgu: 5em 2em 8em 2em;
/* üst/yatay/alt */
dolgu: 5em 2em 8em;

Çıktı:

Kenarlık Kullanarak Dolgu Çevresine Çizgiler Çizin

Border özelliğini uygularken, kullandığınızdan emin olun. sınır rengi kenarlığa arka plandan farklı bir renk verme özelliği. seçebilirsiniz kenarlık tarzı steno özelliğini kullanarak tek tek veya tek seferde. Aynı şey için de geçerlidir sınır genişliği Emlak.

Ayrıca sınır yarıçapı kutuya yarıçaplı yuvarlak köşeler vermek piksel, geri, em, veya yüzde.

 /*************************
SINIR
*************************/
/* Kenarlık özellikleri uygulanıyor */
/* Kenar rengini ayarla */
kenarlık rengi: rgb (148, 234, 255);
/* Kenarlık stilini seç */
kenarlık stili: katı;
sağ kenarlık stili: kesikli;
sınır-alt-tarzı: oluk;
sol kenarlık stili: sırt;
/* kenarlık stili stenografi */
/* üst/sağ/alt/sol */
kenarlık stili: düz kesikli oluk sırt;
/* Kenar genişliğini ayarla */
kenarlık-üst genişlik: 4em;
sınır-sağ-genişlik: 2em;
sınır-alt genişliği: 2em;
kenarlık-sol genişliği: 2em;
/* sınır genişliği stenografisi*/
/* üst/sağ/alt/sol */
sınır genişliği: 4em 2em 2em 2em;
/* üst/yatay/alt */
sınır genişliği: 4em 2em 2em;
/* border özelliği kısayolu */
/* kenarlık: 4em katı rgb (148, 234, 255); */
/* Sınır yarıçapını ayarla */
sınır yarıçapı: 5em;
sınır yarıçapı: %20;

Çıktı:

Kenar Boşluğu Olan Kutular Arasına Boşluk Ekle

kullanarak bir kutuyu yatay olarak ortalayabilirsiniz. kenar boşluğu: 0 otomatik, belirli bir genişliğe sahip olması koşuluyla.

 /*************************
MARJ
*************************/
/* Kenar boşluğu özelliklerini uygulama */
kenar boşluğu: 4em;
kenar-sağ: 5em;
kenar boşluğu-alt: 3em;
sol kenar boşluğu: 5em;
/* Kenar boşluğu steno */
/* üst/sağ/alt/sol */
kenar boşluğu: 4em 5em 3em 5em;
/* üst/yatay/alt */
kenar boşluğu: 4em 5em 3em;
/* Otomatik kenar boşluğunu kullanma */
kenar boşluğu: 3em otomatik;

Çıktı:

Bir, iki, üç veya dört değer kullanarak kenar boşluğu özelliğini belirtebilirsiniz. Değerler uzunluk, yüzde veya aşağıdaki gibi bir anahtar kelime olabilir. Oto. Nasıl çalıştığını anlayalım:

• Yalnızca bir değer belirttiğinizde, dört tarafın da aynı kenar boşluğuna sahip olacağı anlamına gelir.
• İki değer belirttiğinizde, ilk değer şunu ifade eder: kenar boşluğu ve kenar boşluğu-alt ikinci değer belirtirken kenar-sağ ve kenar-sol.
• Üç değer belirlediğinizde, ilk ve sonuncusu şuna uygulanır: kenar boşluğu ve kenar boşluğu-alt sırasıyla. Ortadaki değer yatay alan içindir, yani kenar-sağ ve kenar-sol.
• Dört değeri de belirttiğinizde, sırasıyla üst, sağ, alt ve sol (saat yönünde) için geçerlidir.

Bu kısayolları dolgu ve kenarlık özellikleri için de kullanabileceğinizi unutmayın.

Ayrıca bakınız: Temel CSS3 Özellikleri Hile Sayfası

Hiç negatif marj kullandınız mı? Görselleştirmek için silelim görüntü yok ikinci resmimizi görüntülemek için negatif bir kenar boşluğu ayarlayın.

/* .Görüntüle {
ekran: yok !önemli;
} */
.content-box {
ekran: esnek;
esnek yön: satır;
hizalama öğeleri: merkez;
arka plan rengi: #fdf;
yükseklik: 20em;
genişlik: 30em;
dolgu: 5em 2em 8em;
kenarlık stili: düz kesikli oluk sırt;
sınır genişliği: 4em 2em 2em;
sınır yarıçapı: %20;
/* Negatif kenar boşluğu kullanma */
kenar boşluğu: 3em -20em 3em 5em;
}

Çıktı:

Kutu Modeli: Mükemmel Piksel Web Sitesi Yapmak

Kutu modeli, öğeler arasında boşluk tanımlamanıza, kenarlıklar eklemenize ve kolayca karmaşık görünümlü bir düzen oluşturmanıza olanak tanır. Harika bir web sitesi oluşturmaya hemen başlayabilirsiniz. Bu arada, keşfedebilirsiniz kenarlık kutusu ayrıntılı olarak mülk edin ve yukarıdaki kodla oynayın.

CSS'de içerik düzenlemek için başka yöntemler olduğunu anlamalısınız. Bunlara CSS Izgarası ve CSS Flexbox dahildir. Kutu modelinden memnun kaldığınızda, bu alternatifleri öğrenmeye devam etmelisiniz.

CSS Flexbox Eğitimi: Temel Bilgiler

CSS Flexbox yardımıyla HTML öğelerinizi mükemmel şekilde konumlandırın.

Sonrakini Oku

Yazar hakkında