使用css的calc() 函数计算宽高

茫茫人海中我还是只看到了你。

什么是calc()？

calc() 函数用于动态计算长度值。

需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
任何长度值都可以使用calc()函数进行计算；
calc()函数支持 “+”, “-”, “*”, “/” 运算；
calc()函数使用标准的数学运算优先级规则；

语法

calc(expression)

举例

加法+

<template><div class="demo"><div class="item"></div></div>
</template><style lang="scss">
.demo{width: 400px;height: 400px;background: #999;.item{width: calc(100% + 200px);height: 100px;background: red;}
}
</style>

减法-

<template><div class="demo"><div class="item"></div></div>
</template><style lang="scss">
.demo{width: 400px;height: 400px;background: #999;.item{width: calc(100% - 200px);height: calc(100% - 100px);background: red;}
}
</style>

乘法 *

<template><div class="demo"><div class="item"></div></div>
</template><style lang="scss">
.demo{width: 400px;height: 400px;background: #999;.item{width: calc(100px * 2);height: calc(100px * 2);background: red;}
}
</style>

除法 /

<template><div class="demo"><div class="item"></div></div>
</template><style lang="scss">
.demo{width: 400px;height: 400px;background: #999;.item{width: calc(100% / 2);height: calc(100% / 2);background: red;}
}
</style>

calc及大的增加了了宽高计算的便利性。

使用css的calc() 函数计算宽高相关推荐

css3中使用calc()计算宽高
calc()是什么? 是CSS3中新增的一个函数,calculate(计算)的缩写.用于动态计算宽/高,你可以使用calc()给元素的各个属性设置值[margin.border.padding.fon ...
移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 )
序言:应朋友要求随手写了一下移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 ) ,以备后用 LESS代码: .adaptive-circle {margin: 50px auto 0;w ...
CSS计算 CSS运算 calc函数的使用方法
CSS也是可以进行运算的!!! CSS中的calc函数是可以对不同值进行计算的它可以在 <length>, <frequency>,<angle>, <ti ...
css实现九宫格，不定宽高百分比（使用padding实现Div高度根据自适应宽度（百分比）调整）
css实现九宫格,但不一定有9个,可能有8个.7个,每两个格子间距是10px,一行放置3个格子,格子宽高比为1:2(最右的面试题) <div class="box">& ...
【CSS】calc 函数（动态计算长度值）
文章目录基本用法基本用法 calc() 函数用于动态计算长度值. 需要注意的是: 1. 运算符前后都需要保留一个空格,例如: width: calc(100% - 10px): 2. 任何长度值都 ...
web前端CSS之“ calc() 函数”
1.定义 calc() 函数用于动态计算长度值. 2.用法需要注意的是,运算符前后都需要保留一个空格,例如:width: calc(100% - 10px): 任何长度值都可以使用calc()函数进 ...
编写css让一个已知宽高的div元素水平居中？垂直居中
让一个已知宽高的div元素水平居中 <style> #div1{ width:200px; height:200px; background:#F00; margin:0 auto; } ...
css background-image 背景图片自适应宽高
背景图片与标签宽高保持一致: div {background-image: url('路径'); background-repeat:no-repeat;background-size:100% 10 ...
Css之使用calc()计算宽高（vw/vh）
一.calc()的用途主要用于计算不确定值二.vw和vh的定义 vw.vh.vmin.vmax是一种视窗单位,也是相对单位.它相对的不是父节点或者页面的根节点.而是由视窗(Viewport)大小来 ...

使用css的calc() 函数计算宽高

什么是calc()？

语法

举例

加法+

减法-

乘法 *

除法 /

使用css的calc() 函数计算宽高相关推荐

最新文章

热门文章