Ders 9: kutu modeli

CSS kutu modeli HTML elemanları için üretildikten kutuları açıklanır. Kutu modeli de her öğe için ayarlama Kenar çizgileri, dolgu ve içerik ile ilgili detaylı seçenekler içerir. Aşağıdaki şemada kutu modelini inşa nasıl kullanıldığını gösterir:

CSS kutu modeli

Yukarıdaki resimde bakmak oldukça teorik görünebilir, bu yüzden bir başlık ve bazı metin ile gerçek bir durumda modelini kullanmaya çalışalım. Bizim örneğin HTML (İnsan Hakları Evrensel Bildirgesi) 'dir:

	  	<h1> Madde 1: </ h1>    	<p> Bütün insanlar hür doğarlar  	haysiyet ve haklar bakımından eşit.  	Akıl ve vicdana sahiptirler  	ve birbirlerine karşı hareket etmesi  	kardeşlik </ p> ruhu  	  	

Bazı renk ve font-bilgi ekleyerek örnek şöyle sunulabilir:

: Örneğin iki unsur içerir <h1> ve <p> . Iki öğe için kutu modeli aşağıdaki gibi gösterilebilir:

Bu biraz karışık görünse bile, resimde her HTML-element kutuları ile çevrilidir gösterir. Biz CSS kullanarak ayarlayabilirsiniz Kutuları.

Farklı kutulara düzenleyen özellikleri şunlardır: dolgu , kenar ve sınır . Önümüzdeki iki ders tam olarak bu üç özellik anlaşma ile:

'
• Ders 10: kutu modeli - marjı ve dolgu
'
• Ders 11: kutu modeli - sınır
'

Eğer bu iki ders bitirdiğinizde, size kutu modeli hakim ve düzeni HTML tabloları kullanarak eski moda daha belgelerinizi çok daha ince ve daha hassas mümkün olacak.

Özet

Bu derste kutusu modeli tanıtıldı. Aşağıdaki üç derste kutusunda modeli öğeleri oluşturmak ve kontrol etmek için nasıl daha yakından bakacağız.