Sayfanın html öğelerinin boyutlarını ayarlamak için css genişlik ve yükseklik parametreleri. Yükseklik, genişlik ve taşma - Bir blok düzeninde içerik alanını tanımlamak için CSS kuralları Kısa teorik bilgi

Merhaba sevgili okuyucular! Bugün, css özelliklerini kullanarak bir web sayfasının blok öğelerinin boyutunun nasıl ayarlanacağını ve öğeye sığmıyorsa içeriğin görüntüsünün nasıl ayarlanacağını inceleyeceğiz.

genişlik ve yükseklik - css'deki öğelerin genişliği ve yüksekliği

Genişlik ve yükseklik stil niteliklerini kullanarak sırasıyla blok öğelerinin genişliğini ve yüksekliğini ayarlayabilirsiniz:

genişlik: otomatik |<ширина>| miras
yükseklik: otomatik |<ширина>| miras

Değerler olarak, css'de bulunan herhangi bir ölçü birimini kullanabilirsiniz - örneğin piksel (px), inç (inç), nokta (pt) vb.:

p (genişlik: 200 piksel; yükseklik: 150 piksel)

Mutlak birimlere ek olarak, öğelerin boyutunun göreli değerini yüzde olarak belirtebilirsiniz. Bu durumda, elemanın genişliği ve yüksekliği, ana elemanın genişliğine ve yüksekliğine bağlı olacaktır. Üst öğe açıkça belirtilmemişse, boyutlar tarayıcı penceresine bağlı olacaktır.

div (genişlik: %40;)

Otomatik, öğenin boyutu üzerinde kontrolü web tarayıcısına verir ve varsayılandır. Bu durumda, öğenin boyutu, tüm içeriğinin içine sığacağı şekilde olacaktır.

Birkaç örneğe bakalım.

Sonuç:

Bu örnekte, içinde metin bulunan bir div bloğu ve iç içe p paragrafı oluşturduk. Div için boyutları kesinlikle 300 x 300 piksel olarak ayarladık. p öğesinin hem genişlik hem de yükseklik değerleri otomatiktir, bu nedenle ekran görüntüsünde de görebileceğiniz gibi genişliği ana öğenin genişliğine, yüksekliği ise paragraftaki tüm metne sığacak şekilde ayarlanmıştır.

Şimdi p paragrafı için css ayarlarını değiştirelim ve sabit boyutları belirleyelim:

Katman2 (
arka plan: #eee;
genişlik: 250 piksel;
}

Sonuç:

Gördüğünüz gibi, paragrafın genişliği daha daralmış ve 250 piksele eşitlenmiş ve yüksekliği, yükseklik parametresi otomatik olarak kaldığı için metnin sığması için artmıştır.

Şimdi paragrafın yüksekliğini ve genişliğini yüzde olarak belirleyelim:

Katman2 (
arka plan: #eee;
genişlik: %50;
yükseklik: %50;
}

Sonuç:

Resimde görebileceğiniz gibi, p öğesinin genişliği artık div'in genişliğinin yarısı kadardır. Ve yükseklik, div'in yüksekliğinin yüzde 75'ine eşit olacak şekilde arttı.

Herhangi bir öğenin genişliğini ve yüksekliğini göreceli birimlerde belirtirken, olası minimum ve maksimum boyutları belirtmeniz gerekebilir. Sonuçta, örneğin, tarayıcı penceresi yeniden boyutlandırıldığında, öğe boyutu, sitenin okunabilirliği çok düşük olacak şekilde azalabilir ve büyüyebilir.

Minimum genişlik ve yüksekliği minimum genişlik ve minimum yükseklik özelliklerini kullanarak belirleyebilirsiniz:

minimum genişlik:<ширина>
min-yükseklik:<высота>

Benzer stil öznitelikleri, maksimum genişlik ve maksimum yükseklik, maksimum boyutları ayarlamanıza olanak tanır:

maksimum genişlik:<ширина>
maksimum yükseklik:<высота>

Yükseklik ve genişliğin maksimum ve minimum değerleri belirtilirken, elemanın boyutlarının maksimumdan büyük ve minimum değerlerden küçük olamayacağı açıktır.

Görevin açıklığa kavuşturulmasında fayda var. yükseklik ve genişlik parametreleri yalnızca blok etiketleri için anlamlıdır, çünkü bu parametreler tarayıcı tarafından satır içi öğeler için işlenmez.

Bir öğenin yüksekliği ve genişliği için katı parametreler ayarladığınızda, içerdiği içerik sınırlı alana sığmayabilir.

Örneğin, yukarıdaki örneklerden p paragrafının boyutunu 100 piksele indirelim:

Katman2 (
arka plan: #eee;
genişlik: 100 piksel;
yükseklik: 100 piksel;
}

Sonuç:

Gördüğünüz gibi, metin paragraf sınırlarını aşmış ve pek hoş görünmüyor. Bu gibi durumlardan kaçınmak için bir css kuralı vardır - taşma.

İçeriği gizleme (gizli, görünür) veya kaydırma (kaydırma, otomatik) için taşma seçeneği

Bir öğenin hem genişliği hem de yüksekliği kısıtlandığında içerik taşması meydana gelebilir. İki paragraf düşünün:

İlk paragraf metni

İkinci paragraf metni

Sonuç:

Paragraflar için ne genişlik ne de yükseklik belirtilmediğinden, tarayıcı, auto değerine ilişkin kendi anlayışına göre bunları kendi başına hesaplar. Sonuç olarak, paragraflar içerdikleri içeriğe göre genişlik ve yükseklik olarak mevcut tüm alanı kapladı.

Şimdi ilk paragrafın genişliğini sınırlayalım:

İlk paragraf metni

İkinci paragraf metni

Sonuç:

Beklendiği gibi, paragrafın genişliği azaldı ve yükseklik tüm metni barındıracak şekilde ayarlandı.

Şimdi ilk paragrafın yüksekliğini sınırlayalım:

İlk paragraf metni

İkinci paragraf metni

Sonuç olarak, metnin bu kadar sınırlı bir paragrafa sığmadığı ve bu nedenle alt komşu alanına girdiği ortaya çıktı. Buna göre, birinci veya ikinci paragraflardaki metni okumak pratik olarak imkansızdır. Böyle durumlarda içeriğin davranışını kontrol etmektir. taşma kuralı:

taşma: görünür | gizli | kaydırma | otomatik | devralma

Varsayılan olarak, tarayıcıya kapsayıcıya sığmayan içeriği görüntülemesini söyleyen taşma görünür. Sonuç yukarıdaki örnekte görülebilir.

Kural, kapsayıcıya sığmayan her şeyi gizler:

Kaydırma değeri, içeriğin tamamı sığsa bile kaydırma çubuklarını öğe üzerinde dikey ve yatay olarak görüntüler:

İlk paragraf metni

İkinci paragraf metni

Bir kapsayıcı için kaydırma çubukları yapmanız gerekiyorsa, en popüler ve mantıklı çözüm, değerdir. Oto... Bu durumda, tarayıcının kendisi kaydırma çubuklarının ne zaman ve hangi eksenlerde görüntüleneceğini belirleyecektir:

İlk paragraf metni

İkinci paragraf metni

Sonuç:

Ayrı eksenler boyunca kaydırma görüntüsünü özelleştirmenize olanak tanıyan kaydırma çubuklarını özelleştirmek için taşma-x ve taşma-y stili özniteliklerini de kullanabilirsiniz. Böylece, sorumlu yatay eksen ve için dikey eksen.

Bu nedenle, örneğin, bir paragrafta asla görünmemek için yatay kaydırmaya ve yalnızca gerektiğinde dikey kaydırmaya ihtiyacınız varsa, aşağıdaki css kuralını yazmanız yeterlidir:

p (taşma-x: gizli; taşma-y: otomatik;)

Ve görev çözülecek.

Bu kadar. Bir sonrakine kadar. Blog güncellemelerine abone olmayı unutmayın, sosyal ağların düğmelerini kullanırsanız minnettar olacağım.

Bu uzun öğretici makale, görevi blok elemanlarla çalışma yöntemlerini düzenlemek, okuyucuya elemanların genişliğini ve yüksekliğini hesaplamak için model değiştirmenin ne için kullanıldığını, taşmanın nasıl yönetileceğini açıklamak olan önemli konulara odaklanacaktır. blok elemanları ve elemanların minimum ve maksimum boyutlarıyla nasıl çalışılacağı.

CSS kutu modelini keşfederken, genişlik ve yükseklik özelliklerinin bir elemanın iç alanının genişliğini ve yüksekliğini belirlediğini anladık ( içerik alanı), metin, resim ve diğer öğeleri içerebilir.

CSS kutu modelinde bir eleman için belirttiğiniz genişlik ve yükseklik değerleri ile tarayıcının onu görüntülemek için ayırdığı alan miktarı arasında fark vardır. Öğelerin toplam genişliği ve yüksekliği, dolgunun genişlik ve yüksekliğinden, kenarlıklardan ve kendileri için belirtilen özel değerlerden oluşan tarayıcı penceresinin alanıdır.

Toplam eleman genişliği aşağıdaki formül kullanılarak hesaplanır:

div(genişlik: 150 piksel; / * elemanın genişliğini ayarla * / yükseklik: 150 piksel; / * elemanın yüksekliğini ayarla * / dolgu: 10 piksel; / * elemanın dolgusunu ayarla * / sınır: 5 piksel; / * elemanın sınırlarını ayarla * / }

Bizim durumumuzda bu, durumu kurtarıyor ve herhangi bir hesaplama yapmak zorunda kalmıyoruz ve gelecekte elemanlarımız için gerekli olabilecek herhangi bir değişiklikten korkuyorlar. Bu gereksiz hesaplamaları tarayıcı tarafında bırakalım ve örneğimizin sonucuna bakalım:

Elemanların genişliğini ve yüksekliğini hesaplamak için bu modelin nihai olarak anlaşılması için, kazanılan bilgileri aşağıdaki örnekle pekiştireceğiz:

Content-box özelliğinin değeri varsayılandır ve klasik şemaya göre elemanın toplam genişliğini ve yüksekliğini hesaplar. Örneğin, genişlik:

150 piksel (özel genişlik) + 10 piksel (sol dolgu) + 10 piksel (sağ dolgu) + 10 piksel (sol kenarlık) + 10 piksel (sağ kenarlık) = 190 piksel.

Border-box değerine sahip bir özellik uyguladığımız ikinci öğe için, öğenin özel genişliği ve yüksekliği zaten öğenin içeriğini, kenarlığını ve dolgusunu içerir. Çoğu durumda, sayfalarda border-box değerine sahip bir özelliğin kullanılması tercih edilir, çünkü bu, öğenin son boyutlarını belirgin hale getirir ve yukarıda tartışılan bazı beklenmedik durumlardan kaçınır.

Örneğimizin sonucu:

Blok elemanı taşma kontrolü

Düzen sürecinde, bir öğenin içeriğinin, öğenin sınırları dışında görüntüleneceği durumlarla karşılaşırsınız. Varsayılan olarak, tarayıcı bu tür içeriği işler (öğe taşması görüntülenir), bu da bazı durumlarda görsel hatalara yol açar. Bu tarayıcı davranışından taşma CSS özelliği sorumludur. Olası değerlerini düşünelim:

Aşağıdaki örneğe bir göz atalım:

Bu örnekte, yerleştirdiğimiz dört CSS taşma özelliğinin farklı değerlerinin belirtildiği sabit genişlik ve yükseklik blokları:

• İlk blok(görünür değer) - içerik, öğenin sınırları dışındadır (varsayılan değer).
• ikinci blok(gizli değer) - Öğeyi aşan içerik kırpılır.
• Üçüncü blok(kaydırma değeri) - Taşma kesilir, ancak kaydırma çubuğu eklenir.
• dördüncü blok(otomatik değer) - kaydırma değerinde olduğu gibi, blok belirli bir eksen boyunca taşarsa yalnızca kaydırma çubuğu otomatik olarak eklenir ( x- yatay veya y- dikey) ve sayfada kalıcı olarak görüntülenmez.

Örneğimizin sonucu.

Açıklama

HTML kullanarak görüntüleri yeniden boyutlandırmak için yükseklik ve genişlik özellikleri sağlanır. Piksel veya yüzde cinsinden değerlere izin verilir. Bir yüzde ayarlanırsa, görüntünün boyutları, etiketin bulunduğu kap olan ana öğeye göre hesaplanır. ... Bir üst kapsayıcının yokluğunda, tarayıcı penceresi olduğu gibi kullanılır. Başka bir deyişle, genişlik = "%100", resmin web sayfasının tam genişliğine uzatılacağı anlamına gelir. Yalnızca bir genişlik veya yükseklik özelliği eklemek, görüntünün en boy oranını ve en boy oranını korur. Tarayıcı daha sonra ilk yüksekliğini ve genişliğini belirlemek için görüntünün tamamen yüklenmesini bekler.

Web sayfasındaki tüm resimleri boyutlandırdığınızdan emin olun. Bu, tarayıcının her resmi aldıktan sonra boyutunu hesaplamasına gerek olmadığından, sayfa yüklemesini biraz hızlandırır. Bu ifade özellikle bir tablonun içine yerleştirilmiş resimler için önemlidir.

Resmin genişliği ve yüksekliği yukarı veya aşağı değiştirilebilir. Ancak bu, dosya boyutu değişmediği için görüntünün yükleme hızını hiçbir şekilde etkilemez. Bu nedenle, görüntünün boyutunu küçültmeye dikkat edin. Bu kadar küçük bir çizimin yüklenmesinin neden bu kadar uzun sürdüğü okuyucular arasında şaşkınlığa neden olabilir. Ancak boyutu artırmak ters etkiye yol açar - görüntünün boyutu büyüktür, ancak dosya aynı boyuttaki görüntüye göre daha hızlı yüklenir. Ancak çizimin kalitesi bozulur.

Sözdizimi

HTML
XHTML

Değerler

Piksel veya yüzde cinsinden herhangi bir pozitif tam sayı.

Varsayılan değer

Resmin orijinal genişliği.

HTML5 IE Cr Op Sa Fx

Açıklama

Blok veya değiştirilebilir öğelerin yüksekliğini ayarlar (örneğin, etiket ). Yükseklik, öğenin etrafındaki sınırları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, öğenin yüksekliğine bağlı olarak hesaplanır. ana öğe. Ü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 sürümüne 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.

Merhaba, sevgili okuyucu.

Bu, CSS öğrenmenin on birinci dersidir. Bu derste, sadece iki basit ama önemli özelliğe bakacağız. Bu özellikler bloğun yüksekliğinden ve genişliğinden sorumludur.

Bu dersi incelemeden önce, önceki dersleri tamamlayın:

Teori ve pratik

Son derste kutu modelinin ne olduğuna, dolgu ve dolguya baktık. Burada sadece iki özelliği ele alacağız: bloğun yüksekliği ve genişliği. CSS'deki yükseklik, özellik tarafından belirlenir boy uzunluğu , ve özelliğe göre genişlik Genişlik ... Kodu gerçek bir örnekle inceleyelim (son dersten bir örnek alalım):

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

<html> <kafa> <başlık> ev</ başlık> <meta http-equiv = "İçerik Türü" içerik = "metin / html; karakter kümesi = utf-8"> <link rel = "stil sayfası" tipi = "metin / css" href = "style.css"> </ kafa> <vücut> <div kimliği = "içerik"> <div sınıfı = "ilkPar"> <p> Aliquam maleuada tellus justo, eget lacinia nunc rutrum a. Phasellus dictum tempor eleifend. Nunc ut magna non purus fermentum egestas ac eu nulla.</ p> <p> Fusce est tellus, mattis quis nisl ve egestas posuere libero. Donec scelerisque tellus porttitor massa dictum pulvinar.</ p> </ böl> <div sınıfı = "ikinciPar"> <p> Cras</ p> <ul> <li> amet çeşni</ li> <li> aliquam volutpat</ li> <li> elementum interdum</ li> </ ul> </ böl> </ böl> </ vücut> </ html>

Ve her blok için CSS'de