时间:2021-05-08
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 的兼容性
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
什么是calc()?calc()从字面我们可以把他理解为一个函数function。其实calc是英文单词calculate(计算)的缩写,是css3的一个新增的
REM方法calc()从字面我们可以把他理解为一个函数function。其实calc是英文单词calculate(计算)的缩写,是css3的一个新增的功能,用来
前言正如其名,calc是css3中新增的计算属性,让很多属性增加了一个表达式的说法;calc是英文单词calculate(计算)的缩写,是css3的一个新增的功
数学表达式calc()是CSS中的函数,主要用于数学运算。使用calc()为页面元素布局提供了便利和新的思路。本文将介绍calc()的相关内容定义数学表达式ca
作为一个新手去建设一个网站,在网站的布局方面是非常重要的,所以在网站建设的过程中,一定要注意网站的布局。一般情况下,都是采用div+css的方式进行网站布局