Menggunakan CSS ke Tempat Elemen HTML

• Mungkin 9, 2024

Peraturan CSS memberikan anda keupayaan untuk meletakkan elemen HTML tepat di mana anda mahu mereka. Anda boleh menyesuaikan bagaimana mereka bertindak balas terhadap elemen lain yang duduk di sekeliling mereka, atau menyembunyikannya sepenuhnya. Berikut adalah pecahan pada sifat peletakan CSS.

Paparan: Harta ini menentukan cara elemen dipaparkan. Menetapkan paparan kepada "tiada" menyembunyikan elemen sepenuhnya, sementara nilai lain boleh mengubah bagaimana elemen bertindak balas kepada sifat dan elemen lain. Sebagai contoh, div ditetapkan untuk dipaparkan sebagai "blok" secara lalai, yang bermaksud ia bertindak sebagai objek segiempat tepat, tetapi anda boleh menggunakan "paparan: inline" untuk memaksa div untuk bertindak seperti perenggan. Atau, anda boleh melakukan sebaliknya dan gunakan "paparan: blok" untuk memaksa perenggan untuk bertindak seperti div.

Kedudukan: Menentukan bagaimana elemen bertindak balas kepada unsur di sekelilingnya. Unsur-unsur menggunakan "kedudukan: statik" secara lalai, yang bermaksud ia dipaparkan dalam rangka kerana ia muncul dalam kod HTML. "Kedudukan: relatif" bermaksud lokasi statik unsur dikira, dan kemudian diimbangi oleh apa sahaja yang anda nyatakan di bahagian "atas" dan "kiri". Elemen halaman lain bertindak seolah-olah elemen relatif masih berada di lokasi statiknya. "Kedudukan: mutlak" unsur mengabaikan lokasi statik mereka, mendasarkan kedudukan mereka semata-mata pada nilai-nilai di bahagian atas, kiri, kanan dan bawah. Di samping itu, unsur-unsur lain akan mengabaikan unsur tersebut (jadi jika anda tidak berhati-hati, anda boleh berakhir dengan beberapa pertindihan yang tidak baik). "Kedudukan: tetap" adalah sama dengan "kedudukan: mutlak" kecuali unsur itu akan memegang tempatnya walaupun pelawat anda menatal halaman.

Kebolehlihatan: Memutuskan sekiranya elemen dipaparkan pada halaman atau tidak. Perbezaan antara "paparan: tiada" dan "keterlihatan: tersembunyi" adalah bahawa dalam kes pertama, elemen halaman lain berkelakuan seolah-olah objek yang tidak kelihatan tidak wujud; dalam yang terakhir, elemen lain akan memegang tempat untuk elemen yang tersembunyi. Jelasnya, tetapan lalai "kelihatan".

Float: Mengeset sama ada elemen cascades ke kiri atau kanan unsur-unsur lain (atau tidak lata sama sekali, yang merupakan lalai). Harta ini sangat membantu dalam mendapatkan unsur relatif diletakkan dengan betul. Anda mesti menetapkan lebar untuk sebarang elemen terapung atau ia tidak akan dipaparkan dengan betul. Selain itu, jika anda menggunakan float untuk satu unsur, anda mungkin mahu menetapkan harta itu untuk semua elemen di sekelilingnya.

Jelas: Harta ini berfungsi bersempena dengan "terapung" harta. Ia memutuskan bagaimana elemen itu akan membiarkan unsur-unsur lain melayang di sekelilingnya - "jelas: kiri" bermaksud bahawa tiada elemen lain boleh terapung di sebelah kiri; "jelas: betul" menghalang sebelah kanan dan "jelas: kedua" bermakna tiada elemen boleh terapung ke kedua-dua belah pihak. Tetapan lalai adalah "jelas: tiada" (bermakna elemen lain boleh terapung ke kedua-dua belah pihak).

Arahan Video: CSS Layouting - #2 Dimensi & Overflow (Mungkin 2024).