Video: Week 7, continued 2024
Dengan sifat kotak, anda boleh meletakkan objek gaya di mana-mana di dalam tetingkap pelayar, meletakkan objek berbanding objek lain pada halaman, dan memohon peraturan gaya padding dan margin box secara selektif kepada mana-mana atau semua empat sisi objek gaya, seperti kiri dan bawah atau atas, kiri, dan kanan.
Apabila gaya kurang daripada semua empat sisi, pastikan untuk menambah 0 nilai ke sisi yang tidak seharusnya mengandungi nilai, dan bukannya meninggalkannya kosong.
lebar / tinggi: Gunakan atribut lebar dan ketinggian untuk menetapkan dimensi objek atau bekas seperti jadual, sel jadual, atau lapisan. Tetapkan atribut kepada auto untuk memaksa saiz objek untuk memadankan kandungan objek, atau masukkan sebarang nilai, positif atau negatif, dalam px (piksel), pc (picas), pt (mata), dalam (inci) mm (milimeter), cm (sentimeter), em (em), ex (ex), atau% (peratusan).
#rings {height: auto; lebar: 475px;}
float: Gunakan gaya ini untuk mengawal sisi (kiri, kanan, atau tidak) di mana objek lain akan terapung di sekitar objek gaya.
. sellitems {float: right;}
clear: Seringkali digunakan bersama dengan harta float, atribut gaya ini mengendalikan sama ada objek lain boleh muncul di sebelah objek gaya. Pembolehubah untuk atribut ini termasuk kiri, kanan, kedua-duanya, dan tidak ada. Contohnya, apabila lapisan muncul di sisi objek dengan bahagian yang jelas yang ditentukan, objek itu dibongkok ke kawasan di bawah lapisan.
. berita {clear: both;}
padding: Properti ini seperti margin, hanya dengan padding anda memohon ruang tambahan antara objek gaya dan mana-mana sempadan yang mengelilinginya, seperti dengan kalimat atau kata di dalam sel jadual. Tetapkan saiz padding di sebelah kiri, kanan, atas, dan / atau bawah menggunakan nilai, positif atau negatif, dalam px (piksel), pc (picas), pt (mata), dalam (inci), mm (milimeter), cm (sentimeter), em (em), ex (exs), atau% (peratusan).
Apabila saiz seragam digunakan untuk semua empat objek gaya, hanya satu nilai, seperti padding: 10px;, perlu disenaraikan dalam perisytiharan. Jika tidak, tentukan nilai untuk semua empat sisi:
. margin lebar: padat: 10px 0px 10px 0px;}
margin: Gunakan harta margin untuk menambah atau tolak ruang tambahan antara tepi halaman (atau bekas induk) dan objek yang ditata, seperti kawasan sekitar perkataan atau lapisan. Tetapkan saiz margin di sisi kiri, kanan, atas dan / atau bawah menggunakan nilai, positif atau negatif, dalam px (piksel), pc (picas), pt (mata), dalam (inci), mm (milimeter), cm (sentimeter), em (em), ex (exs), atau% (peratusan).
Anda juga boleh menggunakan nilai auto di kedua-dua belah objek gaya untuk memusatkan objek dalam bekas induknya. Apabila nilai seragam digunakan untuk semua empat sisi, hanya satu nilai yang perlu disenaraikan dalam perisytiharan. Jika tidak, tentukan nilai untuk semua empat sisi:
#contact {margin: 0px auto 0px auto;}
Sempadan sifat menentukan warna, gaya, dan lebar sempadan di sekeliling objek gaya. Kerana sempadan boleh pergi ke semua empat sisi objek, setiap sisi boleh mempunyai sifat sempadan yang sama sekali berbeza! Untuk hasil yang terbaik, seperti margin dan padding, pastikan untuk menambah 0 atau tidak ke mana-mana bahagian sampingan yang tidak digayakan:
. tablecell {border-top: 0px none; sempadan kanan: 2px dihiasi # 069; sempadan bawah: 1px pepejal # 09C; border-left: 2px bertitik # 069;}
gaya: Anda boleh menentukan sempadan dalam mana-mana gaya berikut: padat, putus-putus, putus-putus, ganda, alur, rabung, inset, permulaan, atau tidak. Gaya mesti ditentukan bersempena dengan warna dan lebar.
. tablecell {border: 2px dashed # 330066;}
width: Anda boleh menetapkan pilihan untuk ketebalan sempadan ke nipis, sederhana, atau tebal. Atau, untuk pengukuran yang lebih tepat, gunakan sebagai sebarang nilai dalam px (pixel), pc (picas), pt (mata), dalam (inci), mm (milimeter), cm (sentimeter), em (em), ex (ex), atau% (peratusan.Tentukan lebar bersama-sama dengan gaya warna dan sempadan.
tablecell {border: 1px bertitik # 660033;}
warna: Untuk mewarna atribut sempadan, nilai heksadesimal bagi warna yang dikehendaki dan pastikan anda memasukkan simbol nombor (#) sebelum nilai hex, termasuk jenis gaya dan lebar untuk sempadan.
tablecell {border: 5px solid # 003366 <;}
