CSS3 calc()計算屬性詳細介紹

最後更新：2018-03-01 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

正如其名，calc是css3中新增的計算屬性，讓很多屬性增加了一個運算式的說法；

calc是英文單詞calculate(計算)的縮寫，是css3的一個新增的功能，你可以使用calc()給元素的border、margin、pading、font-size、width和height等屬性設定動態值。

怎麼使用

calc()可以使用數學運算中的簡單加（+）、減（-）、乘（*）和除（/）來解決問題，而且還可以根據單位如px,em,rem和百分比來轉化計算。
標準的寫法：

  .class{       /*         area: expression;       */       width:calc();       padding:calc();       margin-top:calc();       ...   }

相容性

基本理論

calc可以做用於任何具有大小的東東，比如border、margin、pading、font-size和width等屬性設定動態值
支援的運算單位： rem , em , percentage , px
計算優先順序別和數學一致

注意點:

calc 內部的運算式，在使用運算子號時，兩遍必須加上空格（雖然乘除可以無視，但還是建議帶上）！！！！！，不然會解析錯誤！！，看示範寫法

    width:calc(10 * 10px);    width:calc(50% - 50px);    width:calc(50% + 5em);    width:calc(10% / 1rem);

小demo

僅僅作為示範,響應伸縮

代碼

<!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>    <p class="wrapper w1">        <p class="items">margin-top:calc( 5 * 4px  );</p>        <p class="items">margin-top:calc( 5 * 4px  );</p>        <p class="items">margin-top:calc( 5 * 4px  );</p>    </p>    <p class="wrapper w2">        <p class="items">margin-top:calc(200px - 20px * 9);</p>        <p class="items">margin-top:calc(200px - 20px * 9);</p>        <p class="items">margin-top:calc(200px - 20px * 9);</p>    </p>    <p class="wrapper w3">        <p class="items">width:calc(100% / 3 - (3 * 6px));<br>margin:calc(2px * 4 );<br>padding:calc(5 * 1rem - 3rem);</p>        <p class="items";>width:calc(100% / 3 - (3 * 6px));<br>margin:calc(2px * 4 )</p>        <p class="items";>width:calc(100% / 3 - (3 * 6px));<br>margin:calc(2px * 4 )</p>    </p></body></html>

總結

calac 和flexbox搭配，用來寫流式布局非常好；

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More