Rumah > hujung hadapan web > tutorial css > penggunaan calc dalam css

penggunaan calc dalam css

下次还敢
Lepaskan: 2024-04-26 13:51:19
asal
697 orang telah melayarinya

Fungsi Calc dalam CSS membolehkan pembangun melaksanakan operasi matematik: mentakrifkan pembolehubah, mencipta ungkapan yang mengandungi operasi yang diperlukan dan menggunakan ungkapan pada gaya. Kelebihan termasuk fleksibiliti, penghapusan pergantungan pada JavaScript dan pengiraan nilai dinamik. Fungsi Calc disokong secara meluas oleh semua pelayar moden.

penggunaan calc dalam css

Penggunaan Calc dalam CSS

Fungsi Calc dalam CSS ialah alat berkuasa yang membolehkan pembangun melaksanakan operasi matematik dalam lembaran gaya CSS. Ia boleh melakukan operasi asas aritmetik seperti tambah, tolak, darab dan bahagi.

Sintaks:

<code>calc( 表达式 )</code>
Salin selepas log masuk

di mana, 表达式 boleh mengandungi nombor, unit, peratusan dan panggilan fungsi Calc yang lain.

Penggunaan:

Apabila menggunakan fungsi Calc, anda perlu mengikuti langkah berikut:

  1. Tentukan pembolehubah: Jika anda ingin menggunakan semula nilai, anda boleh menggunakan pembolehubah CSS untuk menyimpannya. Contohnya:

    <code>--margin: 10px;</code>
    Salin selepas log masuk
  2. Buat ungkapan: Dalam fungsi Calc, buat ungkapan yang mengandungi operasi yang diperlukan. Contohnya:

    <code>calc( 10px + 5px )</code>
    Salin selepas log masuk
  3. Gunakan pada gaya: Gunakan ungkapan Calc pada peraturan CSS. Sebagai contoh, untuk menetapkan jidar elemen kepada 15px, anda akan menggunakan gaya berikut:

    <code>margin: calc( var(--margin) + 5px );</code>
    Salin selepas log masuk

Contoh:

  • Tukar saiz elemen:

    <code>width: calc(50% - 10px); /* 将元素宽度设置为屏幕宽度的 50%,减去 10px */</code>
    Salin selepas log masuk
  • dynamic spareee

  • <code>margin: calc(10px + 10%); /* 根据父元素大小动态设置边距 */</code>
    Salin selepas log masuk
  • Kira saiz fon:

<code>font-size: calc(1.2rem + 2px); /* 根据基准字体大小动态计算字体大小 */</code>
Salin selepas log masuk
    Kelebihan:
  • Membenarkan operasi matematik dalam CSS, meningkatkan fleksibiliti
  • Menghapuskan pergantungan pada JavaScript dan memudahkan kod.

Memberi keupayaan untuk mengira nilai secara dinamik untuk menjadikan reka letak lebih responsif.

Sokongan Pelayar:

🎜🎜Fungsi Calc disokong secara meluas oleh semua penyemak imbas moden, termasuk Chrome, Firefox, Safari dan Edge. 🎜

Atas ialah kandungan terperinci penggunaan calc dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
css
sumber:php.cn
Kenyataan Laman Web ini
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan