CSS’deki Yüzde Marjlarını Hesaplama Konusunda Ne Bilmiyorsunuz
Çoğu web tasarımcısı CSS'yi oldukça iyi tanıdıklarını düşünüyor. Ne de olsa, o kadar da bir şey yok - birkaç seçici türü, birkaç düzine özellik ve sağduyulu kaynattıkları için zorlukla hatırlamanız gereken basamaklı kurallar. Ancak nitit-gritty seviyesine indiğinizde, birkaç tasarımcının gerçekten anladığı pek çok gizli detay var..
Son altı aydır çevrimiçi olarak sunduğum ücretsiz bir CSS testinin sonuçlarını incelediğimde, keşfettim neredeyse bir soru hiç kimse doğru anladım. Teste giren binlerce insandan, % 14'ten azı doğru yaptı.
Soru şurada toplanıyor: Yüzde Marjlarını Nasıl Hesaplarsınız??
Soru
Sitenizde bir konteyner var. div, ve bunun içinde bir içerik div:
Şimdi bu içeriği verelim div üst marj:
.içerik kenar boşluğu:% 10;
Tamam, yani% 10… ama% 10 ne? Bu soru insanların sadece% 13.8'i doğru cevap verebilir. Ve aklınızda bulundurun: bu kişilerin Google’a erişimi var!
Bu soru hakkında sevdiğim şey şu ki Cevap açık olmalı gibi görünüyor. Öyle ki, çoğu insanın sadece bir tahmin (ve yanlış tahmin) aldığından şüpheleniyorum. Ama belki o değil sana apaçık görünüyor. Yani, hayal gücünüzü gerçekten kullanıyorsanız, tarayıcının böyle bir marjı makul bir şekilde hesaplayabilmesi için birçok yol vardır..
Öyleyse, testteki soru aslında çoktan seçmeli olduğu için sizin için daraltsam nasıl olur? İşte seçenekleriniz:
- İçerik div yüksekliğinin% 10
- Konteyner div yüksekliğinin% 10
- İçerik div genişliğinin% 10'u
- Konteyner div genişliğinin% 10'u
Unutmayın, insanların yalnızca% 13.8'i bu listeden doğru cevabı seçebilir. Bu şanstan daha kötü!
Cevaplara yakından bakın; bilmeniz gereken sadece iki şey olduğunu göreceksiniz:
Kapsayıcı veya İçerik?
İlk Marjın içeriğinin div boyutuna veya konteyner div boyutuna bağlı olarak?
Şimdi bu bir aldatmaca değil, ama muhtemelen içgüdülerine güvenebilirsin. Bir div'i kabının genişliğinin% 50'sine ayarladıysam ve sonra sol ve sağ kenar boşluklarının boşluğun kalanını doldurmasını istiyorum, doğal olarak onları her birinin% 25'ine ayarlarım (böylece yüzde 100%). Bunun çalışması için, yüzde marjları kabın boyutlarına dayanmalıdır..
Tabii ki, sınava girenlerin üçte ikisi yanıtın bu kısmını alıyor.
Genişlik veya Yükseklik?
İkinci, kenar boşluğunun boyutu, o öğenin genişliğine veya yüksekliğine göre?
Dikkat ediyorsanız, muhtemelen çoktan korunuyorsunuzdur. Çok az insanın doğru cevabı seçmesi için, bu hileli bir soru olmalı, doğru?
Ve yine de, bahse girerim buna inanamazsın. cevap değil yükseklik. Peki, değil.
Evet, burada üst sınırdan bahsediyoruz. Evet, bu marjın büyüklüğü dikey bir ölçümdür. Evet, bir blok kabının yüksekliğinin% 50'sini oluşturuyorsa ve% 25'lik bir üst marj verdinizse, kabın yüksekliğinin% 25'ini olmasını beklersiniz.. Ve sen yanılıyorsun.
Boyunun olması gerektiğini düşünüyorsanız, kendinizi kötü hissetmeyin. Teste katılanların yaklaşık% 80'i sizinle aynı fikirdeler:
Mantıklı ... Hayır, Gerçekten!
Hala inanmıyor musun? İşte W3C CSS özelliklerinden bir alıntı:
Yüzde, üretilen kutunun içeren bloğunun genişliğine göre hesaplanır.. Bunun kenar boşluğu ve kenar boşluğu için de geçerli olduğuna dikkat edin..
Merak ediyorsanız, aynı şey üst ve alt dolgu için de geçerlidir. Sınırlara gelince, genişliklerini yüzde olarak belirtmek yasaktır..
Yani bu noktada, muhtemelen CSS'nin yaratıcılarının ya çılgın, ya da sadece çok aptal bir hata yaptılar. Ama size söylemek istediğim, dikey kenar boşluklarını içeren bloğun genişliğine dayandırmanın iki iyi nedeni var:
Yatay ve Dikey Tutarlılık
Elbette, bir bloğun dört tarafının da kenar boşluğunu belirlemenizi sağlayan bir kısa yol özelliği vardır:
marj:% 10;
Bu, aşağıdakilere genişler:
üst sınır:% 10; marj-sağ:% 10; marj-alt:% 10; sol kenar boşluğu:% 10;
Şimdi, yukarıdakilerden birini yazdıysanız, muhtemelen bloğun dört tarafındaki kenar boşluklarının eşit boyutta olmasını beklersiniz, değil mi? Fakat kenar boşluğu ve kenar boşluğu kabın genişliğine ve kenar boşluğu ve kenar boşluğu yüksekliğine bağlı olsaydı, o zaman genellikle farklı olurdu!
Dairesel Bağımlılığın Önlenmesi
CSS, içeriği sayfa boyunca dikey olarak istiflenmiş bloklar halinde yerleştirir, böylece bir bloğun genişliği genellikle tamamen ebeveyinin genişliğine göre belirlenir. Başka bir deyişle, yapabilirsiniz bloğun genişliğini ne olduğu hakkında endişelenmeden hesaplamak içeride o blok.
Bir bloğun yüksekliği farklı bir konudur. Genellikle, yükseklik içeriğinin toplam yüksekliğine bağlıdır. İçeriğin yüksekliğini ve bloğun yüksekliğini değiştirin. Sorunu gör?
İçeriğin yüksekliğini elde etmek için, ona uygulanan üst ve alt kenar boşluklarını bilmeniz gerekir. Ve eğer bu marjlar ana bloğun yüksekliğine bağlıysa, başınız derde girer, çünkü diğerini bilmeden bir tane hesaplayamazsınız.!
Dikey kenar boşluklarını temel alma Genişlik konteynerin bu dairesel bağımlılığı kırar ve sayfanın yerleştirilmesini mümkün kılar.
Sınıfın Ası
İşte burada: testte en zor soru, ve şimdi cevaplayabilirsiniz. Testin geri kalanında nasıl yapacağınızı bilmek ister misiniz? Kendin dene. Söz veriyorum, soruların çoğu bundan daha kolay.
Bu arada, yeni ve en zorlu soruyu arıyorum! Sizce kimsenin bilmediği CSS detayı?
Editörün Notu: Bu Hongkiat.com için yazılmıştır Kevin Yank. Kevin, 1999'dan beri web hakkında PHP, CSS ve JavaScript kitaplarını kendi adına yazmıştır. Ayrıca konferanslarda konuşulan ve tüm Web hakkında video eğitimi veren podcast'lere de ev sahipliği yaptı. Şu anda geliştirme ekibine çevrimiçi testler yapmak ve çevrimiçi testler yapmak için bir web uygulaması olan Sit Test'te liderlik yapıyor..
Hongkiat hakkında daha fazlası:
- Web Tasarımı: CSS İle Eşit Sütun Yüksekliği
- İçeriği Dikey Olarak Hizalamak için 6 CSS Püf Noktası
- CSS Birimlerine Bir Bakış: Piksel, EM ve Yüzde
- İçine Bir Bakış: CSS3 Kutu-boyutlandırma
Şimdi Okuyun: Bilmeniz Gereken 10 Gizli CSS3 Özellikleri
