Saat menggunakan CSS untuk tata letak halaman web, ada satu hal yang tidak dapat kita lakukan tanpanya - model kotak. Model kotak, seperti namanya, kotak digunakan untuk menampung sesuatu, dan benda yang ditampungnya merupakan isi dari elemen HTML. Dengan kata lain, setiap elemen HTML yang terlihat adalah sebuah kotak, dan kotak-kotak yang disebutkan di bawah ini setara dengan elemen HTML. Kotak di sini sedikit berbeda dengan kotak pada model kotak. Kotak di sini berbentuk dua dimensi.
Komposisi kotak
Model kotak adalah model berpikir yang sering digunakan dalam desain web. Ini terdiri dari empat bagian, dari dalam ke luar, yaitu konten, padding, batas dan margin, CSS menyediakan serangkaian properti terkait untuk empat bagian ini, dan kinerja kotak dapat diperkaya dengan mengatur properti ini.
ukuran kotak
Ukuran kotak mengacu pada lebar dan tinggi kotak. Kebanyakan pemula mudah salah memahami lebar dan tinggi sebagai properti lebar dan tinggi. Namun, secara default, properti lebar dan tinggi hanya mengatur lebar dan tinggi bagian konten (konten). Lebar dan tinggi sebenarnya kotak dihitung berdasarkan rumus berikut:
Lebar kotak = lebar isi + padding kiri + padding kanan + batas kiri + batas kanan + margin kiri + margin kanan
Tinggi kotak = tinggi konten + padding atas + padding bawah + batas atas + batas bawah + margin atas + margin bawah
Dinyatakan sebagai rumus dengan atribut:
Lebar kotak = lebar + padding-kiri + padding-kanan + border-kiri + border-kanan + margin-kiri + margin-kanan
Tinggi kotak = tinggi + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom
1. Area konten (konten)
Area konten adalah pusat dari keseluruhan model kotak, tempat konten utama kotak disimpan, yang dapat berupa teks, gambar, dan sumber daya lainnya. Area konten memiliki tiga atribut: lebar, tinggi, dan luapan. Atribut lebar dan tinggi digunakan untuk menentukan lebar dan tinggi area konten kotak. Jika terdapat terlalu banyak informasi konten dan melebihi rentang yang ditetapkan oleh area konten, Anda dapat menggunakan atribut overflow untuk mengatur overflow. Bagaimana konten diproses, atribut overflow memiliki empat nilai opsional:
(1) tersembunyi: menunjukkan menyembunyikan bagian yang meluap;
(2) terlihat: menunjukkan bahwa bagian luapan ditampilkan (bagian luapan akan ditampilkan di luar kotak);
(3) gulir: berarti menambahkan bilah gulir ke area konten. Anda dapat melihat seluruh konten area konten dengan menggeser bilah gulir ini;
(4) otomatis: Menunjukkan bahwa browser memutuskan cara menangani bagian overflow.
<!DOCTYPEhtml><html><head><style>div{background:#CFF;}div.box-one{width:100px;height:100px;}</style></head><body><div> <divclass=box-one>Model kotak</div></div></body></html>Hasil yang berjalan: (Dilihat melalui alat debugging browser, Anda dapat membukanya dengan tombol pintas F12, atau klik kanan mouse pada halaman dan pilih opsi "Periksa" di menu pop-up.)
2. Bantalan
Padding adalah ruang antara area konten dan batas. Anda dapat mengatur jarak antara area konten dan batas ke segala arah melalui padding-top, padding-right, padding-bottom, padding-left dan atribut singkatannya padding. Saat mengatur properti latar belakang untuk model kotak, properti latar belakang dapat menutupi area padding.
Contoh:
<!DOCTYPEhtml><html><head><metacharset=utf-8><title></title><style>.a{border:1pxsolid#3C3C3C;width:300px;height:160px;margin:auto;}h2 {latar belakang- color:#0000FF;width:300px;height:50px;color:#FFFFFF;line-height:50px;font-size:20px;margin-top:0px;margin-bottom:0px;}form{width:300px;height :110 px;background-color:#00FFFF;}</style></head><body><divclass=a><h2>Login anggota</h2><formaction=#><div><strongclass=name>Nama: </strong><inputtype=teks/></di v><div><strongclass=name>Email:</strong><inputtype=text/></div><div><strongclass=name>Telepon:</strong><inputtype=text/></div> </form></div></body></html>Hasil berjalan:
3. perbatasan
Perbatasan adalah batas yang mengelilingi area konten dan padding. Anda dapat mengatur gaya batas menggunakan gaya batas, lebar batas, dan warna batas, serta batas properti singkatannya. Atribut border-style adalah atribut border yang paling penting. Jika atribut ini tidak disetel, atribut border lainnya akan diabaikan.
Contoh:
<!DOCTYPEhtml><html><head><metacharset=utf-8><title></title><style>.a{border:1pxsolid#3C3C3C;width:300px;height:180px;}h2{warna latar :#0000FF;lebar:300 piksel;tinggi:5 0px;color:#FFFFFF;line-height:50px;font-size:20px;}form{background-color:#00FFFF;width:300px;height:80px;}div:nth-of-type(1)input{ batas:2pxsolidred;}div:tipe ke-n(2) input{border:3pxdottedblue;}div:nth-of-type(3)input{border:2pxdashedgreen;}</style></head><body><divclass=a><h2>Login anggota</h2>< formaction=#><div><strongclass=name>Nama:</stron g><inputtype=text/></div><div><strongclass=name>Email:</strong><inputtype=text/></div><div><strongclass=name>Telepon:</strong> <inputtype=text/></div></form></div></body></html>Hasil berjalan:
4. Margin
Contoh:
<!DOCTYPEhtml><html><head>metacharset=utf-8><title></title><style>.a{border:1pxsolid#3C3C3C;width:300px;height:180px;margin:auto;}h2{ warna latar belakang :#0000FF;width:300px;height:50px;color:#FFFFFF;line-height:50px;font-size:20px;margin-top:0px;margin-bottom:0px;}form{border:1pxsolidred;width: 300 piksel; jam delapan:110px;warna latar:#00FFFF;}</style></head><body><divclass=a><h2>Login anggota</h2><formaction=#><div><strongclass=name> Nama:</strong><inputtype=text/ ></div><div><strongclass=name>Email:</strong><inputtype=text/></div><div><strongclass=name>Telepon:</strong><inputtype=text/>< /div></form></div></body></html>Hasil berjalan:
Contoh:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><metahttp-equiv=X-UA-Compatiblecontent=IE=edge><metaname=viewportcontent=width=device-width,initial-scale=1.0>< title>Uji untuk melihat efeknya</title></head><style>#box1{width:400px;heigh t:400px;background-color:white;/*Mengatur margin dalam atas, bawah, kiri dan kanan*/padding:50px50px;border:5pxdashedrgb(18,18,19);margin:0auto;ma rgin-top:5px;/*margin-kiri:200px;margin-kanan:200px;margin-bottom:5px;*/text-align:center;}#box2{width:350p x;height:350px;background-color:white;/*Mengatur padding atas, bawah, kiri dan kanan*/padding:20px20px;border:5pxsolidgray;margin:0auto;margi n-top:10px;/*margin-left:20px;margin-right:20px;margin-bottom:20px;*/text-align:center;}#box3{width:300px;h delapan:300px;warna latar:rgb(146,6,6);/*Mengatur padding atas, bawah, kiri dan kanan*/border:5pxsolidrgb(146,6,6);margin:0auto;/*padding: 5px5px;*/margin-top:20px;/*margin-kiri:45px;margin-kanan:45px;margin-bottom:45px;*/text-align:center;}#box4 {width:240px;height:240px;background-color:rgb(146,6,6);/*Menetapkan padding atas, bawah, kiri dan kanan*//*padding:5px5px;*/border:2pxdashedw hite;margin:0auto;margin-top:33px;/*margin-left:33px;margin-right:33px;margin-bottom:33px;*//*Efek yang sama seperti padding* /text-align:center;}#box5{width:215px;height:215px;background-color:rgb(146,6,6);/*Mengatur padding atas, bawah, kiri dan kanan*/border:2pxda shedwhite;margin:0auto;/*padding:2px2px;*/margin-top:12.5px;/*margin-kiri:12.5px;margin-kanan:12.5px;margin -bottom:12.5px;*//*Efek yang sama seperti padding*/text-align:center;}#box6{width:100px;height:100px;background-color:white;/ *Mengatur padding atas, bawah, kiri dan kanan*/border:5pxsolidblack;margin:0auto;/*padding:20px20px;*/margin-top:54.5px;/*margin-left:54.5px; margin-right:54.5px;margin-bottom:54.5px;*//*Efek yang sama seperti padding*/text-align:center;}</style><body><divid=box1><divid=box2><divid =box3><divid=box4><divid=box5><divid=box6></div></div></div></div></div></div></body></html>Hasil berjalan:
