CSS3 box-sizing Özelliği

Örnekte iki kutu yanyana getiriliyor :

Örnek için tıkla

Tanım ve kullanım

CSS3 box-sizing özelliği browsera boyutlandırma (width ve height) özelliklerinin ne içerdiğini anlatmak için kullanılırlar.

Height ve width özelliklerinin varsayılan değerleri olan content-box ve border-box içermelidirler.

Örneğin ; iki kutuyu yan yana getirmek istiyorsunuz diyelim, bunu box-sizing özelliğine “border-box” atayarak başarabilirsiniz. Bu işlem height ve width ölçüleri belirlenen kutunun, tarayıcı tarafından render edilmesini sağlar.

Özellikler : 

  • Default değeri content-box’tır.
  • Miraslama (inherited) özelliği yoktur
  • Animasyon özelliği yoktur
  • JavaScript yazım şekli  : object.style.boxSizing=”border-box”
Css yazım şekli : box-sizing: content-box|border-box|initial|inherit;

Değer (value) Özellikleri  :

  • content-box : Varsayılan değerdir. Sadece Width ve height özellikleri (ve min/max özellikler) içeriğe dahildir. Border, padding yada margin dahil değildir.
  • border-box : İçeriğe width ve height özellikleri (ve min/max özellikleri) dahildir, padding ve border özellikleri içermez ama margin özelliği içerir.
  • initial : Varsayılan değerini atar.
  • inherit : Üyesi olduğun elemanın özelliği atar.

Kaynak  : http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

Muavenet

Web teknolojilerine merak salmış bir bilgisayar mühendisinin yazıları

Bir cevap yazın

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