最新消息:前端博客、web前端博客、Angularjs、javascript、jQuery、HTML5、CSS3

css中calc的正确使用方式

CSS&HTML AZ 1174浏览 0评论

CSS3 calc()函数允许我们对属性值执行数学运算。 例如,声明一个元素宽度的静态像素值,而不是使用calc()来指定宽度是添加两个或多个数值的结果。

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

像SASS这样的CSS预处理器

.foo { width: 120px + 50px; } // Or using SASS variables

$width-one: 120px;

$width-two: 50px;

.bar { width: $width-one + $width-two; }

然而, calc()函数提供了一个更好的解决方案有两个原因。 首先, 我们可以组合不同的单位 。 具体来说,我们可以将相对单位(如百分比和视口单位)与像素等绝对单位相混合。 例如,我们可以创建一个从百分比值中减去像素值的表达式。

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

在此示例中, .foo元素将始终具有比父宽度的100%小50像素的宽度。

第二,使用calc() , 计算的值是表达式本身 ,而不是表达式的结果值。 当使用CSS预处理器进行数学表达式时,给浏览器的值是表达式的结果值。

// Value specified in SCSS

.foo { width: 100px + 50px; } // Compiled CSS and computed value in browser

.foo { width: 150px; }

但是,使用calc() ,浏览器解析的值是实际的calc()表达式。

// Value specified in CSS

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

这意味着浏览器中的值可以更加动态,并且随着视口的变化而适应。 我们可以有一个具有视口高度的元素减去一个绝对值,并且它会随着视口的变化而适应。
使用calc()

calc()函数可用于使用数值属性值执行加法,减法,乘法和除法运算。 具体来说,它可以与<length> , <frequency> , <angle> , <time> , <number>或<integer> 数据类型一起使用 。

这里有几个例子 –

.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); }

calc()函数可以嵌套。 然而,内部函数将被视为简单的括号表达式。 以下列嵌套表达式为例:

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

该函数的计算值如下:

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

对calc()的浏览器支持比较普遍。

对于不支持calc()作为值的浏览器,整个property-value表达式将被忽略。 这意味着我们可以轻松提供将由不支持浏览器使用的备用静态值。

.foo { width: 90%; /* Fallback for older browsers */ width: calc(100% – 50px); }

什么时候可以使用calc() ?

calc()函数可以在各种情况下使用。
示例1 – 居中元素

使用calc()为我们提供了另一种解决方案,解决了在容器内水平和垂直居中对齐元素的古老问题。 如果我们知道子元素的尺寸,典型的解决方案是使用负边距将元素的高度和宽度移动一半,如下所示:

// Assuming .foo is 300px height and 300px width

.foo { position: absolute top: 50%; left: 50%; marging-top: -150px; margin-left: -150px; }

使用calc()函数,我们可以使用仅在顶部和左侧的属性实现所有这些。

.foo { position: absolute top: calc(50% – 150px); left: calc(50% – 150px); }

随着Flexbox的引入,这样的方法不太可能需要。 但是,在不能使用Flexbox的情况下,例如,如果元素需要绝对定位或固定,则此方法可能很有用。
示例2 – 创建根网格大小

calc()函数可用于在rem单元中创建基于视口的网格。 我们可以通过将根元素的font-size设置为完整视口宽度的一小部分来实现。

html { font-size: calc(100vw / 30); }

现在, 1rem将与视口宽度的1/30相关。 对于我们页面上的任何文本,这意味着它将根据视口进行自动缩放。 此外,给定与视口相同的维度,不管视口的实际尺寸如何,相同数量的文本将始终在屏幕上。

如果我们使用rem单位在页面上设置其他非文本元素,他们也将遵循此行为。 宽度为1rem的元素将始终为视口宽度的1/30。
示例3 – 清晰度

最后, calc()可以用于使任何计算更加明显。 例如,如果您想要一组项目的父容器的宽度的1/6,您可以这样写 –

.foo { width: 16.666666667%; }

不过,上面的CSS可以写成下面这种方式,更方便CSS阅读。

.foo { width: calc(100% / 6); }

有更多的事情我们可以使用calc() ,如创建一个网格系统 。 这绝对是CSS中最有用的新功能之一。

 

转载请注明:TUTERM.COM » css中calc的正确使用方式

如果您觉得本文的内容对您的学习有所帮助,您可以支付宝(左)或微信(右):
alipay weichat

您必须 登录 才能发表评论!