Cara menggunakan calc dalam css

Fungsi calc() dalam CSS digunakan untuk mengira nilai secara dinamik, membenarkan operasi matematik digunakan pada nilai seperti panjang, peratusan, dll. untuk mencipta reka letak dinamik. Ia menyokong operasi tambah, tolak, darab dan bahagi serta disokong secara meluas dalam semua pelayar utama, menjadikannya mudah untuk digunakan. Beri perhatian kepada keserasian unit, elakkan keterlaluan untuk memastikan prestasi, dan utamakan teknik reka bentuk responsif seperti flexbox dan susun atur grid.

Penggunaan calc() dalam CSS

Apakah calc()?

calc() ialah fungsi dalam CSS yang digunakan untuk mengira nilai secara dinamik. Ia membolehkan anda menggunakan operasi matematik pada panjang, peratusan dan nilai CSS lain untuk mencipta reka letak yang dinamik dan responsif. Sintaks

calc()

<code>calc(<expression>)</code>

di mana ialah rentetan yang mengandungi operasi matematik. Fungsi

Operator

calc() menyokong pengendali berikut:

• + (tambahan)
• - (tolak)
• * (daraban)
• + (tambahan)
• - (tolak)
• * (daraban)

))

( (Kurungan)

Contoh penggunaan

Kira jumlah lebar

<code>width: calc(100% - 20px);</code>

Kira ketinggian baris

<code>line-height: calc(1.5em + 5px);</code>

ketinggian port
Tetapkan 50% daripada lebar lajur grid

<code>height: calc(80vh);</code>

Kelebihan calc()

• Dinamik dan responsif: calc() membolehkan anda membuat susun atur pembolehubah yang melaraskan nilainya berdasarkan saiz paparan atau faktor lain
• Keserasian merentas pelayar: calc( ) secara meluas disokong dalam semua pelayar utama.
• Mudah digunakan: Sintaks calc() adalah ringkas dan mudah difahami, menjadikannya alat yang sangat mudah

🎜🎜🎜Nota🎜🎜🎜🎜Pastikan unit yang digunakan dalam ungkapan adalah betul. . Serasi.

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