Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimanakah peratusan atas margin dikira dalam CSS?

Bagaimanakah peratusan atas margin dikira dalam CSS?

DDD
DDDasal
2024-11-02 13:06:30182semak imbas

How is margin-top percentage calculated in CSS?

Pengiraan Peratusan Atas Margin dalam CSS

Mengira peratusan atas margin dalam CSS memerlukan pemahaman titik rujukannya. Tidak seperti andaian intuitif, ia tidak dikira daripada ketinggian induk tetapi lebih kepada lebarnya.

Menyelidiki Spek W3C

Spesifikasi W3C dengan jelas menyatakan, "Peratusan dikira berkenaan dengan lebar blok yang mengandungi kotak yang dihasilkan." Ini berlaku untuk kedua-dua margin-atas dan margin-bawah.

Memastikan Ketekalan dan Mengelakkan Kebergantungan Pekeliling

Margin berasaskan peratusan pada semua pihak (margin-atas, - kanan, -bawah, -kiri) memberikan ketekalan dalam susun atur. Menggunakan peratusan untuk jidar mendatar dan menegak mengelakkan perbezaan dalam saiz jidar.

Selain itu, jidar menegak berdasarkan lebar bekas mengelakkan pergantungan bulat dalam reka letak halaman. Ketinggian blok bergantung pada kandungannya, manakala ketinggian kandungan memerlukan pengiraan yang merangkumi margin atas dan bawah. Dengan melabuhkan jidar menegak pada lebar bekas, kebergantungan ini dipecahkan, membolehkan reka letak yang berkesan.

Contoh Kod

.bekas {<br> latar belakang: biru muda ;<br> pelapik: 10px;<br> tinggi: 100px;<br> lebar: 500px;<br>}</p>
<p>p {<br> paparan: blok;<br> jidar: 1px merah pepejal; <br> margin-top: 50%;<br>}<br>

Setelah pelaksanaan, margin-top diukur berbanding dengan lebar 500px bekas, menghasilkan margin 250px .

Atas ialah kandungan terperinci Bagaimanakah peratusan atas margin dikira dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

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