Bagaimana untuk menetapkan ketinggian dalam css-Soal Jawab bahagian hadapan-php.cn

Bagaimana untuk menetapkan ketinggian dalam css

PHPz

Lepaskan： 2023-04-06 13:45:09

asal

3816 orang telah melayarinya

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;
}

Salin selepas log masuk

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%;
}

Salin selepas log masuk

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;
}

Salin selepas log masuk

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;
}

Salin selepas log masuk

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!