Belajar CSS : CSS Layout (Tampilan dan width and max-width)

Hallo teman semua, pada kesempatan kali ini saya akan memposting materi tentang CSS Layout Tampilan dan width and max-width. Berikut materinya ..

CSS LAYOUT - PROPERTI TAMPILAN
Properti display merupakan properti CSS yang paling penting untuk mengendalikan tata letak. Tampilan nilai default untuk sebagian besar elemen adalah block atau inline.

Elemen Block-tingkat
Sebuah elemen blok-tingkat selalu dimulai pada baris baru dan mengambil lebar penuh yang tersedia. 
Contoh elemen blok-tingkat :

• <div>
• <h1> - <h6>
• <p>
• <form>
• <header>
• <footer>
• <section>

 
Elemen Inline
Kebalikan dari elemen blok, elemen inline tidak dimulai pada baris baru dan hanya memerlukan lebar.
Elemen inline <span> elemen didalam sebuah paragraf. Contoh elemen inline :

• <span>
• <a>
• <img>

Display: none; umumnya digunakan untuk JavaScript untuk menyembunyikan dan menampilkan elemen tanpa menghapus dan menciptakan  mereka . Elemen <script> menggunakan display:none sebagai default.

Menyembunyikan Elemen-display:none atau visibillity: hidden.
Untuk menyembunyikan element dapat dilakukan dengan menetapkan properti display untuk none. Elemen akan disembunyikan dan halaman yang akan ditampilkanjika elemen tidak ada.
Contoh :

h1.hidden {
    display: none;
}

Untuk menyembunyikan elemen dapat menggunakan visibility: hidden;
Contoh :

h1.hidden {
    visibility: hidden;
}

CSS LAYOUT - WIDTH AND MAX-WIDTH
Sebelumnya kita telah membahas kalau elemen blok mengambil penuh lebar. Mengatur width akan mencegah dan peregangan kelua ke tepi wadah, selanjutnya dapat mengatur margin auto untuk pusat hirizontal dalam wadah. Menggunakan max-width akan meningkatkan penanganan browser dari jendela kecil. Ini peting ketika membuat sebuah situs yang digunakan pada perangkat kecil.
Contoh dari dua div diatas :

div.ex1 {
    width:500px;
    margin: auto;
    border: 3px solid blue;
}

div.ex2 {
    max-width:500px;
    margin: auto;
    border: 3px solid red;
}

Referensi :
http://www.w3schools.com/css/css_display_visibility.asp
http://www.w3schools.com/css/css_max-width.asp 

Sekian dan terimakasih