cari

Rumah >hujung hadapan web >tutorial css >Cara menggunakan atribut bawah dalam CSS

Cara menggunakan atribut bawah dalam CSS

WBOY
WBOYasal
2024-02-26 21:12:061237semak imbas

Cara menggunakan atribut bawah dalam CSS

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.

  1. 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.
  2. 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;
}

  1. 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!

css auto 继承
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Apakah sintaks atribut mengandungi dalam CSS?Artikel seterusnya：Apakah sintaks atribut mengandungi dalam CSS?

Artikel berkaitan

Lihat lagi