Menggunakan fungsi Calc () CSS, anda boleh melakukan operasi matematik dalam lembaran gaya tanpa JavaScript. 1. Ia boleh digunakan untuk mencampurkan unit yang berbeza (seperti PX dan VH) untuk mencapai pelarasan susun atur, seperti menetapkan ketinggian kawasan kandungan utama ke ketinggian viewport mengurangkan ketinggian kepala tetap; 2. Dengan menggabungkan unit viewport untuk merealisasikan jarak responsif, mengurangkan penggunaan pertanyaan media, seperti margin kontena yang berubah dengan lebar skrin; 3. Sokongan unsur -unsur kedudukan dinamik, seperti memusatkan kotak prompt atau menyesuaikan margin kawasan kandungan utama mengikut lebar bar sisi. Calc () adalah sintaks mesra dan mempunyai keserasian yang baik, dan sesuai untuk pelbagai senario di mana nilai fleksibel diperlukan.

Anda tidak selalu memerlukan JavaScript untuk mengendalikan saiz atau kedudukan dinamik dalam CSS - fungsi calc() memberi anda cara yang kuat untuk melakukan matematik tepat di stylesheet anda. Ia amat berguna apabila anda memerlukan nilai yang bergantung kepada pelbagai unit atau keadaan yang berubah -ubah.

Berikut adalah beberapa cara praktikal untuk menggunakan calc() dengan berkesan:

Unit pencampuran untuk pelarasan susun atur

Salah satu kegunaan yang paling biasa ialah menggabungkan unit yang berbeza seperti px , em , % , dan vw . Ini berguna apabila anda ingin menolak ketinggian header tetap dari ketinggian viewport penuh, sebagai contoh:

 .Main-Content {
  Ketinggian: Calc (100VH - 80px);
}

Ini memastikan kawasan kandungan utama anda mengisi skrin tetapi meninggalkan ruang untuk tajuk tinggi 80px. Tanpa calc() , mencampurkan kedua -dua unit itu tidak akan mungkin secara langsung.

Gunakan corak ini bila -bila masa anda meletakkan saiz tetap dan relatif - sidebars, sepanduk, atau pelarasan padding responsif semuanya mendapat manfaat daripadanya.

Jarak yang responsif tanpa pertanyaan media

Daripada melompat antara pertanyaan media hanya untuk menyesuaikan margin atau padding, cuba gunakan calc() dengan unit viewport:

 .container {
  padding: calc (20px 2vw);
}

Ini meningkatkan padding sedikit apabila skrin semakin luas, menjaga perkara yang seimbang secara visual tanpa perlu menulis titik putus tambahan. Hanya pastikan matematik tidak membawa kepada nilai terlalu besar atau kecil pada saiz skrin yang melampau.

Beberapa idea untuk di mana ini berfungsi dengan baik:

• Saiz fon yang skala perlahan dengan lebar skrin
• Jurang antara item grid
• Jarak margin di sekitar bekas

Unsur kedudukan secara dinamik

Jika anda meletakkan sesuatu seperti menu tooltip atau dropdown, calc() membantu menyelaraskannya dengan tepat berdasarkan dimensi lain yang diketahui:

 .tooltip {
  Kiri: Calc (50% - 100px); / * memusatkan tooltip lebar 200px */
}

Atau jika anda mempunyai bar sisi tetap dan mahu kandungan utama anda beralih dengan sewajarnya:

 .main {
  margin-kiri: calc (250px 2rem); / * jarak lebar bar sisi */
}

Pengiraan jenis ini menyimpan hubungan susun atur yang konsisten walaupun anda tweak bahagian lain reka bentuk.

Ia bukan sihir, tetapi sebaik sahaja anda mula menggunakan calc() secara teratur, anda akan mendapati diri anda menulis lebih sedikit hacks dan kurang bergantung pada JavaScript untuk matematik susun atur. Sintaks ini memaafkan, dan sokongan penyemak imbas adalah pepejal hari ini - jadi jangan ragu untuk menggunakannya di mana sahaja anda memerlukan nilai yang fleksibel.

Atas ialah kandungan terperinci Menggunakan fungsi CSS Calc () untuk nilai dinamik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!