calc在css 中是一個函數(shù),用來做數(shù)值的計算。可以進行長度、角度、時間等的計算。支持 +
、 -
、 *
、 /
和小括號。使用的時候有個需要注意的地方是就是 加號和減號前后需要有個空格 。 calc 大大的增加了css的靈活性。給一些特殊的布局,提供了方便。
示例的顯示的效果
使用cacl 布局的一個示例
想做個一個效果, 就是在 #div1
的背景,延伸到 #div2
可見區(qū)域,在 #div2
顯示固定60個像素。就是黑色框?qū)挾仁?0px。而不用考慮 #div1
的寬度。
css代碼
#div1 { width: 100%; min-width: 400px; outline: blue;}#div2 { width: 300px; margin: 0 auto; outline: 1px solid #ccc; color: white;}
html代碼
<div id="div1" class="cw"> <div id="div2"> test </div></div>
解決的方法
.cw { background:blue linear-gradient( to right, red calc(50% - 150px + 60px ) , transparent calc(50% - 150px + 60px ) );}
cacl 的兼容性
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持武林網(wǎng)。
新聞熱點
疑難解答