Genişlik ve yükseklik: elemanın boyutunu belirleyin. Html sayfa öğelerini boyutlandırmak için Css genişlik ve yükseklik parametreleri Blok genişliğini geçersiz kılma
Açıklama
Blok veya değiştirilebilir elemanların yüksekliğini ayarlar (örneğin, etiket ). Yükseklik, öğenin etrafındaki kenarlıkların kalınlığını, dolguyu ve kenar boşluklarını içermez.
Bloğun içeriği belirtilen yüksekliği aşarsa, öğenin yüksekliği değişmeden kalır ve içerik onun üzerinde görüntülenir. Bu özellik, HTML kodundaki öğeler sıralı olduğunda öğe içeriğinin çakışmasına neden olabilir. Bunun olmasını önlemek için öğenin stiline overflow: auto ekleyin.
Sözdizimi
yükseklik: değer | ilgi | oto | miras almak
Değerler
CSS'de kabul edilen tüm uzunluk birimleri değer olarak kabul edilir - örneğin, pikseller (px), inç (inç), noktalar (pt), vb. Yüzde gösterimi kullanılırken, öğenin yüksekliği ana öğenin yüksekliğine bağlı olarak hesaplanır. Üst öğe açıkça belirtilmezse, tarayıcı penceresi üst öğesi olarak kullanılır. auto, yüksekliği öğenin içeriğine göre ayarlar
HTML5 CSS2.1 IE Cr Op Sa Fx
Bu örneğin sonucu Şekil 1'de gösterilmektedir. 1.
Şekil: 1. height özelliğini uygulama
Nesne Modeli
document.getElementById ("elementID") .style.height
Tarayıcılar
Internet Explorer 6, yüksekliği minimum yükseklik olarak doğru şekilde tanımlamaz.
Tuhaf modda, 8.0 dahil olmak üzere Internet Explorer, ona dolgu, kenar boşluğu ve kenarlık değerleri eklemeden öğe yüksekliğini yanlış hesaplar.
Internet Explorer 7.0 veya üzeri, devralma değerini desteklemez.
yükseklik CSS özelliği, bir öğenin yüksekliğini belirtir. Özellik, varsayılan olarak içerik alanının yüksekliğini tanımlar. Ancak kutu boyutlandırma border-box olarak ayarlanmışsa, bunun yerine kenarlık alanının yüksekliğini belirler.
Bu etkileşimli örneğin kaynağı bir GitHub deposunda saklanır. Etkileşimli örnekler projesine katkıda bulunmak isterseniz, lütfen https://github.com/mdn/interactive-examples klonlayın ve bize bir istek gönderin.
Min-height ve max-height özellikleri yüksekliği geçersiz kılar.
Sözdizimi
/ * Anahtar kelime değeri * / yükseklik: otomatik; / *Değerler
CSS veri türü bir mesafe değerini temsil eder. Uzunluklar, genişlik, yükseklik, kenar boşluğu, dolgu, kenarlık genişliği, yazı tipi boyutu ve metin gölgesi gibi çeşitli CSS özelliklerinde kullanılabilir. "\u003eResmi sözdizimi
Misal
HTML
CSS
div (genişlik: 250px; margin-bottom: 5px; border: 2px düz mavi;) #taller (yükseklik: 50px;) # daha kısa (yükseklik: 25px;) #parent (yükseklik: 100px;) # çocuk (yükseklik: 50% ; genişlik:% 75;)Sonuç
Erişilebilirlik endişeleri
Metin boyutunu artırmak için sayfa yakınlaştırıldığında, yükseklikle ayarlanmış öğelerin kesilmediğinden ve / veya diğer içeriği engellemediğinden emin olun.
Teknik Özellikler
| Şartname | Durum | Yorum Yap |
|---|---|---|
| CSS İçsel ve Dışsal Boyutlandırma Modülü Seviye 4 |
Editörün Taslağı | |
| CSS İçsel ve Dışsal Boyutlandırma Modülü Seviye 3 Bu spesifikasyondaki "yükseklik" tanımı. |
Çalışma taslağı | Maksimum içerik, minimum içerik, uygun içerik anahtar kelimeleri eklendi. |
| CSS Geçişleri Bu spesifikasyondaki "yükseklik" tanımı. |
Çalışma taslağı | Yüksekliği canlandırılabilir olarak listeler. |
| CSS Seviye 2 (Revizyon 1) Bu spesifikasyondaki "yükseklik" tanımı. |
Öneri | CSS veri türü için destek ekler, bir mesafe değerini temsil eder. Uzunluklar, genişlik, yükseklik, kenar boşluğu, dolgu, kenarlık genişliği, yazı tipi boyutu ve metin gölgesi gibi çeşitli CSS özelliklerinde kullanılabilir. "\u003e |
| CSS Seviye 1 Bu spesifikasyondaki "yükseklik" tanımı. |
Öneri | İlk tanım. |
| Başlangıç \u200b\u200bdeğeri | Oto |
|---|---|
| İçin geçerlidir | değiştirilmemiş satır içi öğeler, tablo sütunları ve sütun grupları hariç tüm öğeler |
| Miras | hayır |
| Yüzdeler | Yüzde, blok içeren oluşturulan kutuların yüksekliğine göre hesaplanır. İçeren bloğun yüksekliği açıkça belirtilmezse (yani, içerik yüksekliğine bağlıysa) ve bu öğe mutlak olarak konumlandırılmamışsa, değer hesaplanır Kök öğedeki yükseklik yüzdesi, ilk içeren bloğa göredir. |
| Medya | görsel |
| Hesaplanan değer | yüzde veya otomatik veya mutlak uzunluk |
| Animasyon türü | bir CSS veri türü gerçek, kayan noktalı sayılar olarak enterpolasyonludur. "\u003e uzunluk, CSS veri türü gerçek, kayan nokta sayıları olarak enterpolasyonludur."\u003e yüzde veya hesap (); |
| Kanonik düzen | biçimsel dilbilgisi tarafından tanımlanan benzersiz belirsiz olmayan düzen |
Tarayıcı Uyumluluğu
Bu sayfadaki uyumluluk tablosu, yapılandırılmış verilerden oluşturulmuştur. Verilere katkıda bulunmak isterseniz, lütfen https://github.com/mdn/browser-compat-data sayfasına bakın ve bize bir çekme isteği gönderin.
GitHub'da uyumluluk verilerini güncelleyin
| Masaüstü Bilgisayar | Cep Telefonu | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Krom | Kenar | Firefox | Internet Explorer | Opera | Safari | Android web görünümü | Android için Chrome | Android için Firefox | Android için Opera | İOS'ta Safari | Samsung İnternet | |
| yükseklik | Chrome Tam desteği 1 | Edge Tam destek 12 | Firefox Tam destek 1 | IE Tam destek 4 | Opera Tam desteği 7 | Safari Tam destek 1 | WebView Android Tam destek 1 | Chrome Android Tam desteği 18 | Firefox Android Tam destek 4 | Opera Android Tam desteği 10.1 | Safari iOS Tam destek 1 | Samsung Internet Android Tam destek 1.0 |
| uygun içerik | Chrome Tam desteği 46 | Edge Destek yok Hayır | Firefox Destek yok Hayır | IE Destek yok Hayır | Opera Tam desteği 33 | Safari Tam destek 11 Tam destek 11 Tam destek 9 Önekli Önekli | Opera Android mi? | Safari iOS Tam destek 11 Tam destek 11 Tam destek 9 Önekli Önekli Satıcı öneki ile uygulandı: -webkit- | ||||
| maksimum içerik | Chrome Tam desteği 46 | Edge Destek yok Hayır | Önekli Önekli | IE Destek yok Hayır | Opera Tam desteği 44 | Safari Tam destek 11 | WebView Android Tam desteği 46 | Chrome Android Tam desteği 46 | Önekli Önekli Satıcı öneki ile uygulandı: -moz- | Samsung Internet Android Tam destek 5.0 | ||
| min-içerik | Chrome Tam desteği 46 | Edge Destek yok Hayır | Firefox Tam destek 66 Tam destek 66 Tam destek 3 Önekli Önekli Satıcı öneki ile uygulandı: -moz- | IE Destek yok Hayır | Opera Tam desteği 44 | Safari Tam destek 11 | WebView Android Tam desteği 46 | Chrome Android Tam desteği 46 | Firefox Android Tam destek 66 Tam destek 66 Tam destek 4 Önekli Önekli Satıcı öneki ile uygulandı: -moz- | Opera Android Tam desteği 43 | Safari iOS Tam destek 11 | Samsung Internet Android Tam destek 5.0 |
| Uzatmak | Chrome Tam desteği 28 Webkit dolgusu mevcut"\u003e Alternatif Ad Tam destek 28Webkit dolgusu mevcut"\u003e Alternatif Ad Webkit dolgusu mevcut"\u003e Alternatif Ad | Edge Destek yok Hayır | Firefox Destek yok Hayır | IE Destek yok Hayır | Opera Tam desteği 15 Webkit dolgusu mevcut"\u003e Alternatif Ad Tam destek 15Webkit dolgusu mevcut"\u003e Alternatif Ad Webkit dolgusu mevcut"\u003e Alternatif Ad Standart olmayan adı kullanır: -webkit-fill-available | Safari Tam destek 9 Webkit dolgusu mevcut"\u003e Alternatif Ad Tam destek 9Webkit dolgusu mevcut"\u003e Alternatif Ad Webkit dolgusu mevcut"\u003e Alternatif Ad Standart olmayan adı kullanır: -webkit-fill-available | WebView Android Tam desteği 4.4 Webkit dolgusu mevcut"\u003e Alternatif Ad Tam destek 4.4Webkit dolgusu mevcut"\u003e Alternatif Ad Webkit dolgusu mevcut"\u003e Alternatif Ad Standart olmayan adı kullanır: -webkit-fill-available | Chrome Android Tam desteği 28 Webkit dolgusu mevcut"\u003e Alternatif Ad Tam destek 28Webkit dolgusu mevcut"\u003e Alternatif Ad Webkit dolgusu mevcut"\u003e Alternatif Ad Standart olmayan adı kullanır: -webkit-fill-available | Firefox Android Destek yok Hayır | Opera Android mi? | Safari iOS Tam destek 9 Webkit dolgusu mevcut"\u003e Alternatif Ad Tam destek 9Webkit dolgusu mevcut"\u003e Alternatif Ad Webkit dolgusu mevcut"\u003e Alternatif Ad Standart olmayan adı kullanır: -webkit-fill-available | Samsung Internet Android Tam destek 5.0 Webkit dolgusu mevcut"\u003e Alternatif Ad Tam destek 5.0Webkit dolgusu mevcut"\u003e Alternatif Ad Webkit dolgusu mevcut"\u003e Alternatif Ad Standart olmayan adı kullanır: -webkit-fill-available |
Efsane
Tam destek Tam destek Destek yok Destek yok Uyumluluk bilinmiyor Uyumluluk bilinmiyor Standart olmayan bir ad kullanır. Standart olmayan bir ad kullanıyor. Bir satıcı öneki veya kullanım için farklı bir ad gerektirir. Kullanım için bir satıcı öneki veya farklı bir ad gerektirir.Varsayılan olarak, otomatik genişlik blok elemanları için kullanılır. Bu, elemanın yatay olarak tam olarak boş alan olduğu kadar gerileceği anlamına gelir. Blok elemanlarının varsayılan yüksekliği otomatik olarak ayarlanır, örn. tarayıcı, tüm içeriği görüntülemek için içerik alanını dikey olarak uzatır. Bir öğenin içerik alanı için özel boyutlar ayarlamak için genişlik ve yükseklik özelliklerini kullanabilirsiniz.
Genişlik CSS özelliği, öğenin içerik alanının genişliğini ve yükseklik özelliği içerik alanının yüksekliğini ayarlamanıza olanak tanır:
Genişlik ve yükseklik özelliklerinin yalnızca içerik alanının boyutunu belirlediğini unutmayın; bir blok öğesinin toplam genişliğini hesaplamak için, içerik alanının genişliğini, sol ve sağ dolguyu ve sol ve sağ kenarlığın genişliğini ekleyin. Aynısı elemanın toplam yüksekliği için de geçerlidir, sadece tüm değerler dikey olarak hesaplanır:
Bu paragraf için sadece genişliği ve yüksekliği ayarlayacağız.
Bu paragraf, genişlik ve yüksekliğe ek olarak dolgu, kenarlık ve dolgu içerir.
Deneyin "Örnek, ikinci elemanın birinciden daha fazla yer kapladığını açıkça göstermektedir. Formülümüze göre hesaplarsak, ilk paragrafın boyutları 150x100 piksel ve ikinci paragrafın boyutları:
| Toplam yükseklik: | 5px | + | 10px | + | 100px | + | 10px | + | 5px | \u003d 130 piksel |
| üst çerçeve | üst girinti | yükseklik | aşağı girinti | alt çerçeve |
yani 180x130 piksel.
Elemanların taşması
Öğenin genişliğini ve yüksekliğini tanımladıktan sonra, önemli bir noktaya dikkat etmek önemlidir - öğenin içinde bulunan içerik, belirtilen blok boyutunu aşabilir. Bu durumda, içeriğin bir kısmı öğenin sınırlarının ötesine geçecektir, bu tatsız andan kaçınmak için CSS taşma özelliğini kullanabilirsiniz. Overflow özelliği, tarayıcıya bloğun içeriği boyutunu aşarsa ne yapacağını söyler. Bu özellik, dört değerden birini alabilir:
- görünür, tarayıcı tarafından kullanılan varsayılan değerdir. Bu değerin ayarlanması, taşma özelliğini ayarlamamakla aynı etkiye sahip olacaktır.
- kaydırma - öğeye dikey ve yatay kaydırma çubukları ekler.
- otomatik - gerektiğinde kaydırma çubukları ekler.
- gizli - blok öğesinin sınırlarının ötesine geçen içeriğin bir kısmını gizler.
Css genişlik özellikleri, öğenin içerik alanının genişliğinin değerinden sorumludur.
Genişlik: değer | ilgi | oto | miras almak
Css height özelliği, öğenin içerik alanının yüksekliğinin değerinden sorumludur.
Yükseklik: değer | ilgi | oto | miras almak
Yükseklik ve genişlik için negatif değerlere izin verilmez.
Görünüşe göre bu CSS özellikleriyle her şey basit ve net, ancak aslında her şey o kadar basit değil.
Bir web sayfasındaki bir öğeyi 500 piksel genişliğe ayarlamak, o öğenin toplam genişliğinin 500 piksel veya daha fazla olacağı anlamına gelmez.
Anlaşılması gereken en önemli şey, genişlik ve yükseklik özelliklerinin içerik alanı için genişliği ve yüksekliği ayarlamasıdır.
Genişlik ve yükseklik özellikleri, öğenin toplam genişliğinin ve yüksekliğinin hesaplanacağı bileşenlerden yalnızca biridir. Aşağıdaki resimde görülebilen İçerik alanının genişliğini ve yüksekliğini belirtirler. Ayrıca, dolgu, kenar boşluğu ve kenarlık gibi özellikler, toplam genişlik ve yüksekliğin oluşumunda rol oynar.
Bu artık kolayca görülebilir.
Örneğin, aynı genişliğe sahip iki blok alalım, ancak bunlardan biri ek olarak padding özelliğini ayarlayacaktır.
Varsayılan olarak, web sayfalarında karşılık gelen taraf için dolgu değerinin yükseklik ve genişlik değerlerine eklenmesi davranışı vardır.
Şunlar. öğenin toplam genişliği, öğenin width özelliğinin değerinden oluşacak ve padding-left ve padding-right değerleri buna eklenecektir.
Sayfada bulunabilecek farklı türdeki öğeler için, öğelerin toplam genişliği ve yüksekliği özel formüller kullanılarak hesaplanır.
Web sayfalarında bulunabilen farklı türdeki öğeler için genişlik ve yükseklik değerleri farklı davranış ve değerlere sahip olabilir.
Yükseklik özelliğinde de benzer bir durum olacaktır.
CSS, bir web sayfasındaki farklı öğeler için genişlik ve yükseklik değerlerini hesaplayan özel bir algoritmaya sahiptir. Şimdi bu algoritma üzerinde durmayacağım çünkü biraz karmaşık.
Şimdi anlamamız gereken en önemli şey, genişlik ve yükseklik özelliklerinin, öğenin toplam genişliği ve yüksekliğiyle değil, öğenin içeriğiyle alanın genişliği ve yüksekliği ile çalışmamıza izin vermesidir.