前言
正如其名，calc是css3中新增的計(jì)算屬性，讓很多屬性增加了一個(gè)表達(dá)式的說(shuō)法；
calc是英文單詞calculate(計(jì)算)的縮寫，是css3的一個(gè)新增的功能，你可以使用calc()給元素的border、margin、pading、font-size、width和height等屬性設(shè)置動(dòng)態(tài)值。
怎么使用
calc()可以使用數(shù)學(xué)運(yùn)算中的簡(jiǎn)單加（+）、減（-）、乘（*）和除（/）來(lái)解決問(wèn)題，而且還可以根據(jù)單位如px,em,rem和百分比來(lái)轉(zhuǎn)化計(jì)算。
標(biāo)準(zhǔn)的寫法：
.class{ /* area: expression; */ width:calc(); padding:calc(); margin-top:calc(); ... }兼容性
基本理論
注意點(diǎn):
calc 內(nèi)部的表達(dá)式，在使用運(yùn)算符號(hào)時(shí)，兩遍必須加上空格（雖然乘除可以無(wú)視，但還是建議帶上）！！！！！，不然會(huì)解析錯(cuò)誤！！，看演示寫法
width:calc(10 * 10px); width:calc(50% - 50px); width:calc(50% + 5em); width:calc(10% / 1rem);
小demo
僅僅作為演示,響應(yīng)伸縮
代碼
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS3 Calc</title> <style type="text/css" media="screen"> html{ font-size:62.5%; } .wrapper{ width:100%; border:5px solid #f00; margin:10px ; box-sizing:border-box; height:200px; clear:b; } .items{ height:calc(100% - 40px); display:inline-block; border:1px solid #f70; text-align:center; } .w1 .items{ float:left; margin-top:calc( 5 * 4px ); border:3px solid #0F16C6; width:calc(100% / 3 - 6px) } .w2 .items{ float:left; margin-top:calc(200px - 20px * 9); width:calc(100% / 3 - 2px) } .w3 .items{ float:left; width:calc(100% / 3 - (3 * 6px)); margin:calc(2px * 4 ); } .w3 .items:first-child{ padding:calc(5 * 1rem - 3rem); box-sizing:border-box; } </style></head><body> <div class="wrapper w1"> <div class="items">margin-top:calc( 5 * 4px );</div> <div class="items">margin-top:calc( 5 * 4px );</div> <div class="items">margin-top:calc( 5 * 4px );</div> </div> <div class="wrapper w2"> <div class="items">margin-top:calc(200px - 20px * 9);</div> <div class="items">margin-top:calc(200px - 20px * 9);</div> <div class="items">margin-top:calc(200px - 20px * 9);</div> </div> <div class="wrapper w3"> <div class="items">width:calc(100% / 3 - (3 * 6px));<br>margin:calc(2px * 4 );<br>padding:calc(5 * 1rem - 3rem);</div> <div class="items";>width:calc(100% / 3 - (3 * 6px));<br>margin:calc(2px * 4 )</div> <div class="items";>width:calc(100% / 3 - (3 * 6px));<br>margin:calc(2px * 4 )</div> </div></body></html>總結(jié)
calac 和flexbox搭配，用來(lái)寫流式布局非常好；
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
