经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » HTML/CSS » CSS3 » 查看文章
CSS中这个函数你会用吗?垂直居中都可以设置
来源:今日头条  作者:小郑搞码事  时间:2019/8/23 11:44:13  对本文有异议

今天给大家分享一个CSS函数(calc)从认识到如何实现元素居中的事。

没错,今天要说的就是calc函数的功能,先来简单认识一下。

一、认识一下calc函数

这个函数出自于CSS3的功能,可以用来动态计算长度值。不要想太复杂,更不需要说的太多,只需要记住下面几点,就足够了熟悉它了:

第一,可以组合使用不同单位

如百分比,PX,rem等等,举个例子:

1.jpg

看了吧,上面代码中DOM的宽度可以使用百分比与PX计算得到,也就是说可以组合不同单位来计算。

第二,使用calc的结果是表达式本身而非结果值

这是什么意思呢?还是以上面这段CSS代码为例子,编译后运行在浏览器中仍然是一个表达式,而不是表达式计算出来的值,这就意味着宽度可以随父元素宽度变化而变化。如下所示:

2.gif

从上述效果看出,和认识的一样。

第三,兼容性及处理办法

3.jpg

从上图可以看出,兼容性也还是不错的,当然,对于一些不兼容的浏览器我们也会给上一个固定的值。如下所示:

4.jpg

关于这个函数功能认识到这里,它的作用就非常多了,下面使用它来实现元素的垂直居中。看看怎么实现。

二、如何实现垂直居中

关键代码如下:

5.jpg

需要注意的是,使用的是top值,而不是margintop,因为margintop拿不到水平的高度值。

6.jpg

如果想简单实现垂直居中,使用calc也是一种办法。

总结

文章一开始带大家了解了calc函数特性,这个是最重要的,因为只有你记住,知道了它有哪些特点才会将它应用到所有可能应用的场景。发挥这个属性的作用,实现垂直居中就是其中之一。


 友情链接: NPS