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)。
新聞熱點
疑難解答
