Altın Konu Örneklerle Açıklamalı CSS Kutu Modeli

Replicant · 10 Eki 2021

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, World Wide Web Konsorsiyumu tarafından oluşturulmuş bir standarttır . 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. Yükseklik ve genişlik özelliklerini kullanarak blok düzeyindeki öğelerin boyutlarını değiştirebilirsiniz .

İkinci Katman: Dolgu

Dolgu, 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. Sen başvurabilir padding-top , padding-hakkını , padding-bottom ve padding-left alanı değiştirmek için özelliklerini.

Üçüncü Katman: Kenarlık

Kenarlık, içeriği ve dolgu alanını sarar. border-width , border-style ve border-color özelliklerini kullanarak kenarlığı yeniden boyutlandırabilir ve stilini değiştirebilirsiniz .

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. Sen kullanabilirsiniz margin-top, margin-right , margin-bottom ve margin-left özelliklerini. Bazı harika yerleştirme teknikleri elde etmek için kenar boşluğu özelliğine negatif bir değer veya otomatik de verebilirsiniz .

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 yapılandırıldığından emin olarak başlayacağız.

HTML ile Yapı

Kod:

<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="UTF-8" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <link rel="preconnect" href="https://fonts.googleapis.com" />
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
   <link href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700&display=swap" rel="stylesheet" />
   <link rel="stylesheet" href="style.css" />
   <title>CSS Box Model</title>
 </head>
 <body>
   <img class="content-box display" src="img/second-content-image.jpg" alt="smartphone">
   <img class="content-box" src="img/content-image.jpg" alt="clock">
 </body>
</html>

Çıktı:

Neler olup bittiğini görmek için tarayıcınızın Chrome Geliştirici Araçları gibi yerleşik özelliklerini kullanabilirsiniz . Unsplash'tan iki resim kullanıyoruz. Basit olması için, akıllı telefon görüntüsünü display: none; daha sonra ihtiyacımız olana kadar.

CSS Kullanarak Stil Oluşturma

Kod:

/*************************
BASIC STYLING
*************************/
* {
 margin: 0px;
 padding: 0px;
}
body {
 display: flex;
 flex-direction: row;
}
.display {
 display: none !important;
}

Şimdi içerik kutumuzu şekillendirelim. İlk olarak, görüntünün yüksekliğini ve genişliğini ayarlayacağız . Ayrıca, arka plan rengi vermek daha iyi görselleştirmeye yardımcı olur. Öyleyse hadi yapalım.

Kod:

/*************************
CONTENT BOX
*************************/
.content-box {
 display: flex;
 flex-direction: row;
 justify-content: center;
 align-items: center;
 /* Styling the content box using height and width properties */
 background-color: #fdf;
 height: 20em;
 width: 30em;
}

Dolgu ile İçeriğe Nefes Alacak Yer Verin

padding-top , padding-right , padding-bottom ve padding-left özelliklerini ayrı ayrı ayarlayabilir veya stenografiyi kullanabilirsiniz. Size biraz zaman kazandırabileceğinden, mümkünse stenografiyi kullanmaya çalışın. Doldurmanın nasıl çalıştığını görelim.

Kod:

 /*************************
 PADDING
 *************************/
 /* Applying padding */
 padding-top: 5em;
 padding-right: 2em;
 padding-bottom: 8em;
 padding-left: 2em;

 /* Padding shorthand */

 /* top/right/bottom/left */
 padding: 5em 2em 8em 2em;

 /* top/horizontal/bottom */
 padding: 5em 2em 8em;

Çıktı:

Kenarlık Kullanarak Dolgu Çevresine Çizgiler Çizin

Border özelliğini uygularken, border -color özelliğini, kenarlığa arka plandan farklı bir renk vermek için kullandığınızdan emin olun . Shorthand özelliğini kullanarak kenarlık stilini tek tek veya tek seferde seçebilirsiniz . Aynısı border-width özelliği için de geçerlidir .

Ayrıca kenarlık yarıçapını , kutuya px , rem , em veya yüzde cinsinden bir yarıçapla yuvarlatılmış köşeler verecek şekilde ayarlayabilirsiniz.

Kod:

 /*************************
 BORDER
 *************************/
 /* Applying border properties */
 /* Set the border color */
 border-color: rgb(148, 234, 255);
 /* Select border style */
 border-top-style: solid;
 border-right-style: dashed;
 border-bottom-style: groove;
 border-left-style: ridge;

 /* border-style shorthand */
 /* top/right/bottom/left */
 border-style: solid dashed groove ridge;

 /* Set border width */
 border-top-width: 4em;
 border-right-width: 2em;
 border-bottom-width: 2em;
 border-left-width: 2em;

 /* border-width shorthand*/
 /* top/right/bottom/left */
 border-width: 4em 2em 2em 2em;

 /* top/horizontal/bottom */
 border-width: 4em 2em 2em;

  /* border property shorthand */
  /* border: 4em solid  rgb(148, 234, 255); */

 /* Set border-radius */
 border-radius: 5em;
 border-radius: 20%;

Çıktı:

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

Belirli bir genişliğe sahip olması koşuluyla, margin: 0 auto öğesini kullanarak bir kutuyu yatay olarak ortalayabilirsiniz.

Kod:

 /*************************
 MARGIN
 *************************/
 /* Applying margin properties */
 margin-top: 4em;
 margin-right: 5em;
 margin-bottom: 3em;
 margin-left: 5em;

 /* Margin shorthand */
 /* top/right/bottom/left */
 margin: 4em 5em 3em 5em;
 /* top/horizontal/bottom */
 margin: 4em 5em 3em;

 /* Using auto margin */
 margin: 3em auto;

Çıktı:

Bir, iki, üç veya dört değer kullanarak kenar boşluğu özelliğini belirtebilirsiniz. Değerler uzunluk, yüzde veya auto gibi bir anahtar kelime olabilir . 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 üst kenar boşluğu ve alt kenar boşluğunu belirtirken ikinci değer sağ kenar boşluğu ve sol kenar boşluğunu belirtir .
Üç değer belirlediğinizde, ilk ve son sırasıyla kenar boşluğu üst ve kenar boşluğu için geçerlidir . 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.

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

Kod:

/* .display {
 display: none !important;
} */
.content-box {
 display: flex;
 flex-direction: row;
 align-items: center;
 background-color: #fdf;
 height: 20em;
 width: 30em;
 padding: 5em 2em 8em;
 border-style: solid dashed groove ridge;
 border-width: 4em 2em 2em;
 border-radius: 20%;

 /* Using negative margin */
 margin: 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 border-box özelliğini detaylı olarak keşfedebilir ve yukarıdaki kodla oynayabilirsiniz.

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.

Kralbenimmmm · 10 Eki 2021

Paylasim İçin Tesekürler.

Replicant · 10 Eki 2021

Kralbenimmmm' Alıntı:
Paylasim İçin Tesekürler.

Rica ederim.

DumanInc · 10 Eki 2021

Paylaşımın İçin Teşekkürler

Replicant · 10 Eki 2021

tuzlareyna' Alıntı:
Paylaşımın İçin Teşekkürler

Rica ederim.

Altın Konu Örneklerle Açıklamalı CSS Kutu Modeli

Replicant

Ehlî olmuşum elemlerin

CSS Kutu Modeli Nedir?

İlk Katman: İçerik

İkinci Katman: Dolgu

Üçüncü Katman: Kenarlık

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

CSS Kutu Modeli için Proje Kurulumu

HTML ile Yapı

CSS Kullanarak Stil Oluşturma

Dolgu ile İçeriğe Nefes Alacak Yer Verin

Kenarlık Kullanarak Dolgu Çevresine Çizgiler Çizin

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

Kutu Modeli: Mükemmel Piksel Web Sitesi Yapmak

Kralbenimmmm

Mustafa Kemal Atatürk

Replicant

Ehlî olmuşum elemlerin

DumanInc

Web Development

Replicant

Ehlî olmuşum elemlerin

Şu an konuyu görüntüleyenler (Toplam : 0, Üye: 0, Misafir: 0)

Benzer konular

Altın Konu Örneklerle Açıklamalı CSS Kutu Modeli

Replicant

Ehlî olmuşum elemlerin

CSS Kutu Modeli Nedir?​

İlk Katman: İçerik​

İkinci Katman: Dolgu​

Üçüncü Katman: Kenarlık​

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

CSS Kutu Modeli için Proje Kurulumu​

HTML ile Yapı​

CSS Kullanarak Stil Oluşturma​

Dolgu ile İçeriğe Nefes Alacak Yer Verin​

Kenarlık Kullanarak Dolgu Çevresine Çizgiler Çizin​

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

Kutu Modeli: Mükemmel Piksel Web Sitesi Yapmak​

Kralbenimmmm

Mustafa Kemal Atatürk

Replicant

Ehlî olmuşum elemlerin

DumanInc

Web Development

Replicant

Ehlî olmuşum elemlerin

Şu an konuyu görüntüleyenler (Toplam : 0, Üye: 0, Misafir: 0)

Benzer konular

CSS Kutu Modeli Nedir?

İlk Katman: İçerik

İkinci Katman: Dolgu

Üçüncü Katman: Kenarlık

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

CSS Kutu Modeli için Proje Kurulumu

HTML ile Yapı

CSS Kullanarak Stil Oluşturma

Dolgu ile İçeriğe Nefes Alacak Yer Verin

Kenarlık Kullanarak Dolgu Çevresine Çizgiler Çizin

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

Kutu Modeli: Mükemmel Piksel Web Sitesi Yapmak