calc()的使用

平时写CSS时候可能遇到宽度或者高度需要计算的情况，简单的时候，算算padding,margin就行了，单位或是px或是%。但是有时候需要复杂一点的，比如这次我需要计算（100vh - 50px）的值，那就需要calc()了。

calc()的运算规则

支持“+”、“-”、“*” 、“/”四则运算；
可以使用百分比、px、em、rem、vh、vm等单位；
可以混合使用各种单位进行计算；

书写注意

表达式中有“+”和“-”时，其前后必须要有空格，如”widht: - calc(12%+5em)”这种没有空格的写法是错误的；
表达式中有“*”和“/”时，其前后可以没有空格，但建议留有空格。
考虑兼容性的话可以这样写：

/*Firefox*/
-moz-calc(expression);
/*chrome safari*/
-webkit-calc(expression);
/*Standard */
calc();

EX

.tablf {padding: 0px;height:93vh;/*如果不支持calc就用这个啦*/overflow:auto;height:-moz-calc(100vh - 50px);height:-webkit-calc(100vh - 50px);height: calc(100vh - 50px);
}

CSS3之计算长度值------calc()相关推荐

【CSS】calc 函数（动态计算长度值）
文章目录基本用法基本用法 calc() 函数用于动态计算长度值. 需要注意的是: 1. 运算符前后都需要保留一个空格,例如: width: calc(100% - 10px): 2. 任何长度值都 ...
css 中动态获取宽度,css中的calc动态计算长度值
1 场景 css的样式中,存在动态计算长度的需求. 2 方案使用css中的calc函数动态计算css中的长度值. 语法: calc(expression) 参数说明: 值描述 expression ...
微信小程序中可以使用calc 函数用于动态计算长度值。
需要注意的是,运算符前后都需要保留一个空格,例如:width: calc(100% - 10px): 任何长度值都可以使用calc()函数进行计算: calc()函数支持 "+", ...
Css3新属性：calc()
一.前言 calc()看起来像是javascript中的一个函数,而事实上它是用在Css中的,可以用它来计算长度(宽度或高度),能够自动根据不同尺寸的屏幕自动调接数值,从而很轻松的实现自适应布局展示在 ...
CSS3 background-size 属性值：cover
当设置值为cover,可以呈现出图片铺满浏览器内容的视觉效果实例规定背景图像的尺寸: div { background:url(img_flwr.gif); background-size:80p ...
css3圆角每个值的意思，文本框默认有字鼠标移动字体消失
CSS3 border-radius - 指定每个圆角如果你在 border-radius属性中只指定一个值,那么将生成 4个圆角. 但是,如果你要在四个角上一一指定,可以使用以下规则: · ...
2_31_CSS 属性、CSS与CSS3的属性值和单位_191022
css属性 font-family font-size font-style color 一.CSS属性值和单位 1.字符如果值为若干单词,则要给值加引号. 如:p{ font-family:&qu ...
基础知识 | css基础知识
css概述定义:Cascading style 层叠样式表,简称样式作用:美化页面 css与html属性的使用原则 html属性:代码不能充裕,只对一个元素生效代码没有维护性 css:代码有一定 ...
css3 的 calc()函数在布局中的使用----头部高度固定，页面正好占满一屏
最近项目遇到一个布局需求,头部高度固定,页面需要刚好占满一屏幕. 如下示意图: 方法:使用calc .wrap{position: relative;margin-left: 24px;margin- ...

CSS3之计算长度值------calc()

calc()的使用

calc()的运算规则

书写注意

EX

CSS3之计算长度值------calc()相关推荐

最新文章

热门文章