Rumah Media Sosial Kotak dan Sempadan Sifat Cascading Style Sheets (CSS) - dummies

Kotak dan Sempadan Sifat Cascading Style Sheets (CSS) - dummies

Video: Week 7, continued 2025

Video: Week 7, continued 2025
Anonim

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 <;} 

Kotak dan Sempadan Sifat Cascading Style Sheets (CSS) - dummies

Pilihan Editor

5 Perkara yang boleh dilakukan oleh GoPro Camera - dummies

5 Perkara yang boleh dilakukan oleh GoPro Camera - dummies

Apa yang boleh dilakukan oleh GoPro? Inilah soalan yang lebih relevan: Apa yang anda mahu lakukan? Meminta soalan ini lebih seperti menanyakan diri anda tentang keinginan dan hasrat anda sendiri untuk rakaman video yang unik. Apabila anda menentukan apa yang anda ingin tangkap, semua yang anda perlu lakukan ialah menyambungkan kamera ke gunung yang sesuai ...

Pengaturan & Pintasan dSLR Untuk Menipu Cheat Sheet - dummies

Pengaturan & Pintasan dSLR Untuk Menipu Cheat Sheet - dummies

Anda mempunyai refleks kanta tunggal digital yang besar (dSLR ) kamera dan mahu menangkap beberapa gambar indah masa-masa hidup anda. Untuk sepenuhnya menguasai dSLR anda dan membuat gambar yang menarik, anda mesti menceburkan diri ke dunia baru yang berani yang melibatkan membuat keputusan tentang mod penangkapan. Mengetahui panjang fokus apa yang digunakan dalam ...

Pilihan Editor

Bagaimana Menggunakan Lapisan Masker Gradient dan Brush Masker di Photoshop CS6 - lapisan masker

Bagaimana Menggunakan Lapisan Masker Gradient dan Brush Masker di Photoshop CS6 - lapisan masker

Lapisan lapisan di Photoshop CS6 membolehkan anda secara beransur-ansur berus dalam ketelusan dan kelegapan pada asas pixel selektif. Dua alat pelapis lapisan - Alat Gradien dan Brush - lebih kerap digunakan berbanding yang lain: Alat Gradien: Menetapkan alat ini kepada kecerunan linear hitam ke putih atau putih ke ...

Cara Menggunakan Kuler untuk Cari dan Kongsi Tema Warna di Photoshop CS6 - dummies

Cara Menggunakan Kuler untuk Cari dan Kongsi Tema Warna di Photoshop CS6 - dummies

Sumber yang tersedia untuk Adobe Photoshop Creative Suite 6 adalah luas. Kuler adalah komuniti dalam talian yang menyediakan tema warna untuk anda menyemak imbas, memuat turun, membuat, mengedit, dan memuat naik untuk berkongsi dengan orang lain. Gunakan tema ini apabila membuat projek cetak grafik atau laman web. Apa yang anda perlukan ialah sambungan Internet dan Adobe ID. Di sini ...

Cara Menggunakan Kata Kunci untuk Photoshop CS6 Files dalam Bridge - dummies

Cara Menggunakan Kata Kunci untuk Photoshop CS6 Files dalam Bridge - dummies

Kata kunci adalah label deskriptif yang anda lampirkan ke fail di Bridge. Mereka membantu untuk mengkategorikan imej Photoshop CS6 anda, membolehkan anda lebih cekap dan cepat mencari fail yang anda inginkan. Berikut adalah downside untuk membuat dan menggunakan kata kunci: Untuk membuat kata kunci baru (folder kategori yang mengandungi kata kunci): Klik ikon tanda tambah (+) ...

Pilihan Editor

Dengan Touch dengan Nota Reka bentuk - dummies

Dengan Touch dengan Nota Reka bentuk - dummies

Nota reka bentuk adalah sesuai untuk berkomunikasi dengan pemaju lain yang bekerja pada Laman web, tetapi tidak dalam jarak menjerit. Ciri Dreamweaver ini berfungsi seperti tag komen (kod HTML yang membolehkan anda memasukkan teks dalam halaman yang tidak akan dipaparkan dalam penyemak imbas) tetapi dengan privasi lebih banyak. Ramai pemaju menggunakan ...

Memenuhi Dreamweaver CS3 Common Insert Bar - dummies

Memenuhi Dreamweaver CS3 Common Insert Bar - dummies

Jangan berfikir bahawa toolbar Dreamweaver CS3 Common Insert biasa dan biasa. Ia hanya dipanggil "umum" kerana ia menawarkan perintah memasukkan yang paling kerap digunakan kerana ia adalah yang paling berguna. Dengan bilah alat yang ditunjukkan di sini, anda boleh memasukkan segala-galanya dari pautan e-mel kepada tarikh kepada mana-mana media yang ingin anda letakkan ...

Gambaran Keseluruhan Alignment Imej dalam Adobe CS5 Dreamweaver - dummies

Gambaran Keseluruhan Alignment Imej dalam Adobe CS5 Dreamweaver - dummies

Penjajaran imej dan teks bersebelahan mereka di Adobe Suite Creative 5 (Adobe CS5) Dreamweaver adalah mudah, tetapi pilihan yang ada mungkin membuat kelihatan terlalu rumit. Imej dan teks bersebelahan mereka duduk pada garis dasar yang sama sebagai lalai, memaksa teks berjalan dalam satu baris ke kanan imej. Untuk ...