Senin, 26 September 2011

Belajar CSS bagian 1

Hai guys.... rasanya sudah lama sekali yah saya meninggalkan blog ini *lebay* :) Sekarang saya ingin aktif nge-blog lagi karena kebetulan nih di kampus lagi diajarin cara membuat blog dengan menggunakan HTML, CSS, JQuery dan PHP ^o^

Pastinya udah pada ga sabar kan, langsung aja yuk kita masuk ke materi yang pertama, yaitu cara membuat blog statis menggunakan HTML dan CSS :) Enjoy this guys :P

CSS BOX Model


Box Model merupakan pondasi dari CSS untuk menentukan bagaimana elemen-elemen akan ditampilkan, batasan tertentu untuk menampilkan elemen dan bagaimana elemen berinteraksi satu sama lain. Tiap elemen dalam halaman web dianggap menjadi kotak persegi panjang yang memiliki area content, padding, border dan margin.

Dalam CSS, property width dan Height mengacu pada width dan height dari Content
area. Ketika kita menambahkan padding, border, maupun margins bukan berarti width dan
height dari sebuah elemen akan tetap seperti yang tertulis dalam property css (content area),
melainkan akan menambahkan ukuran keseluruhan dari box element.

Terdapat perbedaan cara pandang antara W3C Box model dengan IE box model. IE tidak
mengikuti standar box model W3C. Browser IE menganggap property Width adalah total
penjumlahan dari area content, padding, dan border. Semakin besar padding atau border yang
kita berikan maka semakin kecil area content-nya.

Contoh Penerapan CSS box model :

Tidak ada komentar:

Posting Komentar