Yükseklik, genişlik ve taşma - Blok düzeninde içerik alanını tanımlamak için CSS kuralları. Blok öğesi taşmasını kontrol etme

Tanım

Blok düzeyindeki veya değiştirilebilir öğelerin (örneğin, etiket) genişliğini ayarlar. ). Genişlik, öğenin etrafındaki kenarlıkların kalınlığını, dolguyu veya kenar boşluğu değerlerini içermez.

Tarayıcılar genişlikleri aynı şekilde işlemez; görüntüleme sonucu kullanılan tarayıcıya bağlıdır.. Masada 1 tane verildi olası seçenekler ve elde edilen genişlik.

Sözdizimi

genişlik: değer | ilgi | otomatik | miras almak

Değerler

CSS'de kabul edilen tüm uzunluk birimleri değer olarak kabul edilir - örneğin piksel (px), inç (inç), nokta (pt), vb. Yüzde gösterimi kullanıldığında, öğenin genişliği, genişliğine bağlı olarak hesaplanır. ana öğe. Ebeveyn açıkça belirtilmemişse, tarayıcı penceresi onun gibi davranır.

Otomatik Öğe türüne ve içeriğe göre genişliği ayarlar. inherit Ebeveynin değerini devralır.

HTML5 CSS2.1 IE Cr Op Sa Fx

Sonuç bu örnek Safari tarayıcısında nasıl görüntülendiği Şekil 1'de gösterilmektedir. 1.

Pirinç. 1. Blok genişliği

Nesne modeli

document.getElementById("elementID ").style.width

Tarayıcılar

Internet Explorer 6, genişliği hatalı bir şekilde minimum genişlik olarak tanımlıyor. İlginç modda, Internet Explorer'ın 8.0'a kadar olan sürümleri, bir öğenin genişliğini, ona dolgu, kenar boşluğu veya kenarlık değerleri eklemeden hatalı şekilde hesaplar.

Internet Explorer'ın 7.0'a kadar olan sürümleri, devralma değerini desteklemez.

Varsayılan olarak blok öğeleri otomatik genişliği kullanır. Bu, elemanın yatay olarak tam olarak olduğu kadar uzatılacağı anlamına gelir. boş alan. Blok elemanlarının varsayılan yüksekliği otomatik olarak ayarlanır; Tarayıcı, tüm içeriğin görüntülenmesi için içerik alanını dikey olarak genişletir. Bir öğenin içerik alanına özel boyutlar ayarlamak için genişlik ve yükseklik özelliklerini kullanabilirsiniz.

CSS width özelliği, öğenin içerik alanının genişliğini ayarlamanıza olanak tanır ve height ö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ğ dolgunun genişliğini eklemeniz gerekir. sağ sınır. Aynı şey 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 bir iç dolgu, bir kenarlık ve bir dış dolgu içerir.

Örnek açıkça ikinci öğenin birinciden daha fazla yer kapladığını gösteriyor. Formülümüzü kullanarak hesaplarsak ilk paragrafın boyutları 150x100 piksel, ikinci paragrafın boyutları ise şöyle olur:

yani 180x130 piksel.

Öğe Taşması

Bir öğenin genişliğini ve yüksekliğini belirledikten sonra önemli bir noktaya dikkat etmelisiniz; öğenin içinde yer alan içerik, belirtilen blok boyutunu aşabilir. Bu durumda içeriğin bir kısmı öğenin sınırlarının dışına çıkacaktır.Bu hoş olmayan anı önlemek için CSS taşma özelliğini kullanabilirsiniz. Overflow özelliği, tarayıcıya bir bloğun içeriğinin boyutunu aşması durumunda ne yapması gerektiğini söyler. Bu özellik dört değerden birini alabilir:

• görünür - tarayıcı tarafından kullanılan varsayılan değer. Bu değerin ayarlanması, taşma özelliğinin ayarlanmaması ile aynı etkiye sahip olacaktır.
• kaydırma - bir öğeye dikey ve yatay kaydırma çubukları ekler.
• otomatik - gerekirse kaydırma çubukları ekler.
• gizli - içeriğin blok öğesinin sınırlarının ötesine uzanan kısmını gizler.

Merhaba, blog sitesinin sevgili okuyucuları. Bugün, yükseklik ve genişliği kullanarak içerik alanının boyutlarını nasıl ayarlayabileceğinizi ve bu içeriğin, kendisine ayrılan alana sığabilecek miktardan fazla olması durumunda (css taşma kuralı ile) görüntülenmesini nasıl yapılandırabileceğinizi konuşacağız. değerler gizli, kaydırma, otomatik).

İlk paragraf metni

İkinci metin

Çünkü bu paragrafların genişliği ve yüksekliği belirtilmezse, varsayılan olarak tarayıcının kendisi bunları Otomatik değerine ilişkin kendi anlayışına göre hesaplar. Sonuç olarak, paragraflar genişlik olarak kendilerine sunulan tüm alanı kaplar ve yükseklik, içerdikleri içeriğin yüksekliğine karşılık gelir.

Şimdi ilk değişikliği yapalım ve ilk paragrafın genişliğini (genişlik:50 piksel) kodlayalım:

İlkinin metni

İkinci metin

Genel olarak beklenen gerçekleşti - yatay boyut genişlik:50 piksel olarak belirtilen değere düştü ve yükseklik:auto (varsayılan değer) sayesinde paragrafın yüksekliği hala oluşturuluyor. Sonuç olarak metnin tamamını içerebilecek hale geldi.

Ancak şimdi kabın yüksekliğini height:15px kullanarak sınırlayalım.

Sonuç olarak, metnin artık küçük paragraf kabımıza sığmadığını ve bu nedenle güvenli bir şekilde komşusunun alanına girdiğini anladık. Bu tür durumlarda içeriğin davranışını kontrol etmeye yarayan şey tam olarak budur. taşma kuralı.

Taşma, "taşma" veya başka bir deyişle "içerik taşması" anlamına gelir. İçeriğin kendisine tahsis edilen alana (konteyner) sığmaması durumunda ne olması gerektiğinden bahseder.

Taşmanın birkaç geçerli değeri vardır ancak varsayılan değer şudur: görünür (göster):

Son örneğimizde üstteki paragrafın metninin alttaki paragrafla örtüşmesinin nedeni budur (varsayılan olarak overflow:visible kullanılmıştır - kapsayıcıya sığmayan içeriği gösterir). Diğer uç noktayı da kullanabiliriz - taşma:gizli. O zaman kabın içine sığmayan her şey web sayfasında gösterilmeyecektir:

Bu CSS özelliğinin diğer iki değeri, kaba sığmayan içeriği kaydırmanıza olanak tanır (zaten incelediğimizde benzer bir şeyi gözlemledik). Dolayısıyla, içerik belirlenen kapsayıcıya güvenli bir şekilde sığsa bile kaydırma, dikey ve yatay kaydırma çubuklarını görüntüler:

Ancak değeri kullanmak çok daha mantıklı olacaktır. Oto Kaydırma çubukları yapmanız gerekiyorsa Taşma için. Bu durumda, tarayıcının kendisi bunların ne zaman ve hangi eksenlerde görüntüleneceğini hesaplayacaktır.

Örneğin, overflow:auto kullanırsak, yalnızca içeriğin kabın sınırları içine sığmadığı eksen boyunca kaydırma yapabileceğiz:

İlkinin metni

İkinci metin

Özetlemek gerekirse Overflow'un oldukça olanak sağladığını söyleyebiliriz. içerik görüntüleme seçeneklerini esnek bir şekilde yapılandırın kabından dışarı çıkması durumunda. Kalan içeriği gösterme (görünür), göstermeme (kesme - gizli) veya kaydırmayı (kaydırma) veya gerektiği gibi kaydırmayı (otomatik) zorunlu hale getirme fırsatına sahip olacaksınız.

Bu kuralın CSS3 ile ilgili yazma çeşitleri de vardır ancak bunlar tüm tarayıcılar tarafından desteklenir, yani güvenle kullanılabilirler. Bireysel eksenlerde (x - yatay, y - dikey) kaydırmayı ayarlamanıza veya ayarlamamanıza olanak tanıyan overflow-x ve overflow-y seçeneklerinden bahsediyorum.

Örneğin, yatay kaydırmanın hiçbir zaman görünmediğinden ve dikey kaydırmanın yalnızca gerektiğinde göründüğünden (içerik uymuyorsa) emin olmanız gerekiyorsa, o zaman Html öğesi için overflow-x:hidden ve overflow- belirtmeniz gerekecektir. y:otomatik . İşte bu, sorun çözülecek çünkü bu kulak hilesi tüm tarayıcılar tarafından destekleniyor.

Yüzde olarak yükseklik ve genişlik - neden bir doktipe ihtiyacınız var?

Şimdi yüzde olarak belirtilen genişliğin nelerden hesaplandığından bahsedelim. Unutmayın, yazının başında dikkatimizi bu konuya yoğunlaştıracağıma söz vermiştim. Aslında CSS genişlik kuralı da burada bir istisna değildir ve tıpkı dolgu ve kenar boşluğu gibi, içerik kabının yatay boyutunun yüzdesi olarak hesaplanır.

İçerik alanının yüksekliğinin yüzde olarak belirtilmesiyle durum biraz daha kafa karıştırıyor. Aynı durumun konteynerin yüksekliği için de geçerli olduğunu varsaymak mantıklı olacaktır. Ancak burada, daha önce olduğu gibi ve şimdi de kabul edilen standartlara göre yaptıkları gibi, düalizmle (iki davranış modeli) karşılaşmaya başlıyoruz. Bu bağlamda daha önce bahsettiğimiz ekran modları konusuna bir kez daha değinmemiz gerekiyor.

Tarihsel olarak standartlar kabul edildikten sonra aynı kaldı çok sayıda eski saf kurallarına göre oluşturulmuş belgeler HTML dili ve onlarla bir şeyler yapılması gerekiyordu. Aynı zamanda gelişiyordu (bir stil işaretleme dili ortaya çıktı ve bazı etiketler ve nitelikler geçerliliğini yitirdi), bu nedenle tarayıcıya bu kodu hangi standartlara göre ayrıştırması gerektiğini bir şekilde göstermek gerekiyordu.

Melkosoft, yeni belgeleri (ortaya çıkan tüm standartları hesaba katan) ve eski belgeleri (çoğunlukla saf Html dışında hiçbir şeyi hesaba katmayan) ayırmak için, o zamanlar yeni ortaya çıkan XML dilinden küçük bir özelliğin kullanılmasını önerdi. . Bu özellik bir hizmet özelliğiydi ve artık doctype bildirimi olarak adlandırılıyor.

Farklı görünebilir (bununla ilgili daha fazla bilgiyi yukarıda belirtilen makalede bulabilirsiniz), ancak bu seçenek her zaman işe yarayacaktır:

Böylece tarayıcı, belgeyi ayrıştırmak için hangi standartları kullanması gerektiğine dair bir işaret aldı. Doctype bildirimi mevcutsa standartlar moduna geçer. Tarayıcı, belge kodunun ilk satırında doktipi bulamazsa (veya yanlış yazılmışsa, bu onun yokluğuyla aynıdır), o zaman sözde hile modu(Alay modu).

Doktipi olmayan bir belge, tarayıcıda sanki çok eski (antik)miş gibi görünecektir. Aynı belgeye bir beyan eklerseniz, tarayıcı eskiliğini yitirecek ve belge koduyla şu anda kabul edilen tüm standartlara göre çalışmaya başlayacaktır.

Ancak antik çağ kavramı çok farklıdır. Örneğin, artık popüler olan bir köşe yazarı ne tür bir antik çağa sahip olabilir? Google Chrome, yalnızca 2008'de ortaya çıkan? IE'nin elbette oldukça zengin bir geçmişi var. Bu nedenle, herhangi bir sürümdeki tüm tarayıcılar, belgeyi bildirim olmadan (tuhaf modda veya hilelerde), eskisiyle aynı şekilde görüntüleyecektir, çünkü bu, temel sürüm olarak kabul edilen sürümdür.

Tarayıcı görüntüleme modları hakkında neden bu kadar uzun süre konuştum? Ancak bu iki mod için içerik alanının yüksekliğini yüzde olarak belirtmek, bu yüksekliğin hesaplanmasına göre çok farklıdır.

İçeriğin bulunduğu alanın yüksekliğini (yüzde olarak) standartlar modunda ayarlamak (belgenin başında doğru belge türü belirtildiğinde), bu içeriğin içinde bulunduğu kabın yüksekliği (tarafından belirtilir) olmadığı sürece hiçbir şekilde mümkün olmayacaktır. yüzde olarak boyunuz dikkate alınmayacaktır).

Doküman kodundan doctype bildirimini kaldırırsak aşağıdaki resmi göreceğiz:

Standartları takip etme modu için (belgenin başında bir bildirim yazılır), önce kabın yüksekliğini (bizim durumumuzda, Div için kap Body etiketi olacaktır) ve ardından tarayıcıyı ayarlamanız gerekir. height:100%'ü doğru şekilde yönetecek:

Sonuç olarak içerik alanının yüksekliğini yüzde olarak ayarlarken tamamen farklı iki yaklaşımla karşılaştık, bu yüzden sorun yaşamamak için kesinlikle yapmanızı tavsiye ederim. doğru belge türü bildirimini belirtin tüm belgelerinizin (web sayfalarının) başında. Standartlara uyma tarzı ile hile yapma tarzı arasındaki farkın çok büyük olacağı başka bir örnek daha var.

Herhangi bir Html öğesinin içerik alanının yüksekliğini ve genişliğini ayarlarsanız ve ayrıca bu etiket için dolgu ve kenarlık genişliğini de belirtirseniz, tuhaflıklar modunda (yazılı bir bildirim olmadan) farklı tarayıcılar bunların hepsi farklı şekillerde yorumlanabilir.

Eski IE 5.5 tarayıcısında dolgu ve çerçeve genişliği, yükseklik ve genişlik yoluyla belirtilen boyutlardan içeriye doğru sayılacaktır. Onlar. elemanın genel boyutu burada belirtilenlere karşılık gelecektir. CSS özellikleri(bu artık kullanılmayan eski bir şemadır).

Geri kalanında modern tarayıcılar Yükseklik ve genişlikte belirtilen ölçülere dolgu ve bordür genişliği eklenecektir. Onlar. bu durumda (doctype olmadan hileli mod), içerik alanının başlangıçta belirtilen boyutları, dahili dolgu ve kenarlık miktarı kadar genişletilecektir.

Belgeye bir yönerge yazarsanız, kesinlikle tüm modern ve eski tarayıcılarda yaklaşımın ikiliğiyle ilgili bu sorunlardan kolayca kaçınılabilir. Bu durumda ve IE 5.5'te dolgu ve kenarlık genişliği, modern CSS standartlarının gerektirdiği şekilde içerik alanı boyutlarına eklenecektir. Bu nedenle kaçınmak için her zaman doktipi kullan.

Sana iyi şanslar! Yakında blog sitesinin sayfalarında görüşmek üzere

İlgini çekebilir

Konum (mutlak, göreli ve sabit) - konumlandırma yöntemleri HTML öğeleri CSS'de (sol, sağ, üst ve alt kurallar)
CSS'de kayan ve temizleyin - blok düzeni araçları
Dolgu, Kenar Boşluğu ve Kenarlık - CSS'de iç ve dış dolgunun yanı sıra tüm kenarlar için kenarlıkları (üst, alt, sol, sağ) ayarlayın
Fare imlecini değiştirmek için Z-endeksi ve CSS İmleç kuralını kullanarak konumlandırma
CSS ne işe yarar, basamaklı stil sayfaları nasıl bağlanır? HTML belgesi ve bu dilin temel sözdizimi
Modern CSS'deki etiket, sınıf, kimlik ve evrensel seçicilerin yanı sıra özellik seçicileri İç ve dış mekanlar için farklı tasarımlar Dış bağlantılar CSS aracılığıyla
Css'deki öncelikler ve bunların Önemli, seçicilerin, kullanıcı ve yazar stillerinin birleştirilmesi ve gruplandırılması nedeniyle artması
CSS'de görüntüle (blok, yok, satır içi) - web sayfasındaki Html öğelerinin görüntülenme türünü ayarlayın
CSS'de boyut birimleri (piksel, Em ve Ex) ve miras kuralları

Tanım

Bir görüntüyü HTML kullanarak yeniden boyutlandırmak için yükseklik ve genişlik özellikleri sağlanır. Değerleri piksel veya yüzde olarak kullanabilirsiniz. Yüzde girişi ayarlanırsa görüntü boyutları ana öğeye (etiketin bulunduğu kapsayıcıya) göre hesaplanır. . Ana kapsayıcı yoksa tarayıcı penceresi onun gibi davranır. Başka bir deyişle genişlik=%100, görselin web sayfasının tüm genişliğine yayılacağı anlamına gelir. Yalnızca bir genişlik veya yükseklik özelliği eklemek görüntünün orantılarını ve en boy oranını korur. Tarayıcı, orijinal yüksekliğini ve genişliğini belirlemek için görüntünün tamamen yüklenmesini bekler.

Web sayfasındaki tüm görsellerin boyutlarını ayarladığınızdan emin olun. Bu, sayfanın biraz daha hızlı yüklenmesini sağlar çünkü tarayıcının, her resmi aldıktan sonra boyutunu hesaplamasına gerek kalmaz. Bu ifade özellikle tablonun içine yerleştirilen görseller için önemlidir.

Görüntünün genişliği ve yüksekliği daha küçük veya daha büyük olarak değiştirilebilir. Ancak dosya boyutu değişmediğinden bu durum resmin yükleme hızını hiçbir şekilde etkilemez. Bu nedenle dikkatli bir şekilde uzaklaştırın... Bu, okuyucular arasında bu kadar küçük bir resmin yüklenmesinin neden bu kadar uzun sürdüğü konusunda kafa karışıklığına neden olabilir. Ancak boyutu artırmak tam tersi bir etkiye yol açar; görüntünün boyutu büyüktür, ancak dosya aynı boyuttaki bir 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

Merhaba, sevgili okuyucu.

Bu CSS öğrenmenin onbirinci dersidir. Bu derste sadece iki basit ama önemli özelliğe bakacağız. Bu özellikler bloğun yüksekliğini ve genişliğini kontrol eder.

Bu dersi incelemeden önce önceki dersleri gözden geçirin:

Teori ve pratik

Son dersimizde blok modelinin ne olduğuna, iç ve dış kenar boşluklarına baktık. Burada sadece iki özelliğe bakacağız: bloğun yüksekliği ve genişliği. CSS'deki yükseklik özellik tarafından ayarlanır yükseklik ve genişlik özelliktir Genişlik . Gerçek bir örnek kullanarak koda bir göz atalım (son dersten bir örnek alalım):

Ve her blok için CSS'de