Sayfanın html öğelerini boyutlandırmak için css genişlik ve yükseklik parametreleri. Teori ve pratik

Merhaba blog sitesinin sevgili okuyucuları. Bugün, içerik alanı için yükseklik ve genişliği kullanarak boyutları nasıl ayarlayabileceğinizi ve bu içeriğin kendisine ayrılan alana sığabileceğinden daha büyük olması durumunda nasıl görüntüleneceğini konuşacağız (gizli css kuralı gizli, kaydırmalı taşma css kuralı) , otomatik).

İlk paragraf metni

İkincinin metni

Çünkü Bu paragraflar için genişlik ve yükseklik belirtilmez, ardından varsayılan olarak tarayıcı bunları Otomatik değerini kendi anlayışına göre hesaplar. Sonuç olarak, paragraflar genişlikte kendilerine sunulan tüm alanı kaplar ve yükseklikleri, içlerinde bulunan 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 sabit bir şekilde kodlayalım (genişlik: 50px):

İlk metin

İkincinin metni

Genel olarak, beklenen oldu - boyut yatay olarak genişlik olarak belirtilen değere düşürüldü: 50px, iyi ve paragrafın yüksekliği yükseklik: otomatik (varsayılan değer) sayesinde hala oluşuyor. Sonuç olarak, tüm metni içerebilecek hale geldi.

Ama şimdi konteynerin yüksekliğini de height: 15px ile sınırlayalım.

Sonuç olarak, metnin küçük paragraf kapsayıcımıza sığmadığını ve bu nedenle komşusunun alanına güvenli bir şekilde girdiğini anladık. Hizmet ettiği bu tür durumlarda içeriğin davranışını kontrol etmektir. taşma kuralı.

Taşma, "taşma" veya başka bir deyişle "içerik taşması" anlamına gelir. Kendisine tahsis edilen alana (konteynere) sığmazsa içeriğe ne olması gerektiğini söyler.

Taşma birkaç geçerli değere sahiptir, ancak varsayılan değer görünür (göster):

Bu nedenle, son örneğimizde, üst paragrafın metni alt paragrafın üzerinden geçiyordu (varsayılan olarak, kapsayıcıya sığmayan içeriği göstermek için overflow: visible kullanıldı). Diğer uç noktayı 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ğin kaydırılmasına izin verir (çalıştığımızda zaten benzer bir şey gördük). Bu nedenle, içerik, belirlenen kapsayıcıya tam olarak sığsa bile kaydırma çubuklarını dikey ve yatay olarak görüntüleyecektir:

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ı ne zaman ve hangi eksenler boyunca göstereceğini hesaplayacaktır.

Örneğin, overflow: auto kullanılması durumunda, yalnızca içeriğin konteynerin sınırları içine sığmadığı eksen boyunca kaydırabileceğiz:

İlk metin

İkincinin metni

Özetle, Overflow'un size oldukça içeriği görüntülemek için seçenekleri esnek bir şekilde yapılandırma konteynerinden dışarı çıkması durumunda. Teslim alınan içeriği (görünür) gösterebilecek, göstermeyebileceksiniz (kesilmiş - gizli) veya gerektiği gibi zorunlu kaydırma (kaydırma) veya kaydırma (otomatik) yapabileceksiniz.

CSS3 ile ilgili bu kuralı yazmak için seçenekler de vardır, ancak bunlar tüm tarayıcılar tarafından desteklenir, yani güvenle kullanılabilirler. Tek tek eksenler (x - yatay, y - dikey) boyunca kaydırmayı ayarlamanıza ya da ayarlamamanıza izin veren overflow-x ve overflow-y seçeneklerinden bahsediyorum.

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

Yüzde olarak yükseklik ve genişlik - neden bir belge türüne ihtiyacınız var?

Şimdi yüzdelik genişliğin neyden hesaplandığından bahsedelim. Unutma, makalenin başında bu konudaki dikkatimizi artıracağıma söz vermiştim. Aslında, CSS genişlik kuralı burada bir istisna değildir ve tıpkı dolgu ve kenar boşluğu gibi, içerik kabının yatay boyutunun bir yüzdesi olarak hesaplanır.

Yüzde olarak belirtilen içerik alanının yüksekliği ile durum biraz daha kafa karıştırıcıdır. Konteynerin yüksekliğinden aynı olduğunu varsaymak mantıklı olacaktır. Ama burada siz ve ben düalizmle (iki davranış modeli) yüzleşmeye başladık - daha önce olduğu gibi ve şimdi kabul edilen standartlara göre yaptıkları gibi. Bu bağlamda, daha önce tartıştığımız görüntüleme modları konusuna bir kez daha değinmeliyiz.

Tarihsel olarak, standartların kabul edilmesinden sonra, saf Html dilinin eski kurallarına göre oluşturulmuş çok sayıda belge vardı ve bunlarla bir şeyler yapılması gerekiyordu. Aynı zamanda, geliştirildi (stil biçimlendirme dili öne çıktı ve bazı etiketler ve öznitelikler güncelliğini yitirdi), bu nedenle tarayıcıya bu kodu ayrıştırmak için hangi standartlara ihtiyaç duyacağını bir şekilde göstermek gerekiyordu.

Yeni belgeleri (ortaya çıkan tüm standartları hesaba katan) ve eskileri (genellikle saf Html'den başka hiçbir şeyi hesaba katmayan) ayırmak için Melkosoft, o zaman ortaya çıkan XML dilinden küçük bir özellik kullanmayı önerdi. . Bu özellik bir hizmetti ve şimdi doctype bildirimi olarak adlandırılıyor.

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

Böylece tarayıcı, belgeyi hangi standartlara göre ayrıştırması gerektiğine dair bir işaret aldı. Doküman türü eklenmişse standart moda geçer. Tarayıcı, ilk belge türü satırındaki belge kodunda bulamazsa (veya yokluğuyla aynı olan yanlış yazılırsa), o zaman sözde hile modu (Alay modu).

Doküman türü olmayan bir belge, tarayıcıda çok eski (eski) gibi görünecektir. Aynı belgeye bir beyanname eklerseniz, o zaman tarayıcı çoktan antika patinasını bırakmış olacak ve şu anda kabul edilen tüm standartlara uygun olarak belge koduyla çalışmaya başlayacaktır.

Ancak antik çağ kavramı çok farklı. Örneğin, yalnızca 2008'de görünen popüler tarayıcı Google Chrome'un ne tür eski şeyleri olabilir? IE'nin elbette zengin bir tarihi var. Bu nedenle, herhangi bir sürümün tüm tarayıcıları, belgeyi bir bildirim olmadan (tuhaflık modunda veya hilelerde) eskisinin yaptığı gibi görüntüler, çünkü bu sürüm temel kabul edilir.

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ğinin (yüksekliğinin) yüzde olarak ayarlanması, bu yüksekliğin hesaplanmasına göre çok farklıdır.

İçerik alanının yüksekliğini (yüzde olarak) standartlar modunda (belgenin başlangıcına doğru belge türü yazıldığında), bu içeriği (sizin tarafınızdan belirtilen) içeren konteynerin yüksekliği dışında ayarlamak mümkün olmayacaktır. yüzde olarak yükseklik göz ardı edilecektir).

Belge kodundan doctype bildirimini kaldırırsak, aşağıdaki resmi göreceğiz:

Standartlara uyma modu için (belgenin başında bir beyan yazılır), önce kabın yüksekliğini ayarlamanız gerekir (bizim durumumuzda, Div için Gövde etiketi kap görevi görür) ve yalnızca daha sonra tarayıcı doğru şekilde yükseklik:% 100:

Sonuç olarak, içerik alanının yüksekliğini yüzde olarak ayarlarken tamamen farklı iki yaklaşımımız var, bu nedenle sorunlardan kaçınmak için size hatasız tavsiye ederim. doğru belge türünü belirtin tüm belgelerinizin (web sayfaları) başında. Standartları takip eden bir rejim ile bir hile rejimi arasındaki farkın çok büyük olacağı başka bir örnek daha var.

Herhangi bir Html öğesi için 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 belirtirseniz, farklı tarayıcılarda tuhaflıklar modunda (yazılı bir bildirim olmadan) her şey farklı şekillerde yorumlanabilir.

Eski IE 5.5 tarayıcısında, dolgu ve kenarlık genişliği, yükseklik ve genişlik ile belirtilen boyutlardan içeriye doğru sayılacaktır. Şunlar. öğenin genel boyutu, bu CSS özelliklerinde belirtilenlerle eşleşecektir (bu, şu anda kullanılmayan, kullanımdan kaldırılmış bir şemadır).

Diğer modern tarayıcılarda, yükseklik ve genişlik olarak belirtilen boyutlara dolgu ve kenarlık genişliği eklenecektir. Şunlar. bu durumda (belge türü olmadan hileli mod) içerik alanının orijinal olarak belirtilen boyutları, dolgu ve kenarlık miktarıyla genişletilecektir.

Belgede bir yönerge yazılırsa, o zaman kesinlikle tüm modern ve eski tarayıcılarda, yaklaşımın ikiliği ile ilgili bu sorunlardan kolayca kaçınılabilir. Bu durumda ve IE 5.5'te, sınırın dolgu miktarı ve genişliği, modern CSS standartlarının gerektirdiği şekilde içerik alanının boyutuyla özetlenecektir. Bu nedenle, kaçınmak için her zaman doctype yaz.

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

İlgini çekebilir

Konum (mutlak, göreceli ve sabit) - HTML öğelerini CSS'de konumlandırma yolları (sol, sağ, üst ve alt kurallar)
CSS'de kaydırın ve temizleyin - blok düzeni araçları
Dolgu, Kenar Boşluğu ve Kenarlık - CSS'de iç ve dış kenar boşluklarının yanı sıra tüm kenarlar için (üst, alt, sol, sağ) kenar boşlukları belirleriz
Fare imlecini değiştirmek için Z-endeksi ve CSS İmleç kuralı ile konumlandırma
CSS ne içindir, basamaklı stil sayfalarını bir Html belgesine nasıl bağlarsınız ve bu dilin sözdiziminin temelleri
Etiket, sınıf (sınıf), Kimlik ve genel seçiciler ile modern CSS'de öznitelik seçiciler CSS aracılığıyla iç ve dış bağlantılar için farklı stil
Önemli, Seçici Birleştirme ve Gruplama, Özel ve Yazar Stilleriyle Css Öncelikleri ve Artırma
CSS'de görüntüleme (engelleme, yok, satır içi) - web sayfasındaki Html öğelerinin görüntülenme türünü ayarlayın
Boyut Birimleri (Piksel, Em ve Ex) ve CSS Kuralları Mirası

Bu uzun eğitim makalesi, görevi blok elemanlarla çalışma yöntemlerini organize etmek olan önemli konulara odaklanacak, okuyucuya elemanların genişliğini ve yüksekliğini hesaplamak için modelin ne için değiştirildiğini, taşmanın nasıl yönetileceğini açıklayacaktır. blok elemanlar ve minimum ve maksimum eleman boyutları ile 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 ayarladığını bulduk ( içerik alanı), metin, resimler ve diğer öğeleri içerebilir.

CSS kutu modelinde, bir öğe için ayarladığınız 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 bir fark vardır. Öğelerin toplam genişliği ve yüksekliği, dolgu genişliğinden ve yüksekliğinden, sınırlardan ve bunlar 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: 150px; / * elemanın genişliğini ayarlayın * / yükseklik: 150px; / * elemanın yüksekliğini ayarlayın * / dolgu: 10px; / * öğenin dolgusunu ayarla * / sınır: 5px; / * elemanın sınırlarını ayarlayın * / }

Bizim durumumuzda, bu durumu kurtarır ve herhangi bir hesaplama yapmak zorunda değiliz ve gelecekte öğelerimiz için gerekli olabilecek herhangi bir değişiklikten korkarlar. 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, aşağıdaki örnekle kazanılan bilgileri pekiştireceğiz:

Content-box özelliğinin değeri varsayılandır ve klasik şemaya göre öğenin 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ğ kenar) \u003d 190 piksel.

Bir sınır kutusu 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ıklarını ve dolgusunu içerir. Çoğu durumda, öğenin son boyutlarını açık hale getirdiği ve yukarıda tartışılan bazı beklenmedik durumları önlediği için sayfalarda kenarlık kutusu değerine sahip bir özelliğin kullanılması tercih edilir.

Örneğimizin sonucu:

Blok elemanlarının taşma kontrolü

Yerleşim sürecinde, bir öğenin içeriğinin öğenin sınırları dışında gösterileceği durumlarla karşılaşacaksınız. Varsayılan olarak tarayıcı, bazı durumlarda görsel hatalara yol açan bu tür içeriği oluşturur (öğe taşması görüntülenir). 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ştirdik dört CSS taşma özelliğinin farklı değerlerinin belirtildiği sabit genişlik ve yükseklikteki bloklar:

• İlk blok (görünür değer) - içerik, öğenin sınırlarının dışında (varsayılan).
• İkinci blok (gizli değer) - Öğeden taş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, bir blok belirli bir eksen boyunca taşarsa yalnızca kaydırma çubuğu otomatik olarak eklenir ( x - yatay veya y - sayfada kalıcı olarak görüntülenmek yerine dikey).

Örneğimizin sonucu.

Açıklama

Blok veya değiştirilebilir elemanların genişliğini ayarlar (örneğin, etiket ). Genişlik; öğe, dolgu ve kenar boşluklarının etrafındaki kenarlıkların kalınlığını içermez.

Tarayıcılar genişlikle farklı çalışır, görüntünün sonucu kullanılan ... Tablo 1 olası seçenekleri gösterir ve ortaya çıkan genişlik.

Tab. 1. Tarayıcılarda genişlik eylemi

	Internet Explorer	Opera 10+, Firefox, Chrome, Safari	Opera 9
Belirtilmedi (Uyumluluk Modu)	İçerik belirtilen genişliği aşarsa, blok içeriğe sığacak şekilde yeniden boyutlandırılır. Aksi takdirde, bloğun genişliği genişlik değerine eşittir.	Her durumda, tarayıcı CSS spesifikasyonuna uyar. Yani blok genişliği, width, padding, margin ve border değerleri eklenerek elde edilir. Belirtilen boyutlara uymuyorsa bloğun içeriği blok üzerinde görüntülenir.	Genişlik, genişlik değerine eşittir.
Geçiş HTML
Katı HTML	Genişlik, width, padding, margin ve border değerleri eklenerek oluşturulur. Belirtilen boyutlara uymuyorsa bloğun içeriği üstte görüntülenir.		Genişlik, genişlik artı dolgu, kenar boşluğu ve kenarlık değerine eşittir. Belirtilen boyutlara uymuyorsa bloğun içeriği üstte görüntülenir.
HTML 5
XHTML

Sözdizimi

genişlik: 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 genişliği şunun genişliğine bağlı olarak hesaplanır ana öğe. Üst öğe açıkça belirtilmezse, tarayıcı penceresi onun üst öğesi olarak kullanılır.

Otomatik Genişliği, öğenin türüne ve içeriğine göre ayarlar. miras alır Üst öğenin değerini devralır.

HTML5 CSS2.1 IE Cr Op Sa Fx

Safari tarayıcısında görüntülendiği gibi bu örneğin sonucu Şekil 2'de gösterilmektedir. bir.

Şekil: 1. Blok genişliği

Nesne Modeli

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

Tarayıcılar

Internet Explorer 6, genişliği yanlış bir şekilde minimum genişlik olarak tanımlar. Tuhaf modda, 8.0 sürümüne kadarki ve dahil olmak üzere Internet Explorer, bir öğenin genişliğini ona dolgu, kenar boşluğu ve kenarlık değerleri eklemeden yanlış hesaplar.

7.0 sürümüne kadarki Internet Explorer devralma değerini desteklemez.

Açıklama

Blok veya değiştirilebilir elemanların yüksekliğini ayarlar (örneğin, etiket ). Yükseklik; öğe, dolgu ve kenar boşluklarının etrafındaki kenarlıkların kalınlığı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 öğ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 | ilgi | oto | miras almak

Değerler

CSS'de kabul edilen herhangi bir uzunluk birimi değer olarak kabul edilir - örneğin, pikseller (px), inç (inç), noktalar (pt) vb. Yüzde gösterimi kullanılırken, bir öğenin yüksekliği, yüksekliğe bağlı olarak hesaplanır. üst öğenin. Üst öğe açıkça belirtilmezse, tarayıcı penceresi onun ü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 2'de gösterilmektedir. bir.

Şekil: 1. height özelliğini uygulama

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.

Tuhaf modda, 8.0 sürümüne kadarki ve dahil olmak üzere Internet Explorer, 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 kadarki Internet Explorer devralma değerini desteklemez.

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

genişlik ve yükseklik - css'deki elemanların genişliği ve yüksekliği

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

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

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

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

Mutlak birimlere ek olarak, elemanların 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 belirtilmezse, boyutlar tarayıcı penceresine bağlı olacaktır.

div (genişlik:% 40;)

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

Birkaç örneğe bakalım.

Sonuç:

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

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

Katman2 (
arkaplan: #eee;
genişlik: 250px;
}

Sonuç:

Gördüğünüz gibi paragrafın genişliği daha dar ve 250 piksele eşit hale geldi ve yükseklik parametresi auto'ya eşit kaldığından metnin sığması için yüksekliği arttı.

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

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

Sonuç:

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

Herhangi bir öğenin genişliğini ve yüksekliğini göreli birimler olarak belirtirken, mümkün olan minimum ve maksimum boyutları belirtmeniz gerekebilir. Sonuçta, örneğin, tarayıcı penceresi yeniden boyutlandırıldığında, öğe boyutu azalabilir ve sitenin okunabilirliği çok azalacak kadar artabilir.

Min-width ve min-heigh niteliklerini kullanarak minimum genişliği ve yüksekliği belirleyebilirsiniz:

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

Benzer stil özellikleri max-width ve max-height, maksimum boyutları ayarlamanıza izin verir:

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

Yükseklik ve genişliğin maksimum ve minimum değerlerini belirtirken, 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ına değer yükseklik ve genişlik parametreleri yalnızca blok etiketleri için anlamlıdırçünkü bu parametreler satır içi öğeler için tarayıcı tarafından 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 (
arkaplan: #eee;
genişlik: 100px;
yükseklik: 100px;
}

Sonuç:

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

İçeriği gizlemek (gizli, görünür) veya kaydırmak (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ı bunları auto değerinin kendi anlayışına göre 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ırlayacağız:

İlk paragraf metni

İkinci paragraf metni

Sonuç:

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

Peki, ş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şunun alanına girdiği ortaya çıktı. Buna göre, metni birinci veya ikinci paragrafta okumak pratik olarak imkansızdır. Var olan bu tür 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 konteynere sığmayan içeriği görüntülemesini söyleyen taşma görünür durumdadır. Sonuç, yukarıdaki örnekte görülebilir.

Kural, kaba 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

En popüler ve mantıklı çözüm, bir konteyner için kaydırma çubukları yapmanız gerekiyorsa, değerdir oto... Bu durumda, tarayıcının kendisi kaydırma çubuklarının ne zaman ve hangi eksenler boyunca görüntülenmesi gerektiğini belirleyecektir:

İlk paragraf metni

İkinci paragraf metni

Sonuç:

Kaydırma çubuklarını özelleştirmek için overflow-x ve overflow-y stili niteliklerini de kullanabilirsiniz; bu, tek tek eksenler boyunca kaydırmanın görünümünü özelleştirmenize olanak tanır. Bu nedenle sorumludur yatay eksenve için dikey eksen.

Bu nedenle, örneğin, bir paragrafta asla görünmemesi için yatay kaydırmaya ve yalnızca gerektiğinde görünmesi için 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.