CSS3 Kutu-Boyutlandırmasına Bir Bakış
Çok uzun zaman önce değil, Kutu Bir web sayfasında diyelim ki div, belirledik 100px hem genişlik hem de yükseklik için dolgu malzemesi için 10px ve yaklaşık sınırları 10px yanı sıra.
div genişlik: 100 piksel; yükseklik: 100px; dolgu maddesi: 10px; sınır: 10px katı #eaeaea;
Tarayıcılar, kutunun boyutunu 140 piksele genişletecek, buradaki toplam genişlik / yükseklik değerinin 140 pikseli, dolgu malzemesi ve sınırlar aşağıdaki gibi; 100 piksel [genişlik / yükseklik] + (2 x 10 piksel [dolgu]) + (2 x 10 piksel [kenar]).
Ancak, bazen bu sonuç beklediğimiz gibi değil. Bazen, her zaman olması için kutuya ihtiyacımız var. 100px doldurmadan veya eklenen kenarlardan bağımsız olarak.
Web sayfası düzenini oluştururken böyle bir tekrarlayan problemin üstesinden gelmek için, CSS3'ü kullanabiliriz. kutu boyutlandırma nasıl kontrol edileceği özelliği CSS kutu modeli tarayıcılarda çalışmalı.
Kutu boyutlandırmayı kullanma
kutu boyutlandırma özellik iki değer seçeneğine sahiptir, önce İçerik-box; varsayılan değer olan bu değer kullanıldığında, kutu modeli yukarıda açıkladığımız gibi davranacaktır..
Ve ikincisi border-box, kutunun büyüklüğü hesaplanacak belirtilen içeriğin boyutunu çıkartarak dolgu ve kenarlıklar eklenmiş olarak.
div genişlik: 100 piksel; yükseklik: 100px; dolgu maddesi: 10px; sınır: 10px katı #eaeaea; kutu boyutlandırma: kenarlık kutusu; -moz-kutu-boyutlandırma: border-box; / * Firefox 1-3 * / -webkit-box-boyutlandırma: border-box; / * Safari * /
Örneğin, yukarıda açıkladığımız gibi bir kutuya sahip olduğumuzda (dolgu ve kenarlar için 10 piksel olan 100 piksel kare), içeriğin boyutu düşecektir 60px, ve kutunun toplam boyutu 100px, çıkarma işleminin denklemi aşağıdaki gibi tanımlanabilir; 100 piksel [genişlik / yükseklik] - ((2 x 10 piksel [dolgu]) + (2 x 10 piksel [kenarlık])).
- gösteri
- Kaynak İndir
Tarayıcı Desteği
kutu boyutlandırma özellik tüm tarayıcılarda desteklenir; Firefox 3.6+, Safari 3, Opera 8.5+ ve Internet Explorer 8 ve üstü.
Bu nedenle, ziyaretçilerinizin çoğunun 8'in altındaki Internet Explorer sürümlerini kullanmayacağını biliyorsanız, bu faydalı öneriyi kullanabilirsiniz (Paul Irish sayesinde).
* kutu boyutlandırma: kenarlık kutusu; -moz-kutu-boyutlandırma: border-box; / * Firefox 1-3 * / -webkit-box-boyutlandırma: border-box; / * Safari * /
Yukarıdaki snippet uygulaması geçerli olacaktır. kutu boyutlandırma web sayfanızdaki tüm öğelerin mülkü.
Örnek
Bu bölümde, bunu nasıl kullanabileceğimize dair gerçek hayattan bir örnek göstereceğiz. kutu boyutlandırma özelliği. Aşağıdaki HTML işaretlemesine dayalı olarak, içinde beş bağlantı menüsü bulunan basit bir gezinme oluşturacağız..
Sonra bazı dekoratif stiller ekleyeceğiz; gibi, navigasyonu ayarlamak için sabit genişliği 500px ve her biri 100 piksel için bağlantının genişliği, daha sonra liste öğesini satır içi yapın ve her bir bağlantı menüsü için farklı arka planlar verin, böylece aralarındaki farkı görebilirsiniz.
nav genişlik: 500 piksel; marj: 50 piksel otomatik 0; yükseklik: 50px; nav ul doldurma: 0; marj: 0; nav li float: left; nav a görüntüleme: satır içi blok; genişlik: 100px; yükseklik:% 100; arkaplan rengi: #ccc; renk: # 555; metin dekorasyon: yok; font-family: Arial, sans-serif; yazı tipi boyutu: 12pt; çizgi yüksekliği:% 300; metin hizalama: orta; nav a görüntüleme: satır içi blok; genişlik: 100px; yükseklik:% 100; renk: # 555; metin dekorasyon: yok; font-family: Arial, sans-serif; nav li: nth-child (1) a background-color: # E9E9E9; sınır-sol: 0; nav li: nth-çocuğu (2) bir background-color: # E4E4E4; nav li: nth-child (3) bir background-color: #DFDFDF; nav li: nth çocuk (4) bir background-color: # D9D9D9; nav li: nth çocuk (5) bir background-color: # D4D4D4; sınır-sağ: 0;
Bu noktada, navigasyonumuz normal görünüyor.
Ancak, bağlantı menüsüne sol veya sağ kenarlık eklediğimizde sorun ortaya çıkacak.
nav a kenarlık-sol: 1px katı #aaa; sınır-sağ: 1 piksel katı # f3f3f3;
Bağın genişliği artık olmadığından menü aşağıya taşar 100px. Şimdi 102px, navigasyonun toplam genişliğinin 10px daha sonra yukarıda belirledik500px).
Bu sorunun üstesinden gelmek için, kutu boyutlandırma özellik, şöyle:
nav a kenarlık-sol: 1px katı #aaa; sınır-sağ: 1 piksel katı # f3f3f3; kutu boyutlandırma: kenarlık kutusu; -moz-kutu-boyutlandırma: border-box; -webkit-box-sizeing: sınır kutusu;
- gösteri
- Kaynak İndir
Daha fazla okuma
Ve nihayet, maceracı bir türseniz ve bu konuda daha derine inmek istiyorsanız, sizin için birkaç seçilmiş referans hazırladık:
- CSS Kutu Modelini Anlamak - Teknoloji Cumhuriyeti
- Firefox'ta Kutu-boyutlandırma hata - BugZilla
- Kutu boyutlandırma FTW - Paul Irish
