Css

CSS İleri Düzey – CSS Boyut (Dimension)

  Css    24 Nisan 2019
Yorum Yok

Bir elemanın yüksekliğini ve genişliğini kontrol etmek için CSS boyut özellikleri kullanılır.

CSS Boyut Özellikleri

CSS boyut özellikleri sağlayan widthheightmax-widthve max-heightbir (div, resim vb) boyutunu kontrol etmenizi sağlar. Aşağıdaki bölümde, daha iyi bir web sayfası düzeni oluşturmak için bu özellikleri nasıl kullanacağınızı açıklayacaktır. Tüm boyut özelliklerine aşağıdaki tablodan ulaşabilirsiniz.

Özellik Açıklama Değerler
height Elemanların yükseklik değerini ayarlar. auto
length
%
max-height Elemanların maksimum yükseklik değerini ayarlar. none
length
%
max-width Elemanların maksimum genişlik değerini ayarlar. none
length
%
min-height Elemanların minimum yükseklik değerini ayarlar. length
%
min-width Elemanların minimum genişlik değerini ayarlar. length
%
width Elemanların genişlik değerini ayarlar. auto
length
%

Değerlerin Anlamları:

  • auto : auto özelliği kullanıldığında mesafeyi tarayıcı/browser kendi ayarlayacaktır.
  • length : Piksel (px), em , cm ve benzeri uzunluk ölçüleri kullanılabilir.
  • % : Yüzde kullanımı vardır.
  • none : Değer yok anlamındadır.

Genişlik ve Yükseklik Değeri

widthVe heightözelliği, bir elemanın içerik alanının genişliği ve yüksekliği tanımlar. Bu genişlik ve yükseklik, dolguları, kenarlıkları veya kenar boşluklarını içermez.

Bu stil kuralları, div öğeye sabit bir 300 piksel genişlik ve 200 piksel yüksekliğe atar .

Maksimum Yükseklik Değeri

max-height kutunun maksimum içerik yüksekliğini belirtmenizi sağlar. Bu maksimum yükseklik, dolguları, kenarlıkları veya kenar boşluklarını içermez.

max-height Uygulanan bir öğe , height özellik daha büyük bir şeye ayarlanmış olsa bile, belirtilen değerden daha uzun olmayacaktır . Örneğin, height200px’e ve max-height100px’e ayarlanmışsa, elemanın gerçek yüksekliği 100px’tir.

Minimum Yükseklik Değeri

min-heightbloğun içindeki içerik yüksekliğini belirlemenizi sağlar. Bu minimum yükseklik, dolguları, kenarlıkları veya kenar boşluklarını içermez.

min-height Uygulanan bir eleman asla belirtilen minimum yükseklikten daha küçük olmayacaktır. Örneğin, height200 piksel olarak ve 300 piksel min-heightolarak ayarlanmışsa, öğenin gerçek yüksekliği 300 pikseldir.

Maksimum Genişlik Değeri

max-width  bloğun maksimum içerik genişliğini belirlemenizi sağlar. Bu maksimum genişlik, dolgular, kenarlıklar veya kenar boşlukları içermez.

max-width özelliğinin uygulandığı bir eleman , width özelliği daha büyük bir şeye ayarlanmış olsa bile asla belirtilen değerden daha geniş olamaz. Örneğin, width300 piksele max-widthayarlanmış ve 200 piksele ayarlanmışsa, öğenin gerçek genişliği 200 piksel olacaktır.

Minimum Genişlik Değeri

min-width  bloğun içerik genişliği belirlemenizi sağlar. Bu minimum genişlik, dolgular, kenarlıklar veya kenar boşlukları içermez.

min-widthUygulanan bir eleman asla belirtilen minimum genişlikten daha dar olmayacaktır. Örneğin, eğer width300 piksele min-widthayarlanmışsa ve 400 piksele ayarlanmışsa, elemanın gerçek genişliği 400 pikseldir.

Not:min-width özelliği, genellikle eleman bir içeriği, mevcut olsa bile, en azından genişliği en az olmasını sağlamak için kullanılmaktadır. Ancak, içeriği ayarlanan minimum genişliği aşarsa, öğenin normal bir şekilde büyümesine izin verilir.

0 okunma

Etiketler : , , ,

  Benzer Yazılar


  Yorumlar

Bir Cevap Yazın

E-posta hesabınız yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Bu yazıya henüz yorum yapılmamıştır, yazı hakkındaki düşüncelerinizi paylaşmaktan çekinmeyin.