CSS Academy · Pelajaran

calc() untuk Pengiraan Dinamik

Campurkan unit dan lakukan aritmetik dalam CSS menggunakan fungsi calc() untuk nilai dinamik.

Pelajaran 1 daripada 413 langkah

calc() untuk Pengiraan Dinamik ialah pelajaran CSS Academy percuma di CoddyKit. Ini ialah pelajaran 1 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran CSS Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus CSS Academy merangkumi sejumlah 4 pelajaran.

Apakah calc()?

calc() membolehkan anda melakukan pengiraan aritmetik secara terus dalam nilai sifat CSS. Anda boleh mencampurkan unit yang berbeza (px, %, rem, vw) dalam satu pengiraan.

Sintaks Asas calc()

Menyokong penambahan (+), penolakan (-), pendaraban (*) dan pembahagian (/). Ruang di sekeliling operator + dan - diperlukan.

  <div class="sidebar">Sidebar (100% - 240px)</div>

Mencampurkan Unit

Keistimewaan calc() ialah keupayaannya menggabungkan unit yang tidak serasi dan biasanya mustahil untuk dicampurkan:

  <div class="hero">Hero</div>
  <div class="column">Column</div>

calc() dengan Pemboleh Ubah CSS

Gabungkan calc() dengan sifat tersuai CSS untuk token reka bentuk dinamik:

  <div class="main">Main content</div>

calc() Bersarang

calc() boleh disarang, walaupun perkara ini jarang diperlukan kerana setiap konteks sudah menilai pengiraan matematik:

  <div class="element">Element</div>

calc() untuk Tipografi Fleksibel

Gunakan calc() untuk mencipta interpolasi linear antara dua saiz:

  <h1>Fluid Heading</h1>

Pembahagian dalam calc()

Pembahagian memerlukan pembahagi berupa nombor tanpa unit:

  <div class="thirds">Third width</div>

calc() dengan Grid dan Flexbox

Berguna dalam definisi trek dan flex-basis:

  <div class="grid"><div>A</div><div>B</div></div>

calc() berbanding Fungsi Lain

Bila hendak menggunakan setiap fungsi:

calc(): pengiraan aritmetik sewenang-wenangnya, terutamanya untuk mencampurkan unit
min()/max(): memilih pilihan yang lebih kecil atau lebih besar
clamp(): mengehadkan nilai fleksibel antara minimum dan maksimum

Sokongan Pelayar

calc() disokong dalam semua pelayar moden dan IE11. Ia merupakan salah satu fungsi CSS yang paling meluas sokongannya. Selamat digunakan tanpa sandaran dalam mana-mana projek moden.

Corak calc() Biasa

Corak praktikal yang akan anda gunakan berulang kali:

  <div class="full-height">Full height minus header</div>
  <div class="half-minus-gap">Half minus gap</div>
  <div class="row"><div class="thirds-with-gaps">Third</div></div>

Semakan Pantas

Ungkapan calc() manakah yang menghasilkan keputusan yang betul untuk "30% daripada induk tolak 20px"?

Jawab dalam pelajaran interaktif

Ringkasan

calc() membolehkan pengiraan aritmetik dalam CSS dengan unit bercampur. Ia menggerakkan susun atur dinamik seperti "ruang pandang penuh tolak pengepala tetap" dan interpolasi tipografi fleksibel. Ruang diperlukan di sekeliling operator + dan -. Gabungkannya dengan pemboleh ubah CSS untuk pengiraan token reka bentuk yang berkuasa. Gunakannya bersama min/max/clamp untuk kawalan saiz fleksibel yang lengkap.

Percuma untuk bermula

Pelajari CSS dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 40
Pelajaran: 159

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “calc() untuk Pengiraan Dinamik” percuma?

Ya — teks penuh “calc() untuk Pengiraan Dinamik” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus CSS Academy, tingkat taraf kepada CoddyKit PRO. Kursus CSS Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “calc() untuk Pengiraan Dinamik”?

Campurkan unit dan lakukan aritmetik dalam CSS menggunakan fungsi calc() untuk nilai dinamik. Anda berlatih CSS Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan CSS Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran CSS Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 1 daripada 4.

Berapa lamakah pelajaran “calc() untuk Pengiraan Dinamik” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran CSS Academy ini?

Ya. Setiap pelajaran CSS Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

calc() untuk Pengiraan Dinamik
min() max() dan clamp() untuk Nilai Anjal
repeat() dan minmax() dalam Grid
color-mix() dan Sintaks Warna Relatif

← Kembali ke CSS Academy