css中的計算函數(shù)calc在網(wǎng)站布局中一個示例
發(fā)布時間：2019-08-12 16:15:12 作者：森林 
我要評論
我要評論這篇文章主要介紹了css中的計算函數(shù)calc在網(wǎng)站布局中一個示例的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
calc在css 中是一個函數(shù)，用來做數(shù)值的計算?？梢赃M行長度、角度、時間等的計算。支持 + 、 - 、 * 、 / 和小括號。使用的時候有個需要注意的地方是就是 加號和減號前后需要有個空格 。 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í)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
- 大家都知道Calc方法有個很大的好處就是用在流體布局上，可以通過calc()計算得到元素的寬度，本文通過一個例子給大家詳細介紹，需要的朋友參考下吧2021-06-03
CSS使用calc()獲取當(dāng)前可視屏幕高度的實現(xiàn)
這篇文章主要介紹了CSS使用calc()獲取當(dāng)前可視屏幕高度的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編2020-07-14深入理解CSS中的數(shù)學(xué)表達式calc()
數(shù)學(xué)表達式calc()是CSS中的函數(shù)，主要用于數(shù)學(xué)運算。這篇文章給大家介紹了CSS中的數(shù)學(xué)表達式calc()的相關(guān)知識，感興趣的朋友一起看看吧2020-01-19- 這篇文章主要介紹了淺析CSS中calc()的使用的相關(guān)資料,需要的朋友可以參考下2016-05-10
- CSS3新增的函數(shù)中有一個非常好用的函數(shù)，就是calc()函數(shù)，用過的都說好，這篇文章我們來嘮一老calc函數(shù)，感興趣的朋友一起看看吧2022-06-23