Fungsi Calc () CSS membolehkan operasi matematik dilakukan secara langsung dalam helaian gaya. Sintaks asasnya termasuk empat operasi: penambahan, penolakan, pendaraban dan pembahagian, dan memerlukan ruang untuk ditambah apabila menggunakan operator jumlah. Penggunaan utama termasuk: 1. Laraskan lebar tanpa mengubah model kotak (seperti menolak margin dalaman); 2. Elemen kedudukan dinamik (seperti berpusat berdasarkan peratusan dan penalaan yang baik); 3. Campurkan unit yang berbeza untuk pengiraan (seperti menggabungkan unit viewport dan piksel). Di samping itu, Calc () menyokong penggunaan bersarang, tetapi overcomplexity harus dielakkan untuk mengekalkan kebolehbacaan. Keserasian penyemak imbas adalah baik dan tidak perlu menambah awalan, tetapi isu -isu yang berpotensi perlu diberi perhatian ketika berurusan dengan pelayar yang lebih tua (seperti IE11). Adalah disyorkan untuk menambah komen kepada ekspresi kompleks dan melakukan ujian pelbagai pelayar apabila menggunakannya.

Menggunakan calc() dalam CSS adalah cara yang berguna untuk melakukan matematik tepat di dalam stylesheet anda. Ia amat berguna apabila anda perlu mencampurkan unit yang berbeza atau mengira lebar, ketinggian, margin, dan banyak lagi dengan cepat. Biarkan saya memecahkan bagaimana ia berfungsi dan apabila anda mungkin mahu menggunakannya.

Sintaks asas calc()

Fungsi calc() membolehkan anda melakukan operasi matematik asas - penambahan, penolakan, pendaraban, dan pembahagian - secara langsung dalam nilai CSS anda. Sintaks kelihatan seperti ini:

 lebar: calc (100% - 20px);

Satu perkara yang harus diingat: selalu meletakkan ruang di sekitar dan - pengendali. Jika tidak, ia tidak akan berfungsi. Jadi ini betul:

 Calc (100% - 20px)

Tetapi ini tidak akan berfungsi:

 Calc (100%-20px)

Anda boleh menggunakan sebarang nilai CSS yang sah di dalam calc() - piksel, peratusan, EMS, REMS, unit viewport, dan lain -lain. Fleksibiliti menjadikannya sangat berguna untuk susun atur responsif.

Kes penggunaan biasa untuk calc()

Terdapat beberapa situasi di mana calc() benar -benar bersinar:

• Menyesuaikan lebar dengan padding atau sempadan
  Jika anda mahu elemen menjadi 100% lebar tetapi juga mempunyai padding, menggunakan box-sizing: border-box biasanya mengendalikannya. Tetapi jika anda tidak dapat menukar model kotak, calc() adalah alternatif yang baik:

   .box {
    lebar: calc (100% - 20px); / * tolak padding kiri dan kanan */
    Padding: 0 10px;
  }

• Unsur kedudukan secara dinamik
  Anda mungkin mahu memusatkan sesuatu tetapi menyesuaikan berdasarkan nilai lain. Contohnya:

   .tooltip {
    Kiri: Calc (50% - 100px);
  }

• Unit pencampuran
  Ini adalah salah satu kegunaan yang paling kuat. Katakan anda mahu saiz fon skala dengan lebar viewport tetapi tambahkan sedikit tambahan:

   saiz font: calc (1vw 10px);

Contoh -contoh ini menunjukkan bagaimana calc() membantu mengelakkan elemen JavaScript atau tambahan pembungkus hanya untuk mengendalikan matematik susun atur.

Fungsi bersarang calc()

Ya, anda juga boleh berfungsi di calc() di dalam satu sama lain. Ia bukan sesuatu yang anda akan gunakan setiap hari, tetapi ia boleh berguna apabila berurusan dengan pengiraan yang kompleks.

Inilah contoh yang disumbangkan:

 lebar: calc ((100% / 3) - calc (30px 1EM));

Dalam praktiknya, bersarang sukar dibaca dengan cepat, jadi pastikan ia mudah kecuali anda benar -benar memerlukannya. Juga, preprocessors moden seperti SASS atau kurang mungkin membuat matematik bersarang lebih mudah untuk dikendalikan sebelum ia mencecah penyemak imbas.

Sokongan dan petua penyemak imbas

Sokongan penyemak imbas untuk calc() adalah pepejal hari ini - semua pelayar utama menyokongnya tanpa masalah. Tidak perlu bimbang tentang awalan lagi.

Beberapa petua cepat:

• Jangan lupa ruang di sekitar dan - .
• Gunakan ulasan di dalam calc() Ekspresi jika diperlukan, walaupun CSS tidak membenarkan komen sebaris di dalamnya.
• Uji dalam Pelbagai Pelayar Jika mensasarkan versi lama (seperti IE11), di mana beberapa kebiasaan wujud.

Jika anda membina tapak responsif atau melakukan apa -apa yang dinamik dengan jarak atau saiz, calc() adalah alat yang hebat untuk menyimpan dalam toolkit CSS anda.

Itulah asas menggunakan calc() dalam CSS. Tidak terlalu rumit apabila anda terbiasa dengan sintaks, tetapi sangat berguna dalam susun atur dunia sebenar.

Atas ialah kandungan terperinci Cara menggunakan tutorial fungsi CSS Calc (). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!