Rumah > hujung hadapan web > tutorial css > Mengapa Fungsi calc() Saya Tidak Berfungsi?

Mengapa Fungsi calc() Saya Tidak Berfungsi?

Patricia Arquette
Lepaskan: 2024-11-02 10:32:30
asal
419 orang telah melayarinya

Why Isn't My calc() Function Working?

Cedera Fungsi Calc(): Mengapa Ia Tidak Berfungsi

Fungsi calc(100vw/4) anda berfungsi seperti yang diharapkan, tetapi fungsi yang lain bukan kerana elemen penting: ruang.

Fungsi CSS calc() memerlukan ruang antara pengendalinya. Ralat biasa termasuk meninggalkan ruang ini, yang membawa kepada ungkapan tidak sah.

Sebagai contoh, ungkapan calc(100vw/4-(10-4)) adalah tidak sah kerana ruang yang tiada antara "-" dan kurungan. Sebaliknya, ia sepatutnya: calc(100vw/4 - (10 - 4)).

Fungsi Calc() Bersarang

Anda boleh menyarangkan fungsi calc() sebagai banyak kali mengikut keperluan, tetapi ia berfungsi dengan cara yang sama seperti kurungan. Contohnya:

<code class="css">calc(100vw/4 - calc(10px - 4px))</code>
Salin selepas log masuk

Adalah bersamaan dengan:

<code class="css">calc(100vw/4 - (10px - 4px))</code>
Salin selepas log masuk

Contoh

Berikut ialah contoh fungsi calc() bersarang:

<code class="css">.one {
  width: calc(100% - 150px);
  margin-top: calc(20px + calc(40px * 2));
  height: calc(100px - 10px);
  padding: calc(5% + 10px) calc(5% - 5px);
}</code>
Salin selepas log masuk

Dalam contoh ini, sifat atas margin menggunakan fungsi calc() bersarang untuk menambah 20px pada hasil darab 40px dengan 2.

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

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
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan