css中的计算函数calc在网站布局中一个示例
发布时间:2019-08-12 16:15:12 作者:森林 我要评论
这篇文章主要介绍了css中的计算函数calc在网站布局中一个示例的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
calc在css 中是一个函数,用来做数值的计算。可以进行长度、角度、时间等的计算。支持 +
、 -
、 *
、 /
和小括号。使用的时候有个需要注意的地方是就是 加号和减号前后需要有个空格 。 calc 大大的增加了css的灵活性。给一些特殊的布局,提供了方便。
示例的显示的效果
使用cacl 布局的一个示例
想做个一个效果, 就是在 #div1
的背景,延伸到 #div2
可见区域,在 #div2
显示固定60个像素。就是黑色框宽度是60px。而不用考虑 #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 的兼容性
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
- 大家都知道Calc方法有个很大的好处就是用在流体布局上,可以通过calc()计算得到元素的宽度,本文通过一个例子给大家详细介绍,需要的朋友参考下吧2021-06-03
- 这篇文章主要介绍了CSS使用calc()获取当前可视屏幕高度的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编2020-07-14
- 数学表达式calc()是CSS中的函数,主要用于数学运算。这篇文章给大家介绍了CSS中的数学表达式calc()的相关知识,感兴趣的朋友一起看看吧2020-01-19
- 这篇文章主要介绍了浅析CSS中calc()的使用的相关资料,需要的朋友可以参考下2016-05-10
- CSS3新增的函数中有一个非常好用的函数,就是calc()函数,用过的都说好,这篇文章我们来唠一老calc函数,感兴趣的朋友一起看看吧2022-06-23
最新评论