Mengapa Fungsi `calc()` CSS Saya Tidak Berfungsi?

Anomali Fungsi CSS calc(): Memahami Ruang Yang Hilang

Fungsi calc(), alat CSS yang berkuasa untuk melaksanakan operasi matematik pada nilai harta, telah menjana kekeliruan di kalangan pemaju. Walaupun nampak mudah, ramai yang menghadapi masalah dalam pelaksanaannya. Artikel ini menyiasat mengapa fungsi calc() mungkin tidak berfungsi seperti yang diharapkan.

Pertimbangkan coretan kod berikut yang nampaknya tidak berfungsi seperti yang dimaksudkan:

#abc {
  width: calc(100%-120px);
  height: 50px;
  background: black;
}

Calc() fungsi digunakan untuk mengira lebar secara dinamik, tetapi ia gagal melakukannya. Penyebab di sebalik isu ini adalah kesilapan yang halus: kekurangan ruang di sekitar operator penolakan (-). Sintaks yang betul memerlukan ruang di sekeliling pengendali:

#abc {
  width: calc(100% - 120px);
  height: 50px;
  background: black;
}

Perubahan yang kelihatan kecil ini memastikan fungsi calc() beroperasi dengan betul, menghapuskan sebarang kekeliruan atau kekecewaan bagi pembangun. Dengan pengetahuan ini, anda boleh memanfaatkan potensi penuh fungsi calc() untuk meningkatkan responsif dan fleksibiliti kod CSS anda.

Atas ialah kandungan terperinci Mengapa Fungsi `calc()` CSS Saya Tidak Berfungsi?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!