Rumah > Artikel > hujung hadapan web > Cara menggunakan atribut bawah dalam CSS
Cara menggunakan atribut bawah dalam CSS
- WBOYasal
- 2024-02-26 21:12:061190semak imbas
Sifat bawah dalam CSS digunakan untuk menetapkan kedudukan tepi bawah elemen berbanding dengan elemen induknya. Dengan melaraskan nilai atribut bawah, anda boleh menukar kedudukan menegak elemen. Berikut akan memperkenalkan peranan dan penggunaan atribut bawah secara terperinci, dan memberikan beberapa contoh kod untuk digambarkan.
- Peranan atribut bawah
Atribut bawah digunakan untuk meletakkan elemen berbanding tepi bawah elemen induknya. Ia adalah salah satu sifat kedudukan dalam CSS. Menggunakan atribut bawah membolehkan elemen bergerak di sepanjang tepi bawah dalam arah menegak tanpa menjejaskan saiz elemen itu sendiri. - Cara menggunakan atribut bawah
Nilai atribut bawah boleh menjadi nilai piksel tertentu atau nilai peratusan, atau boleh menjadi auto atau warisan.
-
Menggunakan Nilai Piksel
Anda boleh menggunakan nilai piksel untuk menentukan jarak elemen dari tepi bawah elemen induknya. Sebagai contoh, kod berikut meletakkan elemen 100 piksel dari tepi bawah elemen induknya:.element { position: absolute; bottom: 100px; } -
Menggunakan Nilai Peratus
Selain menggunakan nilai piksel, anda juga boleh menggunakan nilai peratusan untuk menetapkan jarak elemen dari tepi bawah elemen induknya. Nilai peratusan dikira relatif kepada ketinggian elemen induk. Sebagai contoh, kod berikut menetapkan jarak elemen dari tepi bawah elemen induk kepada 50% ketinggian elemen induk:.element { position: absolute; bottom: 50%; } - Menggunakan auto dan mewarisi
auto ialah nilai lalai bagi atribut bawah, menunjukkan bahawa elemen akan dibentangkan mengikut aliran dokumen biasa. Jika anda ingin menetapkan semula sifat bawah kepada nilai lalainya, anda boleh menggunakan auto.
inherit bermaksud elemen tersebut akan mewarisi nilai atribut bawah bagi elemen induk. Contohnya, kod berikut menetapkan nilai atribut bawah elemen untuk mewarisi nilai atribut bawah elemen induk:
.parent {
position: relative;
bottom: 100px;
}
.child {
position: absolute;
bottom: inherit;
}-
Contoh Kod
Berikut ialah contoh kod lengkap yang menunjukkan cara menggunakan atribut bawah untuk meletakkan tepi bawah elemen:<!DOCTYPE html> <html> <head> <style> .container { position: relative; width: 300px; height: 300px; background-color: gray; } .element { position: absolute; bottom: 20px; width: 100px; height: 100px; background-color: red; } </style> </head> <body> <div class="container"> <div class="element"></div> </div> </body> </html>Dalam contoh di atas, elemen bekas dicipta dan ditetapkan kepada kedudukan relatif. Kemudian buat elemen di dalam bekas dan gunakan kedudukan mutlak untuk meletakkan elemen 20 piksel dari tepi bawah bekas dengan menetapkan sifat bawah kepada 20px.
Dengan membaca artikel ini, kami memahami peranan dan penggunaan atribut bawah dalam CSS, dan menyediakan beberapa contoh kod untuk digambarkan. Dengan menggunakan atribut bawah, kami boleh melaraskan kedudukan elemen dalam arah menegak secara fleksibel, menjadikan reka letak halaman lebih bebas.
Atas ialah kandungan terperinci Cara menggunakan atribut bawah dalam CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!