CSS3新增的函数中有一个非常好用的函数,就是calc()函数,用过的都说好,这篇文章我们来唠一老calc函数,感兴趣的朋友一起看看吧
calc函数怎么用
CSS的calc()
函数可以实现属性值的计算,例如下面这段代码:
1 |
|
这段代码通常会出现在布局中,64px
为顶部栏和底部栏的高度,这样就可以轻松实现Sticky Footer布局。
calc()
函数支持四则运算,但是乘法中必须有一个值是数字,除法的除数必须也是数字(不能是0)。
calc函数不生效?
在使用calc()
函数时,可能会出现不生效的问题,究其原因,就是你的VSCode没有开代码格式化功能(开个玩笑);如果我们将上面那带代码修改成:
1 |
|
他就不会生效,原因是这个属性值被解析成两个长度单位,分别是100vh
和-128px
,所以在我们使用****和******运算符时两边必须要有空白字符**。
使用calc函数完成一些布局方案
CSS3的calc()
函数可以帮助我们实现很多布局方案,我们依次介绍一下。
水平垂直居中
步骤如下:
-
使子元素相对于容器元素定位
-
子元素开启绝对定位
-
设置该元素的偏移量,值为
50% 减去宽度/高度的一半
实现CSS代码如下:
1 2 3 4 5 6 7 8 9 10 11 |
|
两列布局
步骤如下:
-
左边列开启浮动
-
右边列开启浮动
-
右边列宽度为父级 100%减去左列的宽度
实现CSS代码如下:
1 2 3 4 5 6 7 8 9 10 |
|
sticky footer布局
使用calc
函数实现sticky footer布局比较简单,中间的容器最少高度为视口宽度的100% - 头部和底部两部分的高度
即可完成该功能。
实现CSS代码如下:
1 2 3 4 |
|
全屏布局
实现步骤如下:
-
通过
calc
函数计算出中间容器的高度。 -
中间出现滚动条的容器设置
overflow: auto
即出现滚动条的时候出现滚动条。
实现CSS代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
|
到此这篇关于CSS的calc函数用法小结的文章就介绍到这了,希望可以对你有所帮助。