css3使用calc根据屏幕长宽等计算出值的用法

2022-07-20 66点热度 0人点赞 0条评论

CSS3 的 calc() 函数允许我们在属性值中执行数学操作。例如,我们可以使用 calc() 指定一个元素宽的固定像素值为多个数值的和。

.foo {
  width: calc(100px + 50px);
}

还可以使用父div宽度来计算(以下例子,父级div的宽度减去50px):

.foo {
    width: calc(100% - 50px);
}

其他示例:

其中50vw表示50%的viewport width(屏幕或者说可视屏幕的宽度)

100vh,意思就是100%的高度。

.foo {
    width: calc(50vmax + 3rem);
    padding: calc(1vw + 1em);
    transform: rotate( calc(1turn + 28deg) );
    background: hsl(100, calc(3 * 20%), 40%);
    font-size: calc(50vw / 3);
}

嵌套使用:

.foo {
    width: calc( 100% / calc(100px * 2) );
}

注意事项

经过测试,表达式中的加减乘除(+-*/)等符号,前后都要留一个空格,否则是不行的,需要注意!

admin

这个人很懒,什么都没留下

文章评论

您需要 登录 之后才可以评论