Apakah maksud calc dalam gaya css?

Dalam CSS, calc bermaksud pengiraan; calc boleh difahami sebagai fungsi, singkatan pengiraan, yang digunakan untuk menentukan panjang sesuatu elemen boleh mengira elemen menggunakan nilai unit yang ditentukan nilai panjang, sintaksnya ialah "elemen {length attribute: calc (expression)}".

Persekitaran pengendalian tutorial ini: sistem Windows 10, versi CSS3&&HTML5, komputer Dell G3.

Apakah maksud calc dalam gaya css

calc() Secara literal kita boleh memahaminya sebagai fungsi fungsi. Sebenarnya, calc ialah singkatan daripada perkataan Inggeris hitung Ia adalah fungsi baharu CSS3 dan digunakan untuk menentukan panjang elemen.

Sebagai contoh, anda boleh menggunakan calc() untuk menetapkan nilai dinamik untuk jidar, jidar, padding, saiz fon dan sifat lebar elemen. Mengapa ia dipanggil nilai dinamik kerana kita menggunakan ungkapan untuk mendapatkan nilai. Walau bagaimanapun, faedah terbesar calc() ialah ia boleh digunakan dalam susun atur bendalir Lebar elemen boleh dikira melalui calc().

Apakah yang boleh dilakukan oleh calc()?

calc() membenarkan anda mengira lebar atau tinggi elemen div menggunakan peratusan, em, px dan nilai unit rem, contohnya "width:calc(50% 2em)" , supaya anda tidak perlu mempertimbangkan nilai lebar elemen DIV, dan biarkan tugas yang menjengkelkan ini kepada penyemak imbas untuk mengira.

sintaks calc()

sintaks calc() sangat mudah, sama seperti semasa kita masih muda, kita belajar tambah (), tolak (-), dan pendaraban (*), seperti bahagi (/), gunakan ungkapan matematik untuk menyatakan:

.elm {
  width: calc(expression);
}

dengan "ungkapan" ialah ungkapan yang digunakan untuk mengira panjang.

Peraturan operasi calc()

calc() menggunakan peraturan operasi matematik am, tetapi juga menyediakan fungsi yang lebih pintar:

Gunakan empat operasi aritmetik " ", "-", "*" dan "/";

Anda boleh menggunakan unit peratus, px, em, rem dan lain-lain; campuran pelbagai Kira dalam unit yang berbeza;

Apabila terdapat " " dan "-" dalam ungkapan, mesti ada ruang sebelum dan selepasnya. adalah salah untuk menulis tanpa spasi ;

Apabila terdapat "*" dan "/" dalam ungkapan, tidak boleh ada ruang sebelum dan selepasnya, tetapi disyorkan untuk meninggalkan ruang.

Apabila anda benar-benar menggunakannya, anda juga perlu menambah awalan penyemak imbas

 .elm {
    /*Firefox*/
    -moz-calc(expression);
    /*chrome safari*/
    -webkit-calc(expression);
    /*Standard */
    calc();
 }

<div class="demo">
     <div class="box"></div>
</div>

Langkah 1: Tambah gaya biasa:

.demo {
    width: 300px;
    background: #60f;
}
.box {
  width: 100%;
    background: #f60;
    height: 50px;
}

Langkah kedua ialah menambah jidar dan padding pada div.box Langkah ini sangat rumit Tambah padding 10px pada div.box dan tambahkan padding 5px pada masa yang sama:

.demo {
    width: 300px;
    background: #60f;
}
.box {
  width: 100%;
  background: #f60;
  height: 50px;
  padding: 10px;
  border: 5px solid green;
}

.demo {
    width: 300px;
    background: #60f;
padding: 3px 0;  
}
.box {
  width: 100%;
  background: #f60;
  height: 50px;
  padding: 10px;
  border: 5px solid green;
}

Langkah ketiga, penggunaan calc()Untuk menyelesaikan masalah pecah bekas, dalam masa lalu kita hanya boleh mengira lebar div.box dan menggunakan lebar bekas Tolak nilai padding dan sempadan, tetapi kadang-kadang kita mengalami tidak mengetahui jumlah lebar elemen Sebagai contoh, dalam susun atur penyesuaian, kita hanya tahu a nilai peratusan, tetapi nilai lain adalah nilai seperti px Ini adalah Kesukarannya, saya tersekat. Dengan kemunculan CSS3, saiz kotak digunakan untuk menukar jenis elemen model kotak untuk mencapai kesan, tetapi kaedah calc() yang kami pelajari hari ini adalah lebih mudah.

Ketahui bahawa jumlah lebar ialah 100%. Atas dasar ini, tolak lebar sempadan (5px 2 = 10px), dan kemudian tolak lebar padding (10px 2 = 20px), iaitu, "100% - (10px 5px ) * 2 = 30px", nilai akhir ialah nilai lebar div.box:

.demo {
    width: 300px;
    background: #60f;
    padding: 3px 0;
}
.box {
    background: #f60;
    height: 50px;
    padding: 10px;
    border: 5px solid green;
width: 90%;/*写给不支持calc()的浏览器*/
    width:-moz-calc(100% - (10px + 5px) * 2);
    width:-webkit-calc(100% - (10px + 5px) * 2);
    width: calc(100% - (10px + 5px) * 2);
}

(Belajar perkongsian video: tutorial video css, tutorial video html)

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