Cara Menggunakan Pilihan Layout dalam CSS Property Map CSS - dummies

Di bahagian atas panel Properties Designer CSS anda mendapati sifat-sifat CSS yang lazim digunakan untuk membuat susun atur halaman. Anda menggunakan pilihan ini untuk menentukan ketinggian, lebar, penjajaran, kedudukan, dan jarak. Tetapan ini sesuai untuk membuat susun atur halaman dengan gaya kelas dan ID untuk melakukan perkara seperti menyusun imej dan tag kedudukan untuk membuat susun atur multicolumn.

Anda boleh menggunakan pilihan Layout dalam panel Properties CSS untuk menetapkan nilai-nilai ini:

• Lebar: Tentukan lebar bagi mana-mana unsur yang boleh dimensi dimensi, seperti tag. Pilihan saiz ialah piksel (px), titik (pt), pica (pc), peratus (%), em, rem, bekas, dan ch.

• Ketinggian: Nyatakan ketinggian untuk sebarang elemen yang boleh dimensinya ditentukan.

  • Min dan Max Lebar: Tetapkan lebar minimum dan maksimum untuk tag dan elemen blok lain. Pilihan ini berguna apabila anda menentukan lebar sebagai peratusan tetingkap penyemak imbas. Misalnya, anda boleh menetapkan lebar reka bentuk pada 80 peratus daripada tetingkap penyemak imbas, dan kemudian tetapkan Lebar Maksimum 1000 px untuk mengelakkan susun atur anda daripada semakin lebar daripada 1000 piksel.

  • Ketinggian Maks dan Maksima: Nyatakan tahap minimum dan maksimum untuk tag dan elemen blok lain.

  • Margin: Tetapkan jumlah ruang di sekeliling elemen. Margin boleh digunakan untuk membuat ruang di antara tepi elemen dan elemen lain pada halaman, seperti antara imej dan teks atau di antara dua tanda. Anda boleh menetapkan margin secara berasingan untuk bahagian atas, kanan, bawah, dan kiri. Padding diukur dalam piksel, mata, inci, sentimeter, milimeter, picas, ems, bekas, dan peratusan.

  • Padding: Menetapkan jumlah ruang di dalam sempadan elemen. Sebagai contoh, anda boleh menggunakan padding untuk membuat ruang di antara sempadan tag dan isinya. Anda boleh menetapkan padding secara berasingan untuk bahagian atas, kanan, bawah, dan kiri. Padding diukur dalam piksel, mata, inci, sentimeter, milimeter, picas, ems, bekas, dan peratusan.

    Menetapkan padding dan jarak margin boleh menjadi rumit. Apabila anda menambah margin dan padding ke elemen, seperti imej atau tag, anda meningkatkan saiz keseluruhan unsur itu dan jumlah ruang yang diperlukan dalam susun atur.

• Posisi: Pilihan Posisi, tersedia dari bahagian bawah bahagian Layout panel Properties, mengubah cara letak unsur pada halaman. Posisi secara dramatik boleh mengubah cara elemen-elemen peringkat blok (seperti jadual, senarai, pengepala, perenggan, dan tag) muncul dalam penyemak imbas.

  • Pewarisan: Anda tidak perlu menentukan opsyen lalai ini. Kecuali pilihan lain dipilih, setiap unsur mewarisi kedudukan elemen induknya.

  • Statik: Letakkan kandungan di lokasinya dalam aliran dokumen. Secara lalai, semua elemen HTML yang boleh diposisikan adalah statik.

  • Mutlak: Gunakan koordinat atas dan kiri untuk mengawal kedudukan elemen berbanding sudut kiri atas tetingkap pelayar atau sudut kiri sebelah kiri elemen yang mengandungi elemen.

  • Tetap: Posisi unsur relatif ke sudut kiri atas penyemak imbas. Kandungan unsur yang menggunakan kedudukan tetap tetap malar walaupun pengguna menatal ke bawah atau menyeberang halaman.

  • Relatif: Gunakan kedudukan relatif kepada titik di mana anda memasukkan elemen ke dalam halaman atau relatif kepada bekasnya.

    

  • Float: Align elemen, seperti imej dan tag, ke kiri atau kanan halaman atau bekas lain yang menyebabkan teks atau elemen lain untuk membungkusnya. Klik ikon di medan Float untuk menentukan empat pilihan berikut: Menerangkan, Kanan, Kiri, atau Tiada.

  • Jelas: Mencegah kandungan terapung daripada bertindih kawasan ke kiri atau kanan, atau ke kedua-dua belah elemen. Pilihan ini berguna apabila elemen terapung, seperti tag yang digunakan untuk membuat bar sisi, bertindih satu lagi elemen peringkat blok, seperti tanda yang digunakan untuk membuat footer halaman.

  • Limpahan-x dan -y: Beritahu penyemak imbas cara memaparkan kandungan elemen jika bekas, seperti tag, tidak dapat menyesuaikan keseluruhan ketinggian atau lebar elemen. Opsyen limpahan adalah

  • Terlihat: Simpan kandungan, seperti imej atau teks, dapat dilihat, walaupun ia melebar di luar ketinggian yang ditetapkan atau lebar bekas.

  • Tersembunyi: Potong kandungan jika ia melebihi saiz bekas. Pilihan ini tidak menyediakan bar skrol.

  • Tatal: Tambah bar skrol ke bekas tidak kira sama ada kandungannya melebihi saiz elemen.

  • Auto: Jadikan bar skrol muncul hanya apabila kandungan bekas melebihi sempadannya.

• Paparan: Tunjukkan jika, atau bagaimana, untuk menjadikan elemen dalam penyemak imbas. Sebagai contoh, anda menukar kedudukan senarai yang tidak disusun dari mendatar ke menegak dengan memilih Inline atau menyembunyikan unsur, menjadikannya tidak kelihatan, dengan memilih Tiada. Anda boleh menggunakan pilihan Paparan dengan bahasa skrip untuk menukar paparan elemen secara dinamik.

• Keterlihatan: Kawal sama ada penyemak imbas memaparkan elemen. Pilihan Keterlihatan ialah

  • Pusaka: Unsur mempunyai keterlihatan elemen di mana ia terkandung (lalai).

  • Terlihat: Unsur dipaparkan.

  • Tersembunyi: Unsur tidak dipaparkan.

  • Tutup: Untuk digunakan dengan jadual HTML. Runtuh boleh digunakan untuk mengalih keluar lajur atau baris tanpa menjejaskan keseluruhan susunan jadual.

• Z-Index: Mengawal kedudukan elemen pada koordinat Z, yang mengawal susunan unsur-unsur yang berkaitan dengan satu sama lain.Unsur-unsur yang bertambah tinggi bertindih unsur-unsur yang lebih rendah.

• Opacity: Kawalan tahap opacity untuk elemen dari 0. 0 (sepenuhnya telus) hingga 1. 0 (penuh legap). Contohnya, jika anda masuk. 5 dalam bidang kelegapan, kelegapan elemen akan dikurangkan kepada 50 peratus.