Rumah > Artikel > hujung hadapan web > Bagaimana untuk menetapkan ketinggian dalam css
Bagaimana untuk menetapkan ketinggian dalam css
- PHPzasal
- 2023-04-06 12:44:123835semak imbas
CSS ialah teknologi bahagian hadapan yang sangat penting Kami sering menggunakan CSS untuk melaraskan gaya halaman web, seperti fon, warna, reka letak, dsb. Dalam reka letak halaman web, menetapkan ketinggian elemen juga merupakan teknik yang biasa digunakan. Artikel ini memperincikan cara menggunakan CSS untuk menetapkan ketinggian elemen.
1. Cara menetapkan ketinggian elemen
- Gunakan unit px
Gunakan atribut ketinggian CSS height untuk menetapkan ketinggian daripada elemen tersebut. Antaranya, unit yang paling biasa ialah piksel (px), contohnya:
div {
height: 200px;
}
Kod di atas bermaksud menetapkan ketinggian elemen <div> kepada 200 piksel, supaya halaman boleh dilaraskan dengan menetapkan ketinggian susun atur elemen.
- Gunakan unit peratusan
Selain unit piksel, anda juga boleh menggunakan unit peratusan, contohnya:
div {
height: 50%;
}
Kod di atas bermaksud bahawa <div> Ketinggian elemen ditetapkan kepada 50% daripada bekas yang berada di dalamnya. Contohnya, jika ketinggian bekas ialah 400 piksel, maka ketinggian elemen <div> ialah 200 piksel. Kaedah ini sering digunakan dalam reka letak responsif untuk melaraskan ketinggian elemen secara automatik berdasarkan saiz bekas.
- Gunakan unit vh
Selain piksel dan peratusan, anda juga boleh menggunakan ketinggian tetingkap (vh) sebagai unit. Kaedah ini serupa dengan peratusan, tetapi tidak dipengaruhi oleh lebar bekas. Contohnya:
div {
height: 50vh;
}
Kod di atas bermaksud menetapkan ketinggian elemen <div> kepada 50% daripada ketinggian port pandangan, yang mengambil separuh daripada ketinggian skrin.
- Gunakan unit em atau rem
Dalam sesetengah kes, anda juga boleh menetapkan ketinggian elemen menggunakan unit em atau rem. Kedua-dua unit adalah relatif, em ialah saiz fon berbanding elemen semasa dan rem ialah saiz fon berbanding elemen akar (iaitu elemen <html>). Contohnya:
div {
height: 2em;
}
Kod di atas bermaksud menetapkan ketinggian elemen <div> kepada dua kali ganda saiz fon semasa. Jika saiz fon elemen semasa ialah 14 piksel, ketinggian elemen <div> ialah 28 piksel.
2. Nota
- Kaedah pengiraan ketinggian
Apabila mengira ketinggian elemen, perhatikan model kotak elemen: Elemen The ketinggian termasuk ketinggian kandungan, ketinggian padding dan ketinggian sempadan. Jika atribut box-sizing: border-box ditetapkan, ketinggian elemen termasuk ketinggian pelapik dan sempadan, dan ketinggian kandungan ialah ruang yang tinggal.
- Sekatan ketinggian
Ketinggian sesetengah elemen tidak boleh ditetapkan melalui CSS, seperti elemen sebaris dan elemen display: none. Selain itu, ketinggian unsur induk juga mungkin mempengaruhi ketinggian unsur anak Beri perhatian untuk memeriksa sama ada unsur induk mengehadkan ketinggian unsur anak. Jika ketinggian elemen anak melebihi ketinggian elemen induk, bar skrol akan muncul pada elemen anak.
- Isu keserasian
Apabila menggunakan unit ketinggian, beri perhatian kepada isu keserasian: sesetengah penyemak imbas mungkin tidak menyokong unit tertentu. Contohnya, IE8 dan ke bawah tidak menyokong unit vh dan rem. Selain itu, penyemak imbas yang berbeza mungkin menghuraikan unit yang sama dengan cara yang berbeza dan keserasian perlu dikendalikan.
3. Ringkasan
Dalam artikel ini, kami memperkenalkan beberapa kaedah untuk menggunakan CSS untuk menetapkan ketinggian elemen, termasuk piksel, peratusan, ketinggian tetingkap, unit relatif, dsb. Apabila menggunakan kaedah ini, anda perlu memberi perhatian kepada model kotak elemen, sekatan ketinggian dan isu keserasian. Pada masa yang sama, anda juga perlu memilih unit ketinggian yang paling sesuai mengikut keperluan khusus untuk mencapai kesan susun atur halaman yang terbaik.
Atas ialah kandungan terperinci Bagaimana untuk menetapkan ketinggian dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!