Download as PDF, PPTX
Uploaded bySandhika Galih
CSS Layouting #3 : Box Model
Dokumen ini membahas tentang CSS Box Model, yang merupakan struktur dasar untuk setiap elemen di halaman web, terdiri dari margin, border, padding, dan content. Elemen dapat diatur ukurannya, posisinya, serta diberikan warna atau gambar sebagai latar belakang. Selain itu, terdapat berbagai properti CSS untuk mengatur margin, padding, dan border elemen.
CSS Layouting #3 : Box Model
- 1.
- 2. http://css-tricks.com/the-css-box-model/ • setiap elemendi halaman berada di dalam sebuah box (kotak) • kita bisa mengatur ukuran dan posisi kotak tersebut • kita bisa memberi warna / gambar sebagai background kotak tersebut “
- 3. Google Chrome :* { border: 1px solid red }
- 4. Mozilla Firefox :3D View
- 5. http://www.w3.org/TR/CSS2/box.html CSS box modelmendefinisikan ‘kotak’ yang dihasilkan oleh sebuah elemen, lalu menampilkannya sesuai dengan format visualnya. “
- 6. http://www.w3schools.com/css/css_boxmodel.asp CSS box modelterdiri dari margin, border, padding dan content. “
- 7.
- 8. CSS Box Model margin areatransparan di sekitar kotak (di luar border) padding area transparan di dalam kotak (antara content dan border) border batas disekeliling content dan padding content konten sebenarnya di dalam box, bisa berupa teks atau gambar
- 9. 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
- 10.
- 11.
- 12.
- 13.
- 14. CSS auto 100px auto 100pxauto akan membuatelemen berada di tengah
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22. border: width stylecolor;
- 23. border: 3px solidblack; width color style
- 24.
- 25.
- 26. total width danheight element width + padding + border height + padding + border atau
- 27. box-sizing solusi agar paddingdan border tidak mempengaruhi width
- 28.