講到網(wǎng)站建設我們第一想到的往往就是DIV+CSS建站模式，CSS建站不論是在兼容上還是由其SEO優(yōu)化上都是不錯的選擇。之前筆者小丹分享過很多關于CSS的文章，多是在CSS建站的各個局部命令執(zhí)行上。今天依然如此，不過分享的是CSS的執(zhí)行樣式：CSS calc()。

    首先，我們要知道CSS calc()屬性表達式允許我們在樣式表執(zhí)行簡單的計算。下面是我們常見到的應用比較廣泛的規(guī)則集展示CSS的使用calc()：

    .container {
                height: calc(100% - 50px);
                width: calc(100% - 40px);
                }

    正如你所看到的在上面的例子中，CSS calc()屬性表達式允許我們動態(tài)地計算結果之間的減兩個CSS長度值正確的樣式表不使用JavaScript，即使不共享相同的單位長度值。

    CSS calc()屬性表達式中，在我們只能用CSS進行算術計算 calc()：

    加(+)

    減(-)

    乘法(*)

    除法(/)

    在Css calc()適用于許多類型的數(shù)值CSS值：

    長度

    時間
 
    角

    頻率

    沒有單位的整數(shù)和數(shù)字

    還有就是，Css calc()不能使用CSS顏色值、CSS和其他類型的值。

    用例

    CSS的價值 calc()很快可以看到當我們執(zhí)行數(shù)學計算與不同的CSS數(shù)值單位，時變得更加有用的值是一個相對和固定單位的混合物。

    那么就讓讓我們先來談一個實例，我們不應該使用 calc()屬性表達式。

    反例

    /* Do not do this! */
    div {
         width: calc(600px / 2);
        }

    在上面的樣式規(guī)則中，我們執(zhí)行計算就可以很容易地做自己。以便我們的CSS是更具可讀性，并避免不必要的瀏覽器計算，可以減緩我們的網(wǎng)頁，如果我們拿出一個真正的計算器和做數(shù)學自己：

    div{
        width: 300px;
       }

    那么，在哪里使用CSS calc()？

    Css calc()成為一個偉大的資產的單位是一個相對單位，另一個則是固定的。這種談判的能力在不同的CSS網(wǎng)頁設計單位尤其精彩的敏感。

    下面的一個例子為中心的容器,總有20 px利潤在其左和右,無論屏幕尺寸:

    .container {
                margin: 0 auto;
                width: calc(100% - 40px);
               }

    視圖的例子

    在這個用例的CSS calc()中我們能夠占據(jù)一個垂直滾動條，確?？勺x性安慰我們的內容不管使用什么設備。流體容器歸心這種方法只需要最小的CSS和HTML。其他響應設計技術實現(xiàn)相同的結果需要更多的代碼，并且可能需要之類負利潤、媒體查詢和不相干的嵌套的HTML容器元素。

    規(guī)范的地位

    CSS的規(guī)范calc()描述的是W3C CSS值和單位模塊3，這個模塊是在W3C候選推薦標準(CR)狀態(tài)，這意味著它是兩個層次被終結。

    記住現(xiàn)在CSS calc()是三個CSS功能模塊中挑出的規(guī)格是被下降的危險。

    The following features are at-risk and may be dropped during the CR period: ‘calc()’, ‘toggle()’, ‘attr()’.

    瀏覽器支持

    目前CSS calc()在大約82%的瀏覽器支持在Web上使用數(shù)據(jù)顯示從caniuse.com。Internet Explorer 9部分支持CSS calc()以及后續(xù)版本的瀏覽器有完整的功能支持。

    (轉載請注明轉自：mjyil.cn，謝謝!珍惜別人的勞動成果，就是在尊重自己!）