CSS Eğitimi

CSS ANA SAYFA CSS'ye Giriş CSS Sözdizimi CSS Seçiciler CSS Nasıl Yapılır CSS Yorumları CSS Renkleri CSS Arka Planları CSS Kenarlıkları CSS Marjları CSS Dolgusu CSS Yüksekliği/Genişliği CSS Kutu Modeli CSS Anahattı CSS Metni CSS Yazı Tipleri CSS Simgeleri CSS Bağlantıları CSS Listeleri CSS Tabloları CSS Ekranı CSS Maksimum genişliği CSS Konumu CSS Z-endeksi CSS Taşması CSS Kayan Noktası CSS Satır içi blok CSS Hizalama CSS Birleştiriciler CSS Sözde sınıfı CSS Sözde öğesi CSS Opaklığı CSS Gezinme Çubuğu CSS Açılır Listeleri CSS Resim Galerisi CSS Görüntü Sprite'ları CSS Attr Seçiciler CSS Formları CSS Sayaçları CSS Web Sitesi Düzeni CSS Birimleri CSS Özgüllüğü CSS !önemli CSS Matematik Fonksiyonları

Gelişmiş CSS

CSS Yuvarlak Köşeler CSS Kenarlık Resimleri CSS Arka Planları CSS Renkleri CSS Renk Anahtar Kelimeleri CSS Gradyanları CSS Gölgeleri CSS Metin Efektleri CSS Web Yazı Tipleri CSS 2D Dönüşümleri CSS 3D Dönüşümleri CSS Geçişleri CSS Animasyonları CSS Araç İpuçları CSS Stili Görüntüleri CSS Görüntü Yansıması CSS nesne uyumu CSS nesne konumu CSS Maskeleme CSS Düğmeleri CSS Sayfalandırma CSS Çoklu Sütunları CSS Kullanıcı Arayüzü CSS Değişkenleri CSS Kutu Boyutlandırma CSS Medya Sorguları CSS MQ Örnekleri CSS Esnek Kutusu

CSS Duyarlı

RWD Tanıtımı RWD Görünümü RWD Izgara Görünümü RWD Medya Sorguları RWD Görüntüleri RWD Videoları RWD Çerçeveleri RWD Şablonları

CSS Izgarası

Izgara Girişi Izgara Konteyner Izgara Öğesi

CSS SASS'ı

SASS Eğitimi

CSS Örnekleri

CSS Şablonları CSS Örnekleri css sınavı CSS Alıştırmaları CSS Sertifikası

CSS Referansları

CSS Referansı CSS Seçiciler CSS Fonksiyonları CSS Referansı Sesli CSS Web Güvenli Yazı Tipleri CSS Canlandırılabilir CSS Birimleri CSS PX-EM Dönüştürücü CSS Renkleri CSS Renk Değerleri CSS Varsayılan Değerleri CSS Tarayıcı Desteği

CSS Kutu Boyutlandırma


CSS Kutu Boyutlandırma

CSS box-sizingözelliği, bir öğenin toplam genişliğine ve yüksekliğine dolgu ve kenarlık eklememize izin verir.


CSS kutu boyutlandırma Özelliği olmadan

Varsayılan olarak, bir elemanın genişliği ve yüksekliği şu şekilde hesaplanır:

genişlik + dolgu + kenarlık = bir öğenin gerçek genişliği
yükseklik + dolgu + kenarlık = bir öğenin gerçek yüksekliği

Bunun anlamı: Bir öğenin genişliğini/yüksekliğini ayarladığınızda, öğe genellikle ayarladığınızdan daha büyük görünür (çünkü öğenin kenarlığı ve dolgusu öğenin belirtilen genişliğine/yüksekliğine eklenir).

Aşağıdaki çizim, belirtilen aynı genişlik ve yüksekliğe sahip iki <div> öğesini göstermektedir:

Bu div daha küçüktür (genişlik 300 piksel ve yükseklik 100 pikseldir).

Bu div daha büyüktür (genişlik ayrıca 300 pikseldir ve yükseklik 100 pikseldir).

Yukarıdaki iki <div> öğesi, sonuçta farklı boyutlara sahip olur (çünkü div2'de bir dolgu belirtilmiş):

Örnek

.div1 {
  width: 300px;
  height: 100px;
  border: 1px solid blue;
}

.div2 {
  width: 300px;
  height: 100px;
  padding: 50px;
  border: 1px solid red;
}

box-sizingMülk bu sorunu çözer .



CSS kutu boyutlandırma Özelliği ile

Bu box-sizingözellik, bir elemanın toplam genişliğine ve yüksekliğine dolgu ve kenarlık eklememizi sağlar.

Bir öğeyi ayarlarsanız box-sizing: border-box;, genişlik ve yüksekliğe dolgu ve kenarlık eklenir:

Her iki div de artık aynı boyutta!

Yaşasın!

box-sizing: border-box; Her iki <div> öğesine eklenmiş , yukarıdakiyle aynı örnek :

Örnek

.div1 {
  width: 300px;
  height: 100px;
  border: 1px solid blue;
  box-sizing: border-box;
}

.div2 {
  width: 300px;
  height: 100px;
  padding: 50px;
  border: 1px solid red;
  box-sizing: border-box;
}

Kullanmanın sonucu box-sizing: border-box;çok daha iyi olduğu için, birçok geliştirici sayfalarındaki tüm öğelerin bu şekilde çalışmasını ister.

Aşağıdaki kod, tüm öğelerin bu daha sezgisel şekilde boyutlandırılmasını sağlar. Pek çok tarayıcı zaten box-sizing: border-box;birçok form öğesi için kullanıyor (ancak tümü değil - bu nedenle girdiler ve metin alanları genişlikte farklı görünüyor: %100;).

Bunu tüm öğelere uygulamak güvenli ve akıllıcadır:

Örnek

* {
  box-sizing: border-box;
}

CSS Kutu Boyutlandırma Özelliği

Property Description
box-sizing Defines how the width and height of an element are calculated: should they include padding and borders, or not