CSS boyut özellikleri
CSS boyut özelliklerini bir öğe yüksekliğini ve genişliğini kontrol sağlar.
Bu eleman,% 100 kadar bir genişliğe sahiptir.
Ayarlama yükseklik ve genişlik
height ve width özellikleri bir elemanın genişliği ve yüksekliği ayarlamak için kullanılır.
height ve width (bu. Varsayılan tarayıcı yüksekliğini ve genişliğini hesaplar araçlar), veya uzunluk değeri olarak belirtilebilir gibi otomatik olarak ayarlanabilir px, cm vb veya yüzde olarak (%) içeren bloğun .
Not: height ve width özellikleri kenar çizgileri ya da kenar içermez; onlar elemanın yüksekliği / dolgu, sınırları içindeki alanın genişliğini ve marj set!
Aşağıdaki örnek, bir gösterir <div> 100 piksel yüksekliğe ve 500 piksel genişliğe sahip eleman:
Max-genişlikleri
max-width özelliği, bir elemanın maksimum genişliğini ayarlamak için kullanılır.
max-width gibi, uzunluk değerleri belirtilebilir px, cm , vb veya yüzde olarak (%) (bu varsayılan değerdir. Araçları bir maksimum genişlik olduğu) içeren bloğun ya da yok olarak ayarlanır.
Sorunu <div> tarayıcı penceresi elemanının genişliğinden daha az olduğunda, yukarıda ortaya (500px) . Tarayıcı, daha sonra sayfaya yatay kaydırma çubuğunu ekler.
Kullanılması max-width yerine, bu durumda, küçük pencerelerin tarayıcının kullanımını artıracaktır.
Öneri: İki div arasındaki farkı görmek, daha küçük 500px genişliğinde için tarayıcı penceresini sürükle!
Not: değerini max-width özelliği geçersiz kılar width .
Aşağıdaki örnek, bir gösterir <div> 100 piksel yüksekliğe ve 500 piksel maksimum genişliği ile eleman:
it Yourself deneyin - Örnekler
Elemanlarının yüksekliğini ve genişliğini
Bu örnek, farklı elemanlarının yüksekliğini ve genişliğini ayarlamak için gösterilmiştir.
Bir görüntü kullanılarak yüzde genişliği ve yüksekliği ayarlama
Bu örnek, bir yüzde değeri kullanılarak bir görüntünün yüksekliğini ve genişliğini ayarlamak için gösterilmiştir.
Set dakika genişliği bir elemanın ve maksimum genişliği
Bu örnek, en az bir genişliğe ve bir piksel değeri ile bir elemanın maksimum genişliğini ayarlamak için gösterilmiştir.
Takım dakika yüksekliği ve bir elemanın maksimum yükseklikte
Bu örnek, en az bir yükseklik ve bir piksel değerini kullanarak bir elemanın maksimum yükseklik ayarlama gösterilmiştir.
Egzersizleri ile Yourself test edin!
Tüm CSS boyut özellikleri
| özellik | Açıklama |
|---|---|
| height | Bir elemanın yüksekliğini belirler |
| max-height | Bir elemanın maksimum yüksekliğini belirler |
| max-width | Bir elemanın maksimum genişliği tanımlar |
| min-height | Bir elemanın asgari yüksekliği ayarlar |
| min-width | Bir elemanın minimum genişliğini belirler |
| width | Bir elemanın genişliği tanımlar |