理解CSS中的數學運算式calc()

標籤：border   運算式   normal   相容性   black   

定義

　　數學運算式calc()是calculate計算的縮寫，它允許使用+、-、*、/這四種運算子，可以混合使用%、px、em、rem等單位進行計算

　　相容性: IE8-、safari5.1-、ios5.1-、android4.3-不支援，android4.4-4.4.4隻支援加法和減法。IE9不支援用於backround-position

　　[注意]+和-運算子兩邊一定要有空白符

650) this.width=650;" src="/img/fz.gif" alt="複製代碼" style="margin:0px;float:left;border:none;" />

<style>.test1{    border: calc( 1px + 1px ) solid black;    /* calc裡面的運算遵循*、/優先於+、-的順序 */    width: calc(100%/3 - 2*1em - 2*1px);    background-color: pink;    font-style: toggle(italic, normal); }.test2{    /* 由於運算子+的左右兩側沒有空白符，所以失效 */    border: calc(1px+1px) solid black;    /* 對於，不能小於0的屬性值，當運算結果小於0時，按0處理 */    width: calc(10px - 20px);    padding-left: 10px;    background-color: lightblue;}</style>

650) this.width=650;" src="/img/fz.gif" alt="複製代碼" style="margin:0px;float:left;border:none;" />

<div class="test1">測試文字一</div>    <div class="test2">測試文字二</div>

應用

　　數學運算式calc()常用於布局中的不同單位的數字運算

650) this.width=650;" src="/img/fz.gif" alt="複製代碼" style="margin:0px;float:left;border:none;" />

<style>p{margin: 0;}.parent{overflow: hidden;zoom: 1;}.left{float: left;width: 100px;margin-right: 20px;}    .right{float: left;width: calc(100% - 120px);}</style>

650) this.width=650;" src="/img/fz.gif" alt="複製代碼" style="margin:0px;float:left;border:none;" />

650) this.width=650;" src="/img/fz.gif" alt="複製代碼" style="margin:0px;float:left;border:none;" />

<div class="parent" style="background-color: lightgrey;">    <div class="left" style="background-color: lightblue;">        <p>left</p>    </div>    <div class="right"  style="background-color: lightgreen;">        <p>right</p>        <p>right</p>    </div></div>

650) this.width=650;" src="/img/fz.gif" alt="複製代碼" style="margin:0px;float:left;border:none;" />

理解CSS中的數學運算式calc()