css height属性中的calc方法详解


Posted in HTML / CSS onJune 03, 2021

什么是calc()?

学习calc()之前,我们有必要先知道calc()是什么?只有知道了他是个什么东东?在实际运用中更好的使用他。

calc()从字面我们可以把他理解为一个函数function。其实calc是英文单词calculate(计算)的缩写,是css3的一个新增的功能,用来指定元素的长度。比如说,你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。为何说是动态值呢?因为我们使用的表达式来得到的值。不过calc()最大的好处就是用在流体布局上,可以通过calc()计算得到元素的宽度。

例如父盒子是100%的高度

盒子里面的head部分固定位140px
内容部分始终为剩余的全部高度
height: calc(100% - 140px);    "+或-"两边要有空格 不然不生效

父盒子.pushQueryPanelContainer{
  height: 100%;
}
内容部分
.pushQueryPanelContainer .queryTable{
  height: calc(100% - 55px);
  margin-left: 10px;
  margin-right: 10px;
}

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

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

支持版本:CSS3

语法

  calc(expression)

 

描述
expression 必须,一个数学表达式,结果将采用运算后的返回值。

到此这篇关于css height属性中的calc方法的文章就介绍到这了,更多相关css height属性内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
CSS3之2D与3D变换的实现方法
Jan 28 HTML / CSS
HTML5应用之文件上传
Dec 30 HTML / CSS
HTML5探秘:用requestAnimationFrame优化Web动画
Jun 03 HTML / CSS
html5 标签
Jul 16 HTML / CSS
在html5的Canvas上绘制椭圆的几种方法总结
Jan 07 HTML / CSS
HTML5通用接口详解
Jun 12 HTML / CSS
Canvas与图片压缩的示例代码
Nov 28 HTML / CSS
html5 canvas简单封装一个echarts实现不了的饼图
Jun 12 HTML / CSS
AmazeUI 面板的实现示例
Aug 17 HTML / CSS
CSS 还能这样玩?奇思妙想渐变的艺术
Apr 27 HTML / CSS
css常用字体属性与背景属性介绍
Feb 28 HTML / CSS
六个好看实用的 HTML + CSS 后台登录入口页面
Apr 28 HTML / CSS
html+css实现文字折叠特效实例
html+css实现分层金字塔的实例
html+css实现赛博朋克风格按钮
HTML+CSS制作心跳特效的实现
浅谈CSS不规则边框的生成方案
May 25 #HTML / CSS
详解CSS故障艺术
HTML中的表单Form实现居中效果
May 25 #HTML / CSS
You might like
PHP 面向对象实现代码
2009/11/11 PHP
php中的注释、变量、数组、常量、函数应用介绍
2012/11/16 PHP
关于crontab的使用详解
2013/06/24 PHP
php 中文字符串首字母的获取函数分享
2013/11/04 PHP
php用正则表达式匹配中文实例详解
2013/11/06 PHP
php file_get_contents抓取Gzip网页乱码的三种解决方法
2013/11/12 PHP
php安装扩展mysqli的实现步骤及报错解决办法
2017/09/23 PHP
PHP Swoole异步Redis客户端实现方法示例
2019/10/24 PHP
JavaScript中window、doucment、body的解释
2013/08/14 Javascript
JS onmousemove鼠标移动坐标接龙DIV效果实例
2013/12/16 Javascript
JSON中双引号的轮回使用过程中一定要小心
2014/03/05 Javascript
Jquery Ajax方法传值到action的方法
2014/05/11 Javascript
理解jQuery stop()方法
2014/11/21 Javascript
jQuery用noConflict代替$的实现方法
2017/04/12 jQuery
前端把html表格生成为excel表格的实例
2017/09/19 Javascript
vue实现消息的无缝滚动效果的示例代码
2017/12/05 Javascript
vue设计一个倒计时秒杀的组件详解
2019/04/06 Javascript
JS实现判断数组是否包含某个元素示例
2019/05/24 Javascript
vue组件库的在线主题编辑器的实现思路
2020/04/03 Javascript
vue-cli3 引入 font-awesome的操作
2020/08/11 Javascript
javascript使用正则表达式实现注册登入校验
2020/09/23 Javascript
TypeScript魔法堂之枚举的超实用手册
2020/10/29 Javascript
Python中的random()方法的使用介绍
2015/05/15 Python
Python操作Excel之xlsx文件
2017/03/24 Python
pytorch: tensor类型的构建与相互转换实例
2018/07/26 Python
Django 开发调试工具 Django-debug-toolbar使用详解
2019/07/23 Python
python实现将range()函数生成的数字存储在一个列表中
2020/04/02 Python
Python如何将装饰器定义为类
2020/07/30 Python
SVG实现多彩圆环倒计时效果的示例代码
2017/11/21 HTML / CSS
html5利用canvas实现颜色容差抠图功能
2019/12/23 HTML / CSS
编写用C语言实现的求n阶阶乘问题的递归算法
2014/10/21 面试题
介绍一下ICMP(Internet Control Message Protocol)Internet控制信息协议
2016/11/26 面试题
九年级科学教学反思
2014/01/29 职场文书
女生抽烟检讨书
2014/10/05 职场文书
python 如何在list中找Topk的数值和索引
2021/05/20 Python
Python re.sub 反向引用的实现
2021/07/07 Python