css中的计算函数calc在网站布局中一个示例
发布时间：2019-08-12 16:15:12 作者：森林 
我要评论
我要评论这篇文章主要介绍了css中的计算函数calc在网站布局中一个示例的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
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
最新评论