css中的數學表達式calc()
阿新 • • 發佈:2019-03-25
會計 ali lock padding () 概念 混合 數字運算 android
測試文字一
測試文字二
前言
數學表達式calc()是CSS中的函數,主要用於數學運算。使用calc()為頁面元素布局提供了便利和新的思路。
概念
數學表達式calc()是calculate計算的縮寫,它允許使用+、-、*、/這四種運算符,可以混合使用%、px、em、rem等單位進行計算
[兼容性] IE8-、safari5.1-、ios5.1-、android4.3-不支持,android4.4-4.4.4只支持加法和減法。IE9不支持用於backround-position
[註意]+和-運算符兩邊一定要有空白符
<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>
<div class="test1">測試文字一</div>
<div class="test2">測試文字二</div>
[重點] 數學表達式calc()常用於布局中的不同單位的數字運算
<style> #vh_box{width:100%; height: 100%;} .vh_t0{width:100%;height:200px; background:blue; } .right{width:100%; height:calc( 100vh - 200px ); background:red;} // 瀏覽器會計算出 100vh 減去 200px 的值。這樣對於不同單位的運算是非常便利的。 </style> <div id="vh_box"> <div id="vh_t0"></div> <div id=""vh_t1></div> </div>
css中的數學表達式calc()