CSS3 calc() 函数，height: calc(100%

今天做练习的时候遇到了这样一行代码：height: calc(100% - 70px);，100%的高度减去70px？？？这是什么函数？竟然支持不同单位之间的运算？！

通过查阅资料，我终于认识了这个函数——calc()函数。

calc()函数是CSS3 提出的，目的是动态改变宽度/高度的变化，适配问题。

<div><div class=“head”>标题</div><div class=“contain”>内容</div>
</div>
<style>.head{height: 70px;}.contain{height: calc(100% - 170px);;}
</style>

对于以上代码，如果我们要让盒子中的“内容”占满“标题”以下的所有区域，可以给“标题”设置一个固定值（70px），然后让“内容”的高为100%减去“标题”的高度，只需要设置样式使用calc() 函数就可以了！

使用calc()函数时需要注意以下几点：

calc()函数用于动态计算长度值。
calc()函数支持 “+”, “-”, “*”, “/” 运算，运算符前后都需要保留一个空格。
calc()函数使用标准的数学运算优先级规则。

既然说到了CSS，那就总结一下CSS中几个常用的函数吧~

函数	描述
attr()	返回选择元素的属性值。
cubic-bezier()	定义了一个贝塞尔曲线(Cubic Bezier)。
hsl()	使用色相、饱和度、亮度来定义颜色。
hsla()	使用色相、饱和度、亮度、透明度来定义颜色。
linear-gradient()	创建一个线性渐变的图像
radial-gradient()	用径向渐变创建图像。
repeating-linear-gradient()	用重复的线性渐变创建图像。
repeating-radial-gradient()	类似 radial-gradient()，用重复的径向渐变创建图像。
rgb(a,b,c)	使用a,b,c三个颜色的叠加来生成各式各样的颜色。
rgba(a,b,c,n)	使用a,b,c三个颜色以及透明度的叠加来生成各式各样的颜色。
var()	插入自定义的属性值。

CSS3 calc() 函数，height: calc(100% - 70px)；相关推荐

calc()函数 css中用100%的宽度/高度，减去50px？？
做项目的时候常常用遇到下面这种情况: 要让B盒子占满 A盒子剩下的部分也就是黄框区域,这时候我们可以设置 B盒子高为 100% 或者是100vh减去上面的 A盒子的高度50px. 只需设置样式使用c ...
CSS calc()函数
一.calc()函数介绍 calc() 函数用于动态计算长度值需要注意的是,运算符前后都需要保留一个空格,例如:width: calc(100% - 10px): 任何长度值都可以使用calc()函 ...
CSS calc() 函数
CSS calc() 函数 width: calc(100% - 100px); calc()是一个css运算函数,上述表示在继承的父级100%宽度的情况下动态减去了100px 需要注意的是,运算符前 ...
web前端入门学习 css（8）（新增语义化标签、video/audio、新增input类型、新增表单属性、属性选择器、结构伪类选择器、伪元素选择器、css3盒子模型、模糊、calc函数、过渡
https://www.bilibili.com/video/BV1pE411q7FU?p=276 文章目录 html5新特性 html5新增语义化标签 header头部 nav导航 article内 ...
【uniapp】CSS3 的 calc() 函数使用表达式动态计算
前言 css3 中增加了 calc() 函数 calc() 函数语法:property: calc(expression) expression 表达式为: "+". " ...
CSS3属性calc函数（CSS3）
CSS3属性calc函数(CSS3) <!DOCTYPE html> <html lang="en"><head><meta charse ...
（九）HTML5+CSS3新特性：语义标签、多媒体标签、表单、新增选择器、盒子模型、模糊、calc函数、过渡
本文仅用作学习记录,学习视频为B站的pink老师文章目录 HTML5的新特性 HTML5新增的语义化标签 HTML5新增的多媒体标签 HTML5新增的input表单 HTML5新增的表单属性 CSS ...
CSS calc()函数与单位vh 常见height：100vh
calc() 函数属于CSS3版本内容,用于动态计算长度值.例如:width: calc(100% - 10px):需要注意的是,运算符前后都需要保留一个空格.calc()函数支持 "+&q ...
CSS3运算 calc()函数是怎么实现计算
CSS3运算 calc()函数是怎么实现计算 CSS3 的 calc() 函数允许我们在属性值中执行数学计算操作.例如,我们可以使用 calc() 指定一个元素宽的固定像素值为多个数值的和. .foo ...

CSS3 calc() 函数，height: calc(100% - 70px)；

CSS3 calc() 函数，height: calc(100% - 70px)；相关推荐

最新文章

热门文章