Bütünleşik Biçembentler, 2. Aşama | ||
---|---|---|
Önceki | Yukarı | Sonraki |
Bir elemanın çerçevelerinin konumları ve boyutları bazan belli bir dikdörtgene göreli olur, bu dörtgene elemanın taşıyıcı bloku denir. Bir elemanın taşıyıcı bloku şöyle tanımlanır:
Kök elemanın taşıyıcı bloku (ilk taşıyıcı blok da denir) kullanıcı arayüzü tarafından seçilir.
Diğer elemanlar için, eleman mutlak olarak konumlanmış olmadıkça, taşıyıcı blok, blok seviyesinden en yakın üstsel çerçevenin içerik alanının sınırlarına göre biçimlenir.
Eleman için position: fixed
atanmışsa taşıyıcı blok görüntü alanı tarafından oluşturulur.
Eleman için position: absolute
atanmışsa taşıyıcı blok, position
niteliğinin değeri static'ten farklı bir değere sahip en yakın üstsel tarafından şöyle oluşturulur:
Üstselin blok seviyesinden olduğu durumda, taşıyıcı blok üstselin kenar iç boşluğu sınırı tarafından şekillendirilir.
Üstselin satıriçi seviyeden olduğu durumda, taşıyıcı blok üstselin direction
niteliğine bağlıdır:
Eğer direction
niteliğinin değeri ltr (soldan sağa) ise taşıyıcı blokun üst-solu üstsel tarafından üretilen ilk çerçevenin içerik alanının üst-solu, taşıyıcı blokun alt-sağı ise üstselin son çerçevesinin içerik alanının alt-sağı olur.
Eğer direction
niteliğinin değeri rtl (sağdan sola) ise taşıyıcı blokun üst-sağı üstsel tarafından üretilen ilk çerçevenin içerik alanının üst-sağı, taşıyıcı blokun alt-solu ise üstselin son çerçevesinin içerik alanının alt-solu olur.
Eğer böyle bir üstsel yoksa kök elemanın çerçevesinin içerik alanı taşıyıcı blok haline gelir.
<html> <head> <title>Taşıyıcı blokların gösterilmesi</title> </head> <body id="body"> <div id="div1"> <p id="p1">Bu metin ilk paragraftadır. ...</p> <p id="p2">Bu metin <em id="em1"><strong id="strong1" >ikinci</strong> paragraftadır</em>.</p> </div> </body> </html>
Hiçbir konumlama olmaksızın yukarıdaki belgenin taşıyıcı blokları (T.B.) şöyle oluşur:
Çerçeveyi üreten | Taşıyıcı blokluk yapan |
---|---|
body | ilk T.B. (K.A. bağımlı) |
div1 | body |
p1 | div1 |
p2 | div1 |
em1 | p2 |
strong1 | p2 |
Eğer "div1" için konum belirtirsek:
#div1 { position: absolute; left: 50px; top: 50px }
taşıyıcı blok artık "body" olmaz; kendisi ilk taşıyıcı blok haline gelir (başka konumlu üstsel çerçeve olmadığından).
Eğer "em1" için de konum belirtirsek:
#div1 { position: absolute; left: 50px; top: 50px } #em1 { position: absolute; left: 100px; top: 100px }
taşıyıcı blok tablosu şu hale gelir:
Çerçeveyi üreten | Taşıyıcı blokluk yapan |
---|---|
body | ilk T.B. |
div1 | ilk T.B. |
p1 | div1 |
p2 | div1 |
em1 | div1 |
strong1 | em1 |
"em1"in konumlanmasıyla, konumlu en yakın üstsel çerçeve (yani, "div1" tarafından üretilen çerçeve) "em1" için taşıyıcı blok haline gelir.
width
niteliğiwidth | NİTELİK |
Değer: | uzunluk | yüzdelik | auto | inherit |
İlk değer: | auto |
Uygulama yeri: | yerleştirilmeyen satıriçi seviyeden elemanlar, tablo satırları ve satır grupları hariç tüm elemanlar |
Kalıtsallık: | hayır |
Yüzdelik değerler: | taşıyıcı blokun genişliği ölçüt alınır |
Ortam: | görsel |
Bu nitelik blok seviyesinden elmanlar ve yerleştirilen elemanlar tarafından üretilen çerçevelerin içerik genişliğini belirtir.
Bu nitelik yerleştirilmeyen satıriçi seviyeden elemanlara uygulanmaz. Yerleştirilmeyen satıriçi seviyeden bir elemanın çerçevelerinin genişliği içlerinde oluşturulan (çocukları göreli olarak konumlanmadan önce) içeriğin genişliğidir. Satır çerçevelerine akan satıriçi çerçeveler yeniden oluşturulur. Satır çerçevelerinin genişliği kendi taşıyıcı bloklarına göre verilir fakat yüzen çerçevelerin varlığı bu genişliği daraltabilir.
Bir yerleştirilen elemanın genişliği yerleşik genişlik olup bu niteliğin değeri auto'dan farklıysa kullanıcı arayüzü tarafından ölçeklenebilir.
Değerlerin anlamları:
width
için negatif değer belirtilemez.
p { width: 100px }
Bir elemanın width
, margin-left
, margin-right
, left
ve right
niteliklerinin hesaplanan değerleri üretilen çerçevenin türüne ve diğer elemanlara bağlıdır. İlke olarak, hesaplanan değerler auto uygun bir değerle değiştirilerek elde edilen değerlerle aynıdır, fakat bazı istisnalar vardır. Aşağıdaki durumları ayırdetmek gerekli olabilir:
Satıriçi, yerleştirilen elemanlar
Blok seviyesinden, normal akıştaki yerleştirilmeyen elemanlar
Blok seviyesinden, normal akıştaki yerleştirilen elemanlar
Yüzen, yerleştirilmeyen elemanlar
Yüzen, yerleştirilen elemanlar
Mutlak olarak konumlu, yerleştirilmeyen elemanlar
Mutlak olarak konumlu, yerleştirilen elemanlar
1-6. maddeler göreli konumlama içerir.
width
niteliği uygulanmaz. left
, right
, margin-left
veya margin-right
için belirtilen auto değerlerinin hesaplanan değerleri '0' haline gelir.
left
, right
, margin-left
veya margin-right
için belirtilen auto değerlerinin hesaplanan değerleri '0' haline gelir. Eğer width
ve height
niteliklerinin ikisinin de belirtilmiş değeri auto ise elemanın yerleşik genişliği width
niteliğinin hesaplanan değeridir. width
niteliği için auto belirtildiği halde height
için başka bir değer belirtilmişse width
niteliğinin hesaplanan değeri =(yerleşik genişlik) * ( (hesaplanan yükseklik) / (yerleşik yükseklik) )
.
Eğer left
veya right
için auto verilmişse hesaplanan değerleri '0' olacaktır. Diğer nitelikler arasında aşağıdaki kısıtlamalara uyulmalıdır:
margin-left
+border-left-width
+padding-left
+width
+padding-right
+border-right-width
+margin-right
= taşıyıcı blok genişliği
(Kenar çizgisi biçemi none ise kenar çizgisi genişliği olarak '0' kullanılır.) Eğer yukarıdakilerin hepsi için auto dışında bir değer belirtilmişse değerler "fazla-kısıtlayıcı" denir ve hesaplanan değerlerden biri belirtilmiş değerinden farklı olur. Eğer direction
niteliği ltr (soldan sağa) değerine sahipse margin-right
için belirtilen değer yoksayılır ve eşitliği doğrulayacak değer kullanılır. direction
niteliği rtl (sağdan sola) değerine sahipse margin-left
için belirtilen değer yoksayılır ve eşitliği doğrulayacak değer kullanılır.
auto olarak belirtilmiş sadece tek bir değer varsa hesaplanan değer eşitlikten elde edilir.
Eğer width
için auto belirtilmişse, diğer auto değerleri '0' haline gelir ve width
niteliğinin değeri eşitlikten hesaplanır.
Eğer margin-left
ve margin-right
niteliklerinin ikisi için de auto belirtilmişse bunların hesaplanan değerleri aynı olacaktır.
width
niteliğinin değerinin max-width
niteliğinin değerinden büyük ve min-width
niteliğinin değerinden küçük olamayacağına dikkat ediniz. Özellikle, negatif olamaz. Aşağıda Azami ve asgari genişlikler: min-width ve max-width nitelikleri bölümündeki kurallara bakınız.
Eğer left
veya right
için auto verilmişse hesaplanan değerleri '0' olacaktır. Eğer width
ve height
niteliklerinin ikisinin de belirtilmiş değeri auto ise elemanın yerleşik genişliği width
niteliğinin hesaplanan değeridir. width
niteliği için auto belirtildiği halde height
için başka bir değer belirtilmişse width
niteliğinin hesaplanan değeri =(yerleşik genişlik) * ( (hesaplanan yükseklik) / (yerleşik yükseklik) )
.
Eğer kenar dış boşluklarından biri auto ise hesaplanan değeri yukarıdaki kısıtlara göre verilir. Bundan başka, eğer kenar dış boşluklarının ikisi de auto ise bunların hesaplanan değerleri eşit olur.
Eğer left
, right
, width
, margin-left
veya margin-right
nitelikleri için auto belirtilmişse, bunların hesaplanan değerleri '0' olacaktır.
Eğer left
, right
, margin-left
veya margin-right
nitelikleri için auto belirtilmişse, bunların hesaplanan değerleri '0' olacaktır. Eğer width
ve height
niteliklerinin ikisinin de belirtilmiş değeri auto ise elemanın yerleşik genişliği width
niteliğinin hesaplanan değeridir. width
niteliği için auto belirtildiği halde height
için başka bir değer belirtilmişse width
niteliğinin hesaplanan değeri =(yerleşik genişlik) * ( (hesaplanan yükseklik) / (yerleşik yükseklik) )
.
Bu elemanlar için hesaplanan değerleri saptayan kural:
left
+margin-left
+border-left-width
+padding-left
+width
+padding-right
+border-right-width
+margin-right
+right
= taşıyıcı blok genişliği
(Kenar çizgisi biçemi none ise kenar çizgisi genişliği olarak '0' kullanılır.) Bu kuralın çözümüne aşağıdaki sıraya göre uygulanan bir miktar ikame sayesinde ulaşılır:
direction
niteliğinin değeri ltr (soldan sağa) iken left
için auto belirtilmişse auto değeri, taşıyıcı blokun sol kenarından varsayımsal çerçevenin sol kenar dış boşluk sınırına olan uzaklık ile değiştirilir (eğer position
niteliğinin değeri static olsaydı, varsayımsal çerçeve, elemanın ilk çerçevesi olurdu). (Fakat, çerçevenin gerçekten hesaplanmasından ziyade, kullanıcı arayüzleri olası konum için bir tahminde bulunmakta özgürdürler.) Eğer varsayımsal çerçeve taşıyıcı blokun solunda ise değer negatif olur.
direction
niteliğinin değeri rtl (sağdan sola) iken right
için auto belirtilmişse auto değeri, taşıyıcı blokun sağ kenarından yukarıdaki ile aynı varsayımsal çerçevenin sağ kenar dış boşluk sınırına olan uzaklık ile değiştirilir. Eğer varsayımsal çerçeve taşıyıcı blokun solunda ise değer pozitif olur.
Eğer width
niteliğinin değeri auto ise left
veya right
için belirtilmiş auto değerleri varsa bunların yerine '0' konur.
Eğer left
, right
veya width
(hala) auto ise margin-left
veya margin-right
için belirtilmiş auto değerleri varsa bunların yerine '0' konur.
Bu noktada, margin-left
ve margin-right
niteliklerinin ikisi de hala auto ise iki kenar dış boşluğunu eşitleyen ek bir koşul ile denklem çözümlenir.
Eğer bu noktada geriye sadece bir auto değeri kalmışsa denklem, bu değere eşitlenerek çözümlenir.
Eğer bu noktada değerler "fazla-kısıtlayıcı" ise (direction
niteliğinin değeri rtl ise) left
veya (direction
niteliğinin değeri ltr ise) right
için değer yoksayılır ve denklem bu değer için çözümlenir.
Elemanın bir yerleşik genişliğe sahip olması dışında bu durum önceki durumun benzeridir. İkame sırası şöyledir:
Eğer width
ve height
niteliklerinin ikisi için de auto belirtilmişse elemanın genişliği width
niteliğinin hesaplanan değeridir. Eğer width
için auto ve height
için başka bir değer belirtilmişse width
niteliğinin hesaplanan değeri =
(yerleşik genişlik) * ( (hesaplanan yükseklik) / (yerleşik yükseklik) )
.
direction
niteliğinin değeri ltr (soldan sağa) iken left
için auto belirtilmişse auto değeri, taşıyıcı blokun sol kenarından varsayımsal çerçevenin sol kenar dış boşluk sınırına olan uzaklık ile değiştirilir (eğer position
niteliğinin değeri static olsaydı, varsayımsal çerçeve, elemanın ilk çerçevesi olurdu). (Fakat, çerçevenin gerçekten hesaplanmasından ziyade, kullanıcı arayüzleri olası konum için bir tahminde bulunmakta özgürdürler.) Eğer varsayımsal çerçeve taşıyıcı blokun solunda ise değer negatif olur.
direction
niteliğinin değeri rtl (sağdan sola) iken right
için auto belirtilmişse auto değeri, taşıyıcı blokun sağ kenarından yukarıdaki ile aynı varsayımsal çerçevenin sağ kenar dış boşluk sınırına olan uzaklık ile değiştirilir. Eğer varsayımsal çerçeve taşıyıcı blokun solunda ise değer pozitif olur.
Eğer left
veya right
auto ise margin-left
veya margin-right
için belirtilmiş auto değerleri varsa bunların yerine '0' konur.
Bu noktada, margin-left
ve margin-right
niteliklerinin ikisi de hala auto ise iki kenar dış boşluğunu eşitleyen ek bir koşul ile denklem çözümlenir.
Eğer bu noktada geriye sadece bir auto değeri kalmışsa denklem, bu değere eşitlenerek çözümlenir.
Eğer bu noktada değerler "fazla-kısıtlayıcı" ise (direction
niteliğinin değeri rtl ise) left
veya (direction
niteliğinin değeri ltr ise) right
için değer yoksayılır ve denklem bu değer için çözümlenir.
min-width
ve max-width
niteliklerimin-width | NİTELİK |
Değer: | uzunluk | yüzdelik | inherit |
İlk değer: | Kullanıcı arayüzüne bağlı |
Uygulama yeri: | yerleştirilmeyen satıriçi elemanlar ve tablo elemanları hariç tüm elemanlar |
Kalıtsallık: | hayır |
Yüzdelik değerler: | taşıyıcı blokun genişliği ölçüt alınır |
Ortam: | görsel |
max-width | NİTELİK |
Değer: | uzunluk | yüzdelik | none | inherit |
İlk değer: | none |
Uygulama yeri: | yerleştirilmeyen satıriçi elemanlar ve tablo elemanları hariç tüm elemanlar |
Kalıtsallık: | hayır |
Yüzdelik değerler: | taşıyıcı blokun genişliği ölçüt alınır |
Ortam: | görsel |
Bu iki nitelik biçembent yazarlarına çerçeve genişliklerini belli bir aralıkta sınırlama imkanı verir. Değerlerin anlamları şunlardır:
max-width
için)
Çerçeve genişliği için bir değer yoktur.Aşağıdaki algoritmada width
niteliğinin hesaplanan değeri üzerinde bu iki niteliğin nasıl etki ettiği açıklanmıştır:
Genişlik (min-width
ve max-width
olmaksızın) Genişliklerin ve kenar dış boşluklarının hesaplanması bölümünde açıklandığı gibi aşağıdaki kurallara göre hesaplanır.
Eğer min-width
niteliğinin hesaplanan değeri max-width
niteliğininkinden büyükse max-width
niteliğinin değeri min-width
niteliğinin değerine eşit yapılır.
Eğer hesaplanan genişlik max-width
değerinden büyükse yukarıdaki kurallar tekrar uygulanır fakat bu kez width
için belirtilmiş değer olarak max-width
değeri kullanılarak uygulanır.
Eğer hesaplanan genişlik min-width
değerinden küçükse yukarıdaki kurallar tekrar uygulanır fakat bu kez width
için belirtilmiş değer olarak min-width
değeri kullanılarak uygulanır.
Kullanıcı arayüzü min-width
niteliği için elemandan elemana hatta diğer niteliklere bağlı olarak değişebilen negatif olmayan bir asgari değer tanımlayabilir. Eğer min-width
bu sınırın altındaysa bu açıkça böyle belirtildiğinden veya değerin auto olması sebebiyle aşağıdaki kuralların onu çok küçük yapmasından dolayı böyledir; kullanıcı arayüzü hesaplanmış değer olarak asgari değeri kullanabilir.
height
niteliğiheight | NİTELİK |
Değer: | uzunluk | yüzdelik | auto | inherit |
İlk değer: | auto |
Uygulama yeri: | yerleştirilmeyen satıriçi elemanlar, tablo sütunları ve sütun grupları hariç tüm elemanlar |
Kalıtsallık: | hayır |
Yüzdelik değerler: | metne bakınız |
Ortam: | görsel |
Bu nitelik blok seviyesinden ve yerleştirilen elemanlar tarafından üretilen çerçevelerin içerik yüksekliğini belirtir.
Bu nitelik yerleştirilmeyen satıriçi seviyeden elemanlara uygulanmaz. Yerleştirilmeyen satıriçi seviyeden elemanların çerçevelerinin yüksekliği elemanın (muhtemelen miras alınmış) line-height
değeri ile belirlenir.
Değerlerin anlamları:
Kullanıcı arayüzü kök eleman için taşıyıcı blok seçiminde özgür olduğundan (bkz, Taşıyıcı blokun tanımlanması) kök eleman için yüksekliği örneğin görüntü alanı yüksekliğine göreli bir değer olarak hesaplayabilir. height
niteliği için negatif değerler kuraldışıdır.
p { height: 100px }
100 pikselden daha fazla yüksekliği ihtiyaç duyan paragraflar overflow
niteliğine göre taşacaklardır.
top
, margin-top
, height
, margin-bottom
ve bottom
niteliklerinin hesaplanabilmesi için aşağıda belirtilen çerçeve türlerinin ayırdedilmeleri gerekir:
Satıriçi, yerleştirilmeyen elemanlar
Satıriçi, yerleştirilen elemanlar
Blok seviyesinden, normal akıştaki yerleştirilmeyen elemanlar
Blok seviyesinden, normal akıştaki yerleştirilen elemanlar
Yüzen, yerleştirilmeyen elemanlar
Yüzen, yerleştirilen elemanlar
Mutlak olarak konumlu, yerleştirilmeyen elemanlar
Mutlak olarak konumlu, yerleştirilen elemanlar
Points 1-6 include relative positioning.
top
, bottom
, margin-top
veya margin-bottom
için belirtilen auto değerlerinin hesaplanan değerleri '0' haline gelir. height
niteliği uygulanmaz. İçerik alanının yüksekliği elemanın geçerli yazıtipi yüksekliğine eşitlenir. Bir satıriçi, yerleştirilmeyen çerçevenin düşey kenar çizgisi, iç ve dış boşlukları üstte yazıtipinin altındadır, line-height
değerine göre değildirler. line-height
sadece satır çerçevesinin yüksekliğinin hesabında kullanılır.
Eğer birden fazla yazıtipi yüksekliği kullanılmışsa içerik alanının yüksekliği bu belirtim tarafından tanımlanmaz. Bununla birlikte içerik yüksekliğini en büyük yazıtipi yüksekliğinin belirlemesi önerilir.
top
, bottom
, margin-top
veya margin-bottom
için belirtilen auto değerlerinin hesaplanan değerleri '0' haline gelir. Eğer width
ve height
niteliklerinin ikisinin de belirtilmiş değeri auto ise elemanın yerleşik yüksekliği height
niteliğinin hesaplanan değeridir.
height
niteliği için auto belirtildiği halde width
için başka bir değer belirtilmişse height
niteliğinin hesaplanan değeri =(yerleşik yükseklik) * ( (hesaplanan genişlik) / (yerleşik genişlik) )
.
Blok seviyesinden, normal akıştaki yerleştirilmeyen elemanlar ve yüzen, yerleştirilmeyen elemanlar için yükseklik hesabı tamamen doğru olmaz. Yükseklik hesabı şöyle olmalıdır:
Eğer top
, bottom
, margin-top
veya margin-bottom
için belirtilen auto değerlerinin hesaplanan değerleri '0' haline gelir. Eğer height
için auto belirtilmişse yükseklik, elemanın blok seviyesinden çocukları olup olmamasına ve kenar iç ve dış boşluklarına sahip olup olmamasına göre değişir.
Eğer sadece satıriçi seviyeden çocukları varsa yükseklik, en üstteki satır çerçevesinin tepesi ile en alttakı satır çerçvesinin altı arasındaki mesafeye eşittir.
Eğer blok seviyesinden çocuklara sahipse yükseklik, en üstteki blok seviyesinden çocuk çerçevenin üst kenar çizgisi sınırı ile en alttaki blok seviyesinden çocuk çerçevenin alt kenar çizgisi sınırı arasındaki mesafeye eşittir. Bununla birlikte, eğer eleman sıfırdan farklı üst kenar iç boşluğu ve/veya üst kenar çizgisi genişliğine sahipse içerik, en üstteki çocuğun üst kenar dış boşluk sınırında başlar. Benzer şekilde, eğer eğer eleman sıfırdan farklı alt kenar iç boşluğu ve/veya alt kenar çizgisi genişliğine sahipse içerik, en alttaki çocuğun alt kenar dış boşluk sınırında biter.
Sadece normal akıştaki çocuklar hesaba katılır (yani, yüzen çerçeveler ve mutlak olarak konumlanmış çerçeveler yoksayılır ve göreli olarak konumlanmış çerçeveler göreli konumları yoksayılarak ele alınır). Çocuk çerçevenin bir anonim çerçeve olabileceğini de gözardı etmeyin.
Mutlar olarak konumlanmış elemanlar için düşey boyutlar şu kurala uygun olmalıdır:
top
+margin-top
+border-top-width
+padding-top
+height
+padding-bottom
+border-bottom-width
+margin-bottom
+bottom
= taşıyıcı blok yüksekliği
(Kenar çizgisi biçemi none ise kenar çizgisi genişliği olarak '0' kullanılır.) Bu kuralın çözümüne aşağıdaki sıraya göre uygulanan bir miktar ikame sayesinde ulaşılır:
Eğer top
için auto belirtilmişse auto değeri, taşıyıcı blokun üst kenarından varsayımsal çerçevenin üst kenar dış boşluk sınırına olan uzaklık ile değiştirilir (eğer position
niteliğinin değeri static olsaydı, varsayımsal çerçeve, elemanın ilk çerçevesi olurdu). (Fakat, çerçevenin gerçekten hesaplanmasından ziyade, kullanıcı arayüzleri olası konum için bir tahminde bulunmakta özgürdürler.) Eğer varsayımsal çerçeve taşıyıcı blokun yukarısında ise değer negatif olur.
Eğer height
ve bottom
niteliklerinin ikisi de auto ise bottom
niteliğinin değeri '0' yapılır.
Eğer bottom
veya height
(hala) auto ise margin-top
veya margin-bottom
niteliklerindeki auto değerleri '0' yapılır.
Bu noktada, margin-top
ve margin-bottom
niteliklerinin ikisi de hala auto ise iki kenar dış boşluğunu eşitleyen ek bir koşul ile denklem çözümlenir.
Eğer bu noktada geriye sadece bir auto değeri kalmışsa denklem, bu değere eşitlenerek çözümlenir.
Eğer bu noktada değerler "fazla-kısıtlayıcı" ise bottom
değeri yoksayılır ve denklem bu değer için çözümlenir.
Elemanın bir yerleşik yüksekliğe sahip olması dışında bu durum önceki durumun benzeridir. İkame sırası şöyledir:
Eğer width
ve height
niteliklerinin ikisi için de auto belirtilmişse elemanın yerleşik yüksekliği height
niteliğinin hesaplanan değeridir.
Eğer height
için auto ve width
için başka bir değer belirtilmişse height
niteliğinin hesaplanan değeri =
(yerleşik yükseklik) * ( (hesaplanan genişlik) / (yerleşik genişlik) )
Eğer top
için auto belirtilmişse auto değeri, taşıyıcı blokun üst kenarından varsayımsal çerçevenin üst kenar dış boşluk sınırına olan uzaklık ile değiştirilir (eğer position
niteliğinin değeri static olsaydı, varsayımsal çerçeve, elemanın ilk çerçevesi olurdu). (Fakat, çerçevenin gerçekten hesaplanmasından ziyade, kullanıcı arayüzleri olası konum için bir tahminde bulunmakta özgürdürler.) Eğer varsayımsal çerçeve taşıyıcı blokun yukarısında ise değer negatif olur.
Eğer bottom
auto ise margin-top
veya margin-bottom
için belirtilmiş auto değerleri varsa bunların yerine '0' konur.
Bu noktada, margin-top
ve margin-bottom
niteliklerinin ikisi de hala auto ise iki kenar dış boşluğunu eşitleyen ek bir koşul ile denklem çözümlenir.
Eğer bu noktada geriye sadece bir auto değeri kalmışsa denklem, bu değere eşitlenerek çözümlenir.
Eğer bu noktada değerler "fazla-kısıtlayıcı" ise bottom
değeri yoksayılır ve denklem bu değer için çözümlenir.
min-height
ve max-height
nitelikleriBir elemanın yüksekliğini belli bir aralıkla sınırlamak bazan yararlı olur. bu işlevselliği iki nitelik sağlar:
min-height | NİTELİK |
Değer: | uzunluk | yüzdelik | inherit |
İlk değer: | 0 |
Uygulama yeri: | yerleştirilmeyen satıriçi elemanlar ve tablo elemanları hariç tüm elemanlar |
Kalıtsallık: | hayır |
Yüzdelik değerler: | taşıyıcı blok yüksekliği ölçüt alınır |
Ortam: | görsel |
max-height | NİTELİK |
Değer: | uzunluk | yüzdelik | none | inherit |
İlk değer: | none |
Uygulama yeri: | yerleştirilmeyen satıriçi elemanlar ve tablo elemanları hariç tüm elemanlar |
Kalıtsallık: | hayır |
Yüzdelik değerler: | taşıyıcı blok yüksekliği ölçüt alınır |
Ortam: | görsel |
Bu iki nitelik biçembent yazarlarına çerçeve yüksekliklerini belli bir aralıkta sınırlama imkanı verir. Değerlerin anlamları şunlardır:
max-height
için)
Çerçeve yüksekliği için bir üst sınır olmaz.Aşağıdaki algoritmada height
niteliğinin hesaplanan değeri üzerinde bu iki niteliğin nasıl etki ettiği açıklanmıştır:
Yükseklik (min-height
ve max-height
olmaksızın)Genişliklerin ve kenar dış boşluklarının hesaplanması bölümünde açıklandığı gibi aşağıdaki kurallara göre hesaplanır.
Eğer min-height
niteliğinin hesaplanan değeri max-height
niteliğininkinden büyükse max-height
niteliğinin değeri min-height
niteliğinin değerine eşit yapılır.
Eğer hesaplanan yükseklik max-height
değerinden büyükse yukarıdaki kurallar tekrar uygulanır fakat bu kez height
için belirtilmiş değer olarak max-height
değeri kullanılarak uygulanır.
Eğer hesaplanan yükseklik min-height
değerinden küçükse yukarıdaki kurallar tekrar uygulanır fakat bu kez height
için belirtilmiş değer olarak min-height
değeri kullanılarak uygulanır.
line-height
ve vertical-align
nitelikleribölümünde açıklandığı gibi, kullanıcı arayüzleri satıriçi çerçeveleri bir düşey satır çerçeveleri yığını içinde değerlendirirler. Bir satır çerçevesinin yüksekliği şöyle belirlenir:
Satır çerçevesindeki her satıriçi çerçevenin yüksekliği hesaplanır (Yüksekliklerin ve Kenar dış boşluklarının hesaplanması ve line-height
niteliğine bakınız).
Satıriçi çerçeveler düşey olarak vertical-align
niteliğine göre hizalanırlar.
Satır çerçevesinin yüksekliği en üst çerçevenin tepesi ile en alt çerçevenin altı arasındaki mesafeye eşittir.
Boş satıriçi elemanlar boş çerçeveler üretirler, fakat bu çerçevelerin hala kenar çizgileri, iç ve dış boşlukları vardır ve bunlar içeriği olan elemanlar gibi hesaplamalarda etkili olurlar.
Eğer bir satır çerçevesindeki bütün çerçeveler altlarından hizalanıyorlarsa satır çerçevesinin yüksekliği en uzun boylu çerçevenin yüksekliği olur.
Satıriçi çerçevenin yüksekliği çerçevedeki metnin yazıtipi yüksekliğinden farklı olabileceğinden (yani, line-height
> 1em), oluşturulan harfin altında ve üstünde boşluk olabilir. line-height
niteliğinin hesaplanan yüksekliği ile yazıtipi yüksekliği arasındaki farka satırarası ve bunun yarısına da yarım satırarası denir.
Kullanıcı arayüzleri bir satıriçi çerçeve içinde bir karakteri alt ve üstüne yarım satırarası ekleyerek düşeyde ortalarlar. Örneğin, metin '12pt' yükseklikte iken line-height
değeri '14pt' ise 2 puntoluk bir yükseklik eklenmiş demektir: 1 punto harfin üstüne bir punto da altına. (Bu boş çerçelere de uygulanır; boş çerçevenin sonsuz darlıkta bir harf içerdiği varsayılır.)
line-height
değerinin yazıtipi yüksekliğinden küçük olduğu durumda, satıriçi çerçevenin son yüksekliği yazıtipi yüksekliğinden daha dar olacak ve oluşturulan harf çerçeveden dışarı "pörtleyecektir". Eğer böyle bir çerçeve bir satır çerçevesinin sınırına dokunuyorsa oluşturulan harf bu kez bitişik satır çerçevesine "pörtleyecektir".
Yerleştirilmeyen elemanların kenar çizgileri, iç ve dış boşlukları satıriçi çerçeve yüksekliği hesabına (ve dolayısıyla satır çerçevesi hesabına) girmezlerse de satıriçi çerçevelerin çevresinde yine de oluşturulurlar. Yani, bir satır çerçevesinin yüksekliği içerdiği çerçevelerin dış sınırlarından daha kısaysa artalanların, kenar çizgisinin ve kenar iç boşluğunun renkleri bitişik satır çerçevelerine "pörtleyecektir". Yine de bu durumda, bazı kullanıcı arayüzleri satır çerçevesini kenar çizgisi ve kenar iç boşluklarını "kırpmak" için kullanabilir (yani onları oluşturmaz).
line-height | NİTELİK |
Değer: | normal | sayı | uzunluk | yüzdelik | inherit |
İlk değer: | normal |
Uygulama yeri: | tüm elemanlar |
Kalıtsallık: | evet |
Yüzdelik değerler: | elemanın kendi yazıtipi yüksekliği ölçüt alınır |
Ortam: | görsel |
Eğer nitelik içeriği satıriçi seviyeden elemanlarla oluşturulmuş bir blok seviyesinden eleman için belirtilmişse değer, üretilen her satıriçi çerçevenin "olası en küçük" yüksekliğini belirtir. Asgari yükseklik, blokun taban çizgisinin üstündeki bir asgari yüksekliğe bunun altında bir asgari derinlik eklenerek oluşur ve her satır çerçevesinin, blokun yazıtipi ve yükseklik nitelikleriyle sıfır genişlikte bir satıriçi çerçeve (TEX'de "strut" denen şey) ile başladığı varsayılır.
Eğer nitelik bir satıriçi seviyeden eleman için belirtilmişse değer, eleman tarafından üretilen her çerçevenin kesin yüksekliğini belirtir. (Çerçeve yüksekliğinin height
niteliği ile belirtildiği satıriçi yerleştirilen elemanlar hariç.)
Bu niteliğin değerlerinin anlamları:
div { line-height: 1.2; font-size: 10pt } /* sayı */ div { line-height: 1.2em; font-size: 10pt } /* uzunluk */ div { line-height: 120%; font-size: 10pt } /* yüzdelik */
Bir eleman birden fazla yazıtipiyle oluşturulan bir metin içeriyorsa, kullanıcı arayüzlerinin line-height
değerini en büyük yazıtipi yüksekliğine göre belirlemesi gerekir.
Genellikle, bir paragraftaki tüm satıriçi çerçeveleri için sadece tek bir line-height
değeri olduğu (ve uzun resimler olmadığı) takdirde, yukarıda bahsedilen durum, başarılı satırların taban çizgilerinin line-height
değerinden kesinlikle bağımsız olacağından emin olunmasını sağlar (?). Bir tabloda olduğu gibi, metin sütunlarının farklı yazıtiplerinin hizalanmasını gerektirdiği durumda bu önem kazanır.
Doğrudan çerçevenin yüksekliğini belirlemek için kullanılmış olmasalar bile yerleştirilen elemanların bir font-size
ve bir line-height
nitelikleri vardır: em ve ex değerleri font-size
değerlerine ve vertical-align
için yüzdelik değerler line-height
değerlerine görelidir.
vertical-align | NİTELİK |
Değer: | baseline | sub | super | top | text-top | middle | bottom | text-bottom | yüzdelik | uzunluk | inherit |
İlk değer: | baseline |
Uygulama yeri: | satıriçi seviyeden ve table-cell elemanları |
Kalıtsallık: | hayır |
Yüzdelik değerler: | elemanın kendi line-height değeri ölçüt alınır |
Ortam: | görsel |
Bu nitelik, bir satıriçi seviyeden eleman tarafından üretilen çerçevelerin bir satır çerçevesi içindeki düşey konumunu etkiler. Aşağıdaki değerler, eğer eleman anonim satıriçi çerçeveler üretiyorsa sadece bir satıriçi seviyeden veya sadece bir blok seviyesinden ebeveyn elemana göre anlamlıdır; böyle bir ebeveynin yokluğunda etkili değildirler.
line-height
değeriyle çarpım sonucuna) göre (pozitif ise) yükseltilir veya (negatif ise) alçaltılır. '0%' baseline ile aynı anlama gelir.Kalan değerler üretilen çerçevenin içinde göründüğü satır çerçevesini kıstas alırlar:
Önceki | Yukarı | Sonraki |
Görsel Biçimleme Modeli | Bir Linux Kitaplığı Sayfası | Görsel sonuçlar |