En son web geliştirme öğreticiler
×

CSS Eğitimi

CSS EV CSS Giriş CSS Sözdizimi CSS Nasıl CSS Renkler CSS Arka CSS Kenarlıklar CSS Kenar boşlukları CSS Dolgu malzemesi CSS Yükseklik genişlik CSS Metin CSS Yazı CSS Bağlantılar CSS Listeler CSS Tablolar CSS Kutu Modeli CSS Özeti CSS Gösterimi CSS Maksimum genişlik CSS Konumu CSS şamandıra CSS Inline-block CSS hizalama CSS combinators CSS Sözde sınıf CSS Sözde elemanı CSS Gezinti çubuğu CSS Açılır menülerde CSS Araç ipuçları CSS Resim Galerisi CSS Görüntüdeki Opaklık CSS Görüntü Spritleri CSS Attr Seçicileri CSS Formları CSS Sayaçlar

CSS3

CSS3 Giriş CSS3 Yuvarlatılmış köşeler CSS3 Sınır Resimleri CSS3 Arka CSS3 Renkler CSS3 Renk Geçişleri CSS3 Gölgeler CSS3 Metin CSS3 Yazı CSS3 2D Dönüşümler CSS3 3D Dönüşümler CSS3 Geçişler CSS3 Animasyonlar CSS3 Görüntüler CSS3 Düğmeler CSS3 sayfalara numara koyma CSS3 Birden Çok Sütun CSS3 Kullanıcı arayüzü CSS3 Kutu Boyutlandırma CSS3 Flexbox CSS3 Medya Sorguları CSS3 MQ Örnekleri

CSS Duyarlı Web Tasarımı

Duyarlı Web Tasarımı giriş Duyarlı Web Tasarımı Görünüm Duyarlı Web Tasarımı Izgara Görünümü Duyarlı Web Tasarımı Medya Sorguları Duyarlı Web Tasarımı Görüntüler Duyarlı Web Tasarımı Videolar Duyarlı Web Tasarımı çerçeveler

CSS Examples

CSS Örnekler CSS bilgi yarışması CSS sertifika

CSS References

CSS Referans CSS Seçiciler CSS Fonksiyonlar CSS Referans Resmi CSS Web Safe Yazı CSS canlandırılabilir CSS Birimler CSS PX-EM Dönüştürücü CSS Renkler CSS Renk Değerleri CSS Renkli İsimler CSS3 Tarayıcı Desteği

 

CSS Kutu Modeli

❮ Önceki Sonraki bölüm ❯

CSS Kutu Modeli

Tüm HTML öğeleri kutular olarak düşünülebilir. CSS terimi "box model" tasarım ve düzeni hakkında konuşurken kullanılır.

CSS kutu modeli esas Her HTML elemanı saran bir kutudur. marjlar, sınırlar, dolgu ve gerçek içeriği: Bu oluşur.

Aşağıdaki resim kutusu modelini göstermektedir:

Farklı parçaların Açıklama:

  • Content - metin ve resimler görünür kutusu, içeriği
  • Padding - içerik etrafında bir alanı temizler. dolgu şeffaftır
  • Border - dolgu ve içerik etrafında giden bir sınır
  • Margin - sınırında dışında bir alanı temizler. marj şeffaftır

kutu modeli bize elemanları etrafına kenarlık eklemek ve elemanları arasındaki boşluğu tanımlamak için izin verir.

Örnek

div {
    width: 300px;
    padding: 25px;
    border: 25px solid navy;
    margin: 25px;
}
Kendin dene "

Genişlik ve bir elemanın yüksekliği

Tüm tarayıcılarda doğru bir elementin genişliğini ve yüksekliğini ayarlamak için, size kutu modeli nasıl çalıştığını bilmek gerekir.

Important: Eğer CSS ile bir öğenin genişlik ve yükseklik özelliklerini ayarladığınızda, sadece genişliğini ve yüksekliğini ayarlamak content area . Bir elemanın tam boyutunu hesaplamak için ayrıca dolgu, sınırları ve kenar boşluklarını eklemelisiniz.

Biz stil vermek istersek varsayalım <div> 350 pikselden toplam genişliğe sahip olacak eleman:

Örnek

div {
    width: 320px;
    padding: 10px;
    border: 5px solid gray;
    margin: 0;
}
Kendin dene "

İşte matematik:

320px (width)
+ 20px (left + right padding)
+ 10px (left + right border)
+ 0px (left + right margin)
= 350px

Bir elemanın toplam genişliği bu şekilde hesaplanabilir:

Toplam element genişliği = genişlik + sol dolgu + sağ dolgu + sol kenar + sağ sınır + sol kenar + sağ kenar

Bir elemanın toplam yüksekliği bu gibi hesaplanabilir:

Toplam eleman yükseklik = yüksekliği + üst doldurma + alt kenar + üst kenar + alt sınır + en kenar + alt kenar boşluğu

Eski IE için Not: Internet Explorer 8 ve önceki sürümleri, içinde dolgu ve kenarlık eklemek width özelliği. Bu sorunu gidermek için, bir ekleme <!DOCTYPE html> HTML sayfası.

Egzersizleri ile Yourself test edin!

Egzersiz 1 » Alıştırma 2» Egzersiz 3 » Alıştırma 4»


❮ Önceki Sonraki bölüm ❯