Eleman yüksekliği ve genişliği hesaplanan değerlerdir. Bir web sayfasının her öğesi, sırayla birkaç alandan oluşan dikdörtgen bir alan oluşturur - içerik alanı (içerik), dolgu alanları, çerçeve alanları ve alan alanlarıöğe.
Öğenin içeriği ile sınırı arasında girinti dolgu, öğenin sınırının dışında - alanlar kenar boşluğu. Her öğenin bir içerik alanı vardır, diğer alanlar isteğe bağlıdır.
Pirinç. 1. Bir elemanın blok modeli 1. Eleman yüksekliği
height özelliği, blok öğesinin içeriğinin yüksekliğini ayarlar ve satır içi öğelerin gösterimi üzerinde hiçbir etkisi yoktur: satır içi; ... Satır içi öğelerin yüksekliği, içeriklerinin yüksekliğine eşittir. Negatif değerlere izin verilmez. Mülkiyet miras alınmaz.
Sözdizimi
P (yükseklik: 100 piksel;)
2. Ürün Genişliği
genişlik özelliği, blok öğesinin içeriğinin genişliğini ayarlar ve satır içi öğelerin gösterimi üzerinde hiçbir etkisi yoktur: satır içi; ... Satır içi öğeler, içerikleriyle aynı genişliğe sahiptir. Negatif değerlere izin verilmez. Mülkiyet miras alınmaz.
Sözdizimi
P (genişlik: 100 piksel;)
3. Kesinlikle konumlandırılmış bir elemanın yüksekliği ve genişliği
Mutlak olarak konumlandırılmış bir öğe konumunun genişliğini ve yüksekliğini ayarlayın: mutlak; her zaman gerekli değildir, çünkü bu durumda yükseklik ve genişlik dolaylı olarak elemanın ofseti tarafından belirlenir. Bir öğe için kenarlıklar ve kenar boşlukları belirtilirse, içerik alanının boyutunu uygun değerlerle küçültürler.
Div (arka plan: # 6A7690; konum: mutlak; üst: 0; alt: 0; sol: %50; sağ: 0;) / * bu durumda, öğenin yüksekliği %100, genişlik ana bloğun %50'sidir * / 
Pirinç. 2. Kesinlikle konumlandırılmış bir elemanın yüksekliği ve genişliği
4. Öğe girintileri
Doldurma özelliğini kullanarak, bir öğenin birden çok kenarı için aynı anda aşağıdaki sırayla dolgu ayarlayabilirsiniz:. Öğenin bir arka planı varsa, dolguya da genişleyecektir. Negatif değerlere izin verilmez. Mülkiyet miras alınmaz.
Örneğin, div (dolgu: 10px 20px 30px;) gibi üç değer verilirse, bunlar aşağıdaki sırayla dağıtılacaktır: ilk değer üst dolgu, ikincisi sağ ve sol dolgudur ve üçüncüsü alt dolgudur.
Örneğin div (dolgu: 10px 20px;) gibi iki değer verilirse, ilki üst ve alt dolguyu, ikincisi sağ ve solu ayarlayacaktır.
div (dolgu: 10px;) gibi tek bir değer, öğenin her tarafında aynı dolguyu ayarlayacaktır.
Sözdizimi
P (dolgu: 5px 10px 15px 10px;)
4.1. Bir elemanın bir tarafını girintileme
Bir öğenin yalnızca bir tarafında dolguyu ayarlamak için, padding-top, padding-right, padding-bottom, padding-sol özelliklerinden birini kullanmanız gerekir, örneğin:
P (sol dolgu: 10px;)
5. Öğe alanları
Öğelerin çoğu birbirinden kenar boşluklarıyla ayrılır. Kenar boşluğu özelliği, bir öğenin kenar boşluklarını aşağıdaki sırayla yazmak için kullanılan bir kestirme biçimdir: üst, sağ, alt, sol... Birkaç kenardan kenar boşlukları belirtmeniz gerektiğinde kullanılır, ancak dört kenardan olması gerekmez. Blok öğelerinin dikey olarak bitişik kenar boşlukları daraltılır ve üst ve alt kenar boşluklarının satır içi öğeler üzerinde hiçbir etkisi yoktur. Negatif değerlere izin verilir. Mülkiyet miras alınmaz.
Üç değer verilirse, örneğin, div (kenar boşluğu: 10px 20px 30px;), o zaman aşağıdaki sırayla dağıtılacaktır: ilk değer üst kenar boşluğu, ikincisi sağ ve sol kenar boşluğudur ve üçüncüsü alt kenar boşluğudur.
Örneğin, div (kenar boşluğu: 10px 20px;) gibi iki değer verilirse, ilki üst ve alt kenar boşluklarını, ikincisi sağ ve sol kenar boşluklarını ayarlayacaktır.
div (margin: 10px;) gibi tek bir değer, öğenin her tarafında aynı kenar boşluklarını ayarlar.
(margin: 0 auto;) yalnızca öğenin genişliği açıkça ayarlanmışsa çalışır.
Pirinç. 3. kenar boşluğu: otomatik; kesinlikle konumlandırılmış eleman için Sözdizimi
Div (kenar boşluğu: 5px 10px 2px 5px;)
5.1. Öğenin bir tarafındaki kenar boşlukları
margin-top, margin-right, margin-bottom, margin-left özellikleri, öğenin her iki tarafında karşılık gelen kenar boşluklarını kontrol eder, örneğin:
P (sol kenar boşluğu: 10 piksel;)
6. Sınırlama genişliği ve yüksekliği
CSS ayrıca web sayfası öğelerinin yükseklik ve genişliğini ayarlamakla ilgili birkaç özelliği de destekler: min-height, min-width, max-height ve max-width. Bu özellikler, bir öğenin genişliği veya yüksekliği için minimum ve maksimum değerleri ayarlamanıza izin vererek, öğeye mevcut alanı doldurma yeteneği verir. Özellikler genellikle duyarlı web sayfası tasarımı için kullanılır. Satır içi ve tablo öğeleri dışındaki tüm öğeler için geçerlidir. Her zaman ana kuralı takip ederler, yani. elemana bir yükseklik veya genişlik verdikten sonra. Miras alınmadı.
Bazı ölçü birimlerini kullanarak normal boyutları ve diğer birimleri kullanarak boyut kısıtlamalarını ayarlayabilirsiniz, örneğin:
Div (genişlik: 400 piksel; maksimum genişlik: %50;)
Öğe, yalnızca bu değer konteyner bloğunun genişliğinin %50'sini aşmıyorsa 400 piksel genişliğe sahip olacaktır, aksi takdirde genişliği azaltılacaktır.
Bu makalede, CSS'de bir bloğun yüksekliğini genişliğinin yüzdesi olarak nasıl ayarlayabileceğinize bir göz atacağız. Farklı boyutlardaki görüntülerden bir Bootstrap carousel (kaydırıcı) oluşturma örneğini kullanarak bu teknolojinin uygulamasına bakalım.
Genişliğinin belirli bir yüzdesine sahip yükseklikte bir blok oluşturma
- 2 bloktan HTML yapısı oluşturun:
İlk blok 2 sınıfa sahiptir. Öğeye duyarlı sınıfı kullanarak bloğun göreli konumunu ayarlayacağız. Bu, 2 bloğu (mutlak konumlandırmaya sahip olacak) ona göre yerleştirilecek şekilde yapılmalıdır. Ek olarak, bu sınıf aynı zamanda karşılık gelen öğelerin içeriğinden önce: Before sözde öğesini eklemek için kullanılır (item duyarlı). Bu öğe, padding-top CSS özelliğini kullanarak kutunun istenen yüksekliğini genişliğine göre ayarlar. Bu yöntemin püf noktası, padding özelliğinin piksel olarak değil, yüzde olarak, tarayıcı tarafından genişliğine göre hesaplanacaktır.... Böylece istenilen yükseklikte bir blok elde etmek mümkündür. Bir sonraki adım, blok 2'ye mutlak konumlandırma vermek ve onu ilk blokla hizalamaktır.
- Sayfaya aşağıdaki CSS'yi ekleyin: .item-responsive (konum: göreceli; / * göreceli konumlandırma * /) .item-responsive: Before (ekran: blok; / * öğeyi bir blok olarak işle * / içerik: ""; / * içerik sözde öğesi * / genişlik: %100; / * öğe genişliği * /) .item-16by9 (üst dolgu: %56.25; / * (9:16) * %100 * /) .item-responsive> .content ( konum: mutlak; / * öğenin mutlak konumu * / / * öğenin konumu * / üst: 0; sol: 0; sağ: 0; alt: 0;) / * Gerekirse (bunlara sahip bloklar için) sınıflar) * / .item -4by3 (üst dolgu: %75; / * (3: 4) * %100 * /) .item-2by1 (üst dolgu: %50; / * (1: 2) * 100 % * /) .item -1by1 (üst dolgu: %100; / * (1: 1) * %100 * /)
Bir Bootstrap atlıkarınca oluşturmak için yukarıdaki teknolojiyi uygulamak
Bootstrap'a aşina değilseniz ve ne olduğunu öğrenmek istiyorsanız Bootstrap'a Giriş sayfamıza göz atabilirsiniz.
Bootstrap carousel slaytlarını görüntülemek için yukarıdaki HTML yapısının ve CSS kodunun kullanılacağı bir örneğe bakalım.
Aşağıdaki dosyaları resim olarak kullanacağız:
- carousel_1.jpg (genişlik = 736 piksel, yükseklik = 552 piksel, en boy oranı (yükseklik-genişlik) = 1.33);
- carousel_2.jpg (genişlik = 1155 piksel, yükseklik = 1280 piksel, en boy oranı (yükseklik-genişlik) = 0,9);
- carousel_3.jpg (genişlik = 1846 piksel, yükseklik = 1028 piksel, en boy oranı (yükseklik-genişlik) = 1.8);
- carousel_4.jpg (genişlik = 1140 piksel, yükseklik = 550 piksel, en boy oranı (yükseklik-genişlik) = 2,07);
- carousel_5.jpg (genişlik = 800 piksel, yükseklik = 600 piksel, en boy oranı (yükseklik-genişlik) = 1.33);
Resimleri arka plan olarak ayarlayacağız. Bu, Bootstrap 3 karuselinde farklı en boy oranlarına sahip görüntülerin kullanılmasına izin verecektir.
Döngü HTML işaretlemesi:
Dönen CSS kodu:
Öğe duyarlı (konum: göreli; / * göreli konumlandırma * /) .item duyarlı: önce (görüntüleme: blok; / * öğeyi blok olarak oluştur * / içerik: ""; / * sözde öğe içeriği * / genişlik: 100 %; / * eleman genişliği * /) .item-16by9 (dolgu üstü: %56,25; / * (9:16) * %100 * /) .item-responsive> .content (konum: mutlak; / * mutlak konum * / / * öğesinin konumu * / üst: 0; sol: 0; sağ: 0; alt: 0; arka plan boyutu: kapak! önemli;)
Varsayılan olarak, blok öğeleri için otomatik genişlik kullanılır. Bu, elemanın tam olarak boş alan olduğu kadar yatay olarak gerileceği anlamına gelir. Blok elemanlarının varsayılan yüksekliği otomatik olarak ayarlanır, yani. tarayıcı, içeriğin tamamını görüntülemek için içerik alanını dikey olarak genişletir. Bir öğenin içerik alanı için özel boyutlar ayarlamak için genişlik ve yükseklik özelliklerini kullanabilirsiniz.
Genişlik CSS özelliği, bir öğ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ğine dikkat edin; 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, yalnızca tüm değerler dikey olarak hesaplanır:
Bu paragraf için sadece genişlik ve yüksekliği ayarlayacağız.
Bu paragraf, genişlik ve yüksekliğe ek olarak dolgu, kenarlık ve dolgu içerir.
Denemek "Örnek, ikinci öğenin birinciden daha fazla yer kapladığını açıkça göstermektedir. Formülümüze göre hesaplarsanız, ilk paragrafın boyutları 150x100 piksel, ikinci paragrafın boyutları ise:
| Toplam yükseklik: | 5 piksel | + | 10 piksel | + | 100 piksel | + | 10 piksel | + | 5 piksel | = 130 piksel |
| üst çerçeve | üst girinti | boy uzunluğu | daha düşük girinti | alt çerçeve |
yani, 180x130 piksel.
Öğelerin taşması
Öğenin genişliğini ve yüksekliğini tanımladıktan sonra, önemli bir noktaya dikkat etmekte fayda var - öğenin içinde bulunan içerik belirtilen blok boyutunu aşabilir. Bu durumda içeriğin bir kısmı öğenin sınırlarını aşacaktır, bu hoş olmayan anı önlemek için CSS taşma özelliğini kullanabilirsiniz. Taşma ö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ğeri ayarlamak, taşma özelliğini ayarlamamakla aynı etkiye sahip olacaktır.
- kaydırma - öğeye dikey ve yatay kaydırma çubukları ekler.
- auto - gerektiğinde kaydırma çubukları ekler.
- gizli - blok öğesinin sınırlarını aşan içeriğin bir kısmını gizler.
Açıklama
Blok veya değiştirilebilir öğelerin yüksekliğini ayarlar (örneğin, etiket ). Yükseklik, öğenin etrafındaki kenarlıkların kalınlığını, dolgu ve kenar boşluklarının değerini içermez.
Bloğun içeriği belirtilen yüksekliği aşarsa, elemanın 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 öğelerin 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 | faiz | oto | miras
Değerler
CSS'de kabul edilen herhangi bir uzunluk birimi, değer olarak kabul edilir - örneğin, piksel (px), inç (inç), nokta (pt) vb. Yüzde gösterimi kullanılırken, bir öğenin yüksekliği, yüksekliğe bağlı olarak hesaplanır. ana öğenin. Üst öğe açıkça belirtilmemişse, üst öğe olarak tarayıcı penceresi kullanılır. öğenin içeriğine göre yüksekliği otomatik olarak ayarlar
HTML5 CSS2.1 IE Cr Op Sa Fx
Bu örneğin sonucu Şekil 2'de gösterilmektedir. 1.
Pirinç. 1. Yükseklik özelliğinin uygulanması
Nesne Modeli
document.getElementById ("elementID") .style.height
tarayıcılar
Internet Explorer 6, yüksekliği yanlış bir şekilde minimum yükseklik olarak tanımlar.
İlginç modda, Internet Explorer 8.0'a kadar ve dahil olmak üzere, bir öğenin yüksekliğini, ona dolgu, kenar boşluğu ve kenarlık değerleri eklemeden yanlış hesaplar.
7.0 sürümüne kadar olan Internet Explorer, devralma değerini desteklemez.
NS boy uzunluğu CSS özelliği, bir elemanın yüksekliğini belirtir. Varsayılan olarak özellik, içerik alanının yüksekliğini tanımlar. Ancak kutu boyutlandırma border-box olarak ayarlanmışsa, bunun yerine sınır alanının yüksekliğini belirler.
Bu etkileşimli örneğin kaynağı bir GitHub deposunda depolanır. Etkileşimli örnekler projesine katkıda bulunmak istiyorsanız, lütfen https://github.com/mdn/interactive-examples klonlayın ve bize bir çekme isteği 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 çok sayıda CSS özelliğinde kullanılabilir. ">Resmi sözdizimi
Örnek
HTML
CSS
div (genişlik: 250 piksel; kenar boşluğu-alt: 5 piksel; kenarlık: 2 piksel düz mavi;) #uzun (yükseklik: 50 piksel;) #daha kısa (yükseklik: 25 piksel;) #parent (yükseklik: 100 piksel;) #çocuk (yükseklik: %50 ; genişlik: %75;)Sonuç
Erişilebilirlik endişeleri
Metin boyutunu büyütmek için sayfa yakınlaştırıldığında, yükseklikle ayarlanan öğelerin kesilmediğinden ve/veya diğer içeriği gizlemediğinden emin olun.
Ö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 Düzey 2 (Revizyon 1) Bu spesifikasyondaki "yükseklik" tanımı. |
Öneri | Bir mesafe değerini temsil eden CSS veri türü için destek ekler. Uzunluklar, genişlik, yükseklik, kenar boşluğu, dolgu, kenarlık genişliği, yazı tipi boyutu ve metin gölgesi gibi çok sayıda CSS özelliğinde kullanılabilir. "> |
| CSS Seviye 1 Bu spesifikasyondaki "yükseklik" tanımı. |
Öneri | İlk tanım. |
| Başlangıç değeri | Oto |
|---|---|
| Şunlar için geçerlidir: | tüm öğeler ancak değiştirilmeyen satır içi öğeler, tablo sütunları ve sütun grupları |
| Miras | numara |
| yüzdeler | Yüzde, oluşturulan kutunun içeren bloğun yüksekliğine göre hesaplanır. Eğer içeren bloğun yüksekliği açıkça belirtilmemişse (yani, içerik yüksekliğine bağlıysa) ve bu eleman kesinlikle konumlandırılmamışsa, değer hesaplanır. otomatik olarak Kök öğedeki bir yüzde yüksekliği, 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 enterpole edilir. "> uzunluk, CSS veri türü, gerçek, kayan noktalı sayılar olarak enterpole edilir."> yüzde veya hesap (); |
| kanonik sıra | resmi 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 istiyorsanız, lütfen https://github.com/mdn/browser-compat-data adresini ziyaret edin ve bize bir çekme isteği gönderin.
GitHub'da uyumluluk verilerini güncelleyin
| masaüstü | Mobil | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Krom | Köşe | Firefox | Internet Explorer | Opera | Safari | Android web görünümü | Android için Chrome | Android için Firefox | Android için Opera | iOS'ta Safari | Samsung İnternet | |
| boy uzunluğu | Chrome Tam destek 1 | Kenar Tam destek 12 | Firefox Tam destek 1 | IE Tam destek 4 | Opera Tam destek 7 | Safari Tam destek 1 | WebView Android Tam destek 1 | Chrome Android Tam destek 18 | Firefox Android Tam destek 4 | Opera Android Tam destek 10.1 | Safari iOS Tam destek 1 | Samsung İnternet Android Tam destek 1.0 |
| uygun içerik | Chrome Tam destek 46 | Kenar Destek yok Hayır | Firefox Destek yok Hayır | IE Destek yok Hayır | Opera Tam destek 33 | Safari Tam destek 11 Tam destek 11 Tam destek 9 ön ekli ön ekli | Opera Android'i mi? | Safari iOS Tam destek 11 Tam destek 11 Tam destek 9 ön ekli ön ekli Satıcı öneki ile uygulandı: -webkit- | ||||
| maksimum içerik | Chrome Tam destek 46 | Kenar Destek yok Hayır | ön ekli ön ekli | IE Destek yok Hayır | Opera Tam destek 44 | Safari Tam destek 11 | WebView Android Tam destek 46 | Chrome Android Tam destek 46 | ön ekli ön ekli Satıcı öneki ile uygulandı: -moz- | Samsung İnternet Android Tam destek 5.0 | ||
| minimum içerik | Chrome Tam destek 46 | Kenar Destek yok Hayır | Firefox Tam destek 66 Tam destek 66 Tam destek 3 ön ekli ön ekli Satıcı öneki ile uygulandı: -moz- | IE Destek yok Hayır | Opera Tam destek 44 | Safari Tam destek 11 | WebView Android Tam destek 46 | Chrome Android Tam destek 46 | Firefox Android Tam destek 66 Tam destek 66 Tam destek 4 ön ekli ön ekli Satıcı öneki ile uygulandı: -moz- | Opera Android Tam destek 43 | Safari iOS Tam destek 11 | Samsung İnternet Android Tam destek 5.0 |
| uzatmak | Chrome Tam destek 28 Webkit-doldurma-mevcut"> Alternatif Ad Tam destek 28Webkit-doldurma-mevcut"> Alternatif Ad Webkit-doldurma-mevcut"> Alternatif Ad | Kenar Destek yok Hayır | Firefox Destek yok Hayır | IE Destek yok Hayır | Opera Tam destek 15 Webkit-doldurma-mevcut"> Alternatif Ad Tam destek 15Webkit-doldurma-mevcut"> Alternatif Ad Webkit-doldurma-mevcut"> Alternatif Ad Standart olmayan adı kullanır: -webkit-fill-available | Safari Tam destek 9 Webkit-doldurma-mevcut"> Alternatif Ad Tam destek 9Webkit-doldurma-mevcut"> Alternatif Ad Webkit-doldurma-mevcut"> Alternatif Ad Standart olmayan adı kullanır: -webkit-fill-available | WebView Android Tam destek 4.4 Webkit-doldurma-mevcut"> Alternatif Ad Tam destek 4.4Webkit-doldurma-mevcut"> Alternatif Ad Webkit-doldurma-mevcut"> Alternatif Ad Standart olmayan adı kullanır: -webkit-fill-available | Chrome Android Tam destek 28 Webkit-doldurma-mevcut"> Alternatif Ad Tam destek 28Webkit-doldurma-mevcut"> Alternatif Ad Webkit-doldurma-mevcut"> Alternatif Ad Standart olmayan adı kullanır: -webkit-fill-available | Firefox Android Destek yok Hayır | Opera Android'i mi? | Safari iOS Tam destek 9 Webkit-doldurma-mevcut"> Alternatif Ad Tam destek 9Webkit-doldurma-mevcut"> Alternatif Ad Webkit-doldurma-mevcut"> Alternatif Ad Standart olmayan adı kullanır: -webkit-fill-available | Samsung İnternet Android Tam destek 5.0 Webkit-doldurma-mevcut"> Alternatif Ad Tam destek 5.0Webkit-doldurma-mevcut"> Alternatif Ad Webkit-doldurma-mevcut"> Alternatif Ad Standart olmayan adı kullanır: -webkit-fill-available |
