CSS3 GEMS: Fungsi Calc ()

Penjelasan terperinci CSS3 Calc () Fungsi: Alat yang berkuasa untuk susun atur fleksibel

mata teras

CSS3
• Fungsi membolehkan pengiraan panjang, nombor, sudut, masa peralihan/animasi, atau kekerapan bunyi, dan sokongan mencampurkan jenis unit yang berbeza. Ciri ini amat berguna dalam reka bentuk susun atur kerana ia membolehkan pengiraan lebar yang tepat dalam susun atur cecair atau responsif. calc()
• Sokongan penyemak imbas fungsi kini terhad. Internet Explorer 9 dan Firefox (Prefixed) Sokongan asli, tetapi WebKit (Chrome dan Safari) dan Opera belum dilaksanakan. Walau bagaimanapun, peningkatan progresif boleh digunakan dalam stylesheets untuk memastikan keserasian merentasi pelayar yang berbeza. calc() Fungsi
dan
• min() CSS3 mengembalikan nilai minimum atau maksimum dua atau lebih nilai yang dipisahkan koma, dan juga digunakan untuk mengawal saiz fon relatif, tetapi tidak disokong oleh mana-mana pelayar terkini. max()

Terdapat banyak khazanah yang tersembunyi dalam spesifikasi modular CSS3. Artikel ini akan memperkenalkan harta yang sangat berguna yang mungkin mengubah cara anda mengendalikan reka bentuk susun atur. Fungsi CSS3

digunakan terutamanya untuk mengira panjang, nombor, sudut, masa peralihan/animasi atau kekerapan bunyi. Walau bagaimanapun, ia membolehkan anda mencampur jenis pengukuran - konsep yang kuat dalam CSS. Pertimbangkan susun atur laman web yang mengandungi dua elemen terapung. Anda mahu kedua -dua elemen ini mempunyai lebar yang sama dan dipisahkan oleh margin mendatar 60px. Kedengarannya sederhana? Bukan masalah dalam reka bentuk lebar tetap; Tetapi bagaimana dengan susun atur cecair atau responsif? Lebar halaman tidak dapat ditentukan, jadi kebanyakan pemaju akan menetapkan setiap elemen kepada 45%. Hanya apabila halaman berlaku 600px, 10% daripada margin adalah 60px; Nasib baik, fungsi calc() baru membolehkan kita mengira lebarnya. Dalam kes ini, kita mahu kedua -dua elemen menjadi 50% dikurangkan 30px, contohnya: calc() calc()

mungkin anda mahukan margin berbanding saiz fon - contohnya 4EM? Tidak ada masalah:

#element1, #element2 {
  float: left;
  width: calc(50% - 30px);
}

#element2 {
  margin-left: 60px;
}

atau anda mungkin mahu menambah sempadan 2px di sekitar kedua -dua elemen:

#element1, #element2 {
  width: calc(50% - 2em);
}

Saya cadangkan anda menyimpan pengiraan mudah, tetapi anda boleh menggunakan formula kompleks seperti:

#element1, #element2 {
  width: calc(50% - 2em - 4px);
  border: 2px solid #000;
}

#element1, #element2 { width: calc((50% + 2em)/2 + 14px); }

Sokongan penyemak imbas

Fungsi

adalah cadangan W3C, jadi penyemak imbas mana yang menyediakan sokongan asli? Salah. Pada masa penulisan, hanya ada Internet Explorer 9. Firefox juga menyokongnya dengan awalan; Ia tidak dilaksanakan di WebKit (Chrome dan Safari) atau opera, bagaimanapun, ia sangat berguna dan saya ragu -ragu kita tidak perlu menunggu terlalu lama. Nasib baik, anda boleh menggunakan peningkatan progresif dalam lembaran gaya anda:

calc() -moz-calc() ingat bahawa anda juga perlu menyesuaikan margin dengan sewajarnya, contohnya:

#element1, #element2 {
  width: 45%; /* 所有浏览器 */
  width: -moz-calc(50% - 30px); /* Firefox 4+ */
  width: calc(50% - 30px); /* IE9+ 和未来的浏览器 */
}

dan

#element2 {
  margin-left: 10%; /* 所有浏览器 */
  margin-left: -moz-calc(60px); /* Firefox 4+ */
  margin-left: calc(60px); /* IE9+ 和未来的浏览器 */
}

Jika anda suka calc(), anda akan menyukai fungsi min() dan max(). Mereka menerima dua atau lebih nilai koma yang dipisahkan dan mengembalikan nilai minimum atau maksimum dengan sewajarnya, contohnya:

#element1, #element2 {
  float: left;
  width: calc(50% - 30px);
}

#element2 {
  margin-left: 60px;
}

Fungsi -fungsi ini akan sangat berguna apabila menggunakan saiz fon relatif untuk memastikan bahawa teks tidak terlalu besar atau terlalu kecil. Malangnya, min() dan max() tidak disokong pada mana -mana pelayar terkini. Mari berharap mereka akan muncul tidak lama lagi.

Bahagian Soalan Lazimnya ditinggalkan di sini, kerana kandungan bahagian ini sangat berulang-ulang dengan teks asal, pseudo-asal lebih sukar dan panjangnya lebih panjang, yang tidak kondusif untuk menjaga artikel yang diselaraskan.)

Atas ialah kandungan terperinci CSS3 GEMS: Fungsi Calc (). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!