css layouting #3 : box model
TRANSCRIPT
![Page 1: CSS Layouting #3 : Box Model](https://reader030.vdocuments.net/reader030/viewer/2022021506/589ff31b1a28ab46598b503b/html5/thumbnails/1.jpg)
box modelCSS
![Page 2: CSS Layouting #3 : Box Model](https://reader030.vdocuments.net/reader030/viewer/2022021506/589ff31b1a28ab46598b503b/html5/thumbnails/2.jpg)
http://css-tricks.com/the-css-box-model/
• setiap elemen di halaman berada di dalam sebuah box (kotak)
• kita bisa mengatur ukuran dan posisi kotak tersebut • kita bisa memberi warna / gambar sebagai background
kotak tersebut
“
![Page 3: CSS Layouting #3 : Box Model](https://reader030.vdocuments.net/reader030/viewer/2022021506/589ff31b1a28ab46598b503b/html5/thumbnails/3.jpg)
Google Chrome : * { border: 1px solid red }
![Page 4: CSS Layouting #3 : Box Model](https://reader030.vdocuments.net/reader030/viewer/2022021506/589ff31b1a28ab46598b503b/html5/thumbnails/4.jpg)
Mozilla Firefox : 3D View
![Page 5: CSS Layouting #3 : Box Model](https://reader030.vdocuments.net/reader030/viewer/2022021506/589ff31b1a28ab46598b503b/html5/thumbnails/5.jpg)
http://www.w3.org/TR/CSS2/box.html
CSS box model mendefinisikan ‘kotak’ yang dihasilkan oleh sebuah elemen, lalu menampilkannya sesuai dengan format visualnya.
“
![Page 6: CSS Layouting #3 : Box Model](https://reader030.vdocuments.net/reader030/viewer/2022021506/589ff31b1a28ab46598b503b/html5/thumbnails/6.jpg)
http://www.w3schools.com/css/css_boxmodel.asp
CSS box model terdiri dari margin, border, padding dan content. “
![Page 7: CSS Layouting #3 : Box Model](https://reader030.vdocuments.net/reader030/viewer/2022021506/589ff31b1a28ab46598b503b/html5/thumbnails/7.jpg)
http://www.w3schools.com/css/css_boxmodel.asp
![Page 8: CSS Layouting #3 : Box Model](https://reader030.vdocuments.net/reader030/viewer/2022021506/589ff31b1a28ab46598b503b/html5/thumbnails/8.jpg)
CSS Box Model
marginarea transparan di sekitar kotak (di luar border)
paddingarea transparan di dalam kotak (antara content dan border)
borderbatas disekeliling content dan padding
contentkonten sebenarnya di dalam box, bisa berupa teks atau gambar
![Page 9: CSS Layouting #3 : Box Model](https://reader030.vdocuments.net/reader030/viewer/2022021506/589ff31b1a28ab46598b503b/html5/thumbnails/9.jpg)
properti untuk margin, padding & border
margin-top
margin-right
margin-bottom
margin-left
margin
padding-top
padding-right
padding-bottom
padding-left
padding
border-top
border-right
border-bottom
border-left
border
![Page 10: CSS Layouting #3 : Box Model](https://reader030.vdocuments.net/reader030/viewer/2022021506/589ff31b1a28ab46598b503b/html5/thumbnails/10.jpg)
margin
![Page 11: CSS Layouting #3 : Box Model](https://reader030.vdocuments.net/reader030/viewer/2022021506/589ff31b1a28ab46598b503b/html5/thumbnails/11.jpg)
margin
px %
auto
(boleh negatif)
![Page 12: CSS Layouting #3 : Box Model](https://reader030.vdocuments.net/reader030/viewer/2022021506/589ff31b1a28ab46598b503b/html5/thumbnails/12.jpg)
HTML
CSS
![Page 13: CSS Layouting #3 : Box Model](https://reader030.vdocuments.net/reader030/viewer/2022021506/589ff31b1a28ab46598b503b/html5/thumbnails/13.jpg)
CSS
50px
50px
50px
50px
![Page 14: CSS Layouting #3 : Box Model](https://reader030.vdocuments.net/reader030/viewer/2022021506/589ff31b1a28ab46598b503b/html5/thumbnails/14.jpg)
CSS
auto
100px
auto
100pxauto akan membuat elemen berada di tengah
![Page 15: CSS Layouting #3 : Box Model](https://reader030.vdocuments.net/reader030/viewer/2022021506/589ff31b1a28ab46598b503b/html5/thumbnails/15.jpg)
CSS
auto
50px
auto
25px
![Page 16: CSS Layouting #3 : Box Model](https://reader030.vdocuments.net/reader030/viewer/2022021506/589ff31b1a28ab46598b503b/html5/thumbnails/16.jpg)
CSS
20px
50px
40px
30px
![Page 17: CSS Layouting #3 : Box Model](https://reader030.vdocuments.net/reader030/viewer/2022021506/589ff31b1a28ab46598b503b/html5/thumbnails/17.jpg)
paddingbox model
![Page 18: CSS Layouting #3 : Box Model](https://reader030.vdocuments.net/reader030/viewer/2022021506/589ff31b1a28ab46598b503b/html5/thumbnails/18.jpg)
padding
px %
tidak boleh negatif
![Page 19: CSS Layouting #3 : Box Model](https://reader030.vdocuments.net/reader030/viewer/2022021506/589ff31b1a28ab46598b503b/html5/thumbnails/19.jpg)
CSS 50px 20px30px40px
![Page 20: CSS Layouting #3 : Box Model](https://reader030.vdocuments.net/reader030/viewer/2022021506/589ff31b1a28ab46598b503b/html5/thumbnails/20.jpg)
borderbox model
![Page 21: CSS Layouting #3 : Box Model](https://reader030.vdocuments.net/reader030/viewer/2022021506/589ff31b1a28ab46598b503b/html5/thumbnails/21.jpg)
border
width style color
![Page 22: CSS Layouting #3 : Box Model](https://reader030.vdocuments.net/reader030/viewer/2022021506/589ff31b1a28ab46598b503b/html5/thumbnails/22.jpg)
border: width style color;
![Page 23: CSS Layouting #3 : Box Model](https://reader030.vdocuments.net/reader030/viewer/2022021506/589ff31b1a28ab46598b503b/html5/thumbnails/23.jpg)
border: 3px solid black;
width
color
style
![Page 24: CSS Layouting #3 : Box Model](https://reader030.vdocuments.net/reader030/viewer/2022021506/589ff31b1a28ab46598b503b/html5/thumbnails/24.jpg)
style
![Page 25: CSS Layouting #3 : Box Model](https://reader030.vdocuments.net/reader030/viewer/2022021506/589ff31b1a28ab46598b503b/html5/thumbnails/25.jpg)
box sizingbox model
![Page 26: CSS Layouting #3 : Box Model](https://reader030.vdocuments.net/reader030/viewer/2022021506/589ff31b1a28ab46598b503b/html5/thumbnails/26.jpg)
total width dan height element
width + padding + border
height + padding + border
atau
![Page 27: CSS Layouting #3 : Box Model](https://reader030.vdocuments.net/reader030/viewer/2022021506/589ff31b1a28ab46598b503b/html5/thumbnails/27.jpg)
box-sizingsolusi agar padding dan border tidak mempengaruhi width
![Page 28: CSS Layouting #3 : Box Model](https://reader030.vdocuments.net/reader030/viewer/2022021506/589ff31b1a28ab46598b503b/html5/thumbnails/28.jpg)
mange [email protected]