Web Tasarım Dersleri Kutu Modeli (box model)

Web Tasarım Dersleri Kutu Modeli (box model), Web Tasarım Dersleri Kutu Modeli, Kutu Modeli, Box Model, Box Model CSS, CSS Kutu Modeli, CSS Margin, CSS Border, CSS Padding, CSS Content Width, CSS Visible Width, CSS Dersleri, CSS Kenarlık Çizgisi, CSS Kenar Sitili, CSS Kenar Çizgi Sitili, CSS Border Style, CSS Dış çizgi özellikleri, CSS Liste Biçimleme, Web Tasarım Dersleri, Web Tasarım, Web Tasarım Nasıl Yapılır, Web Tasarım Yapmak İstiyorum, Özgün Web Tasarımı, HTML Web Tasarımı, HTML5 Web Tasarımı gibi sorgular yazarak web sitemize ulaşan değerli ziyaretçimiz web sitemize hoş geldiniz.

Web Tasarım Derslerimizin Bugünkü Konusu CSS Kutu Modeli yani CSS Box Model

Web Tasarım Dersleri Kutu Modeli (box model)

Web Tasarım Dersleri Kutu Modeli (box model)

CSS için en temel yapılandırma mantığı kutu modelidir. Bu mantığın öğeleri biçimlendirirken sayfa üzerinde neyi nereye ve nasıl konumlandıracağımızı belirlerken işimizi ne kadar kolaylaştırdığını ilerleyen satırlarda birlikte göreceğiz. Bu yaklaşımı sayfamızda istediğimiz düzeni temin edebilmek için gereken bir formül gibi de düşünebiliriz.

Web Tasarım Dersleri Kutu Modeli (box model)

Web Tasarım Dersleri Kutu Modeli (box model)

İç içe katmanlardan oluşan bu yapı adeta  bir yerin haritadaki konumunu bulmamızı sağlayan koordinatlar gibidir ve biçimlendirmeye yardımcı olmaktadır.

İçten dışa doğru modeli inceleyecek olursak en içte içerikler yer alır ve bu kısmın konumlandırması width özelliği ile ifade edilir. Onun dışındaki padding katmanı, içeriğinizi border değerine göre konumlandırmak içindir. Yani içerik ile border arasındaki boşluğu ifade eder. Transparan bir yapıdadır.

İçeriğinize çerçeve vermek için kullanacağınız border değeri ise siz öyle ayarlamadıkça transparan değildir. Daha dıştaki katman olan margin (kenar boşluğu)  değeri ise öğenizi komşu diğer öğelere göre hizalamak yani konumlandırmak için kullanılır. Kenar boşluğu(margin) değeri de transparandır.

padding: içerik ile border arasındaki içeriği kuşatan alandır.

border: içeriğinize çerçeve vermek için kullanılır.

margin: border çizgisinin etrafını kuşatan alandır.

Not: Bir öğenin asıl uzunluk değeri öğe içeriğinin genişlik (width) değeri ile beraber soldan sağa doğru sayacak olursak sol-margin, sol-border, sol-padding, sağ-padding, sağ-border ve sağ-margin değerlerinin toplamına eşit olacaktır.

Blok seviyesi öğesi(Block-level element): Blok seviyesi öğesinin formatını bir kutu gibi düşünebiliriz. İçinde bir başka kutu yada satır içi öğesi bulunabilir. Bir başlık (örn: h6) bir paragraf (p) bir pargaraf (p) yada bir liste (li) ve benzeri öğeler yani adı üstünde yeni bir blok oluşturan öğeler bu gruba girerler.

Satıriçi seviyesi öğesi (Inline element): Bir satıriçi seviyesi öğesini bir blok seviyesi öğesinin aksine blok şeklinde değil de bir içerik gibi düşünebiliriz. (örn:a, strong, span… vb) Aslında işin mantığı gayet basittir. İsterseniz bu noktada daha fazla tanımlamalar yapmak yerine örneklerle konuyu geliştirelim.

Bir sonraki makalemizde Box Model kenarlık (border), border style, border width, border color gibi konuları işleyeceğiz. Bir sonraki makalemizde görüşmek üzere…

Facebook Sayfamız

İnstagram Sayfamız

Web Tasarım Sayfamız

İletişim Sayfamız

Web Tasarım Dersleri Kutu Modeli (box model)
Bu yazıya oy ver

By | 2017-07-20T23:04:36+00:00 Aralık 4th, 2016|Categories: BLOG, Kategoriler, Web Tasarım Dersleri|Tags: , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , |0 Comments

About the Author:

 
%d blogcu bunu beğendi:
EV SSL