css中的計(jì)算函數(shù)calc在網(wǎng)站布局中一個(gè)示例
發(fā)布時(shí)間：2019-08-12 16:15:12 作者：森林 
我要評(píng)論
我要評(píng)論這篇文章主要介紹了css中的計(jì)算函數(shù)calc在網(wǎng)站布局中一個(gè)示例的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
calc在css 中是一個(gè)函數(shù)，用來做數(shù)值的計(jì)算。可以進(jìn)行長(zhǎng)度、角度、時(shí)間等的計(jì)算。支持 + 、 - 、 * 、 / 和小括號(hào)。使用的時(shí)候有個(gè)需要注意的地方是就是 加號(hào)和減號(hào)前后需要有個(gè)空格 。 calc 大大的增加了css的靈活性。給一些特殊的布局，提供了方便。
示例的顯示的效果
使用cacl 布局的一個(gè)示例
想做個(gè)一個(gè)效果, 就是在 #div1 的背景，延伸到 #div2 可見區(qū)域，在 #div2 顯示固定60個(gè)像素。就是黑色框?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 的兼容性
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
- 大家都知道Calc方法有個(gè)很大的好處就是用在流體布局上，可以通過calc()計(jì)算得到元素的寬度，本文通過一個(gè)例子給大家詳細(xì)介紹，需要的朋友參考下吧2021-06-03
CSS使用calc()獲取當(dāng)前可視屏幕高度的實(shí)現(xiàn)
這篇文章主要介紹了CSS使用calc()獲取當(dāng)前可視屏幕高度的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編2020-07-14深入理解CSS中的數(shù)學(xué)表達(dá)式calc()
數(shù)學(xué)表達(dá)式calc()是CSS中的函數(shù)，主要用于數(shù)學(xué)運(yùn)算。這篇文章給大家介紹了CSS中的數(shù)學(xué)表達(dá)式calc()的相關(guān)知識(shí)，感興趣的朋友一起看看吧2020-01-19- 這篇文章主要介紹了淺析CSS中calc()的使用的相關(guān)資料,需要的朋友可以參考下2016-05-10
- CSS3新增的函數(shù)中有一個(gè)非常好用的函數(shù)，就是calc()函數(shù)，用過的都說好，這篇文章我們來嘮一老calc函數(shù)，感興趣的朋友一起看看吧2022-06-23