css中height中可以用计算公式

admin 轻心小站 关注 LV.19 运营
发表于前端技术学习版块 css,教程

CSS中的height属性是用来设置元素的高度的,通常情况下我们设置的都是像素或者百分比这样的具体数值来控制高度的大小。但是,你知道吗?在CSS3中,height属性还可以使用计算公式来进行设置,这样

CSS中的height属性是用来设置元素的高度的,通常情况下我们设置的都是像素或者百分比这样的具体数值来控制高度的大小。但是,你知道吗?在CSS3中,height属性还可以使用计算公式来进行设置,这样不仅可以让我们的CSS代码更加灵活,也可以避免设置固定数值带来的不适应性问题。

.container {
  height: calc(100vh - 100px); 
} 

如上代码所示,我们可以使用calc()函数来进行计算公式的设置。calc()函数接受类似于简单四则运算的数学表达式。在上面的例子中,我们将视口高度减去100像素作为我们容器的高度,从而达到了一定的适应性和灵活性。

另外,在使用计算公式的时候,还可以和其他单位进行混合使用,比如我们可以这样写:

.container {
  height: calc(50% - 20px);
} 

这里我们将元素的高度设置为父元素高度的一半再减去20像素,从而达到一定的自适应效果。

需要注意的是,由于calc()函数是CSS3新增的属性,因此并不兼容所有浏览器。在使用时需要特别注意兼容性问题,可以结合使用其他CSS属性或JS进行兼容性处理。

文章说明:

本文原创发布于探乎站长论坛,未经许可,禁止转载。

题图来自Unsplash,基于CC0协议

该文观点仅代表作者本人,探乎站长论坛平台仅提供信息存储空间服务。

评论列表 评论
发布评论

评论: css中height中可以用计算公式

粉丝

0

关注

0

收藏

0

已有0次打赏