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 动画技术
Jul 27 HTML / CSS
CSS3 实现侧边栏展开收起动画
Dec 22 HTML / CSS
纯css3实现照片墙效果
Dec 26 HTML / CSS
canvas学习笔记之2d画布基础的实现
Feb 21 HTML / CSS
使用css3 属性如何丰富图片样式(圆角 阴影 渐变)
Nov 22 HTML / CSS
html5 worker 实例(二) 图片变换效果
Jun 24 HTML / CSS
HTML5制作酷炫音频播放器插件图文教程
Dec 30 HTML / CSS
详解HTML5中的拖放事件(Drag 和 drop)
Nov 14 HTML / CSS
canvas裁剪clip()函数的具体使用
Mar 01 HTML / CSS
CSS3实现的侧滑菜单
Apr 27 HTML / CSS
不要在HTML中滥用div
May 08 HTML / CSS
在CSS中使用when/else的方法
Jan 18 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
10条PHP编程习惯助你找工作
2008/09/29 PHP
如何突破PHP程序员的技术瓶颈分析
2011/07/17 PHP
一些需要禁用的PHP危险函数(disable_functions)
2012/02/23 PHP
php单链表实现代码分享
2016/07/04 PHP
PHP+JS实现的商品秒杀倒计时用法示例
2016/11/15 PHP
拖动Html元素集合 Drag and Drop any item
2006/12/22 Javascript
Chosen 基于jquery的选择框插件使用方法
2012/05/30 Javascript
用js一次改变多个input的readonly属性值的方法
2014/06/11 Javascript
用jquery修复在iframe下的页面锚点失效问题
2014/08/22 Javascript
jQuery实现可关闭固定于底(顶)部的工具条菜单效果
2015/11/06 Javascript
Canvas实现动态的雪花效果
2017/02/13 Javascript
JavaScript中的toString()和toLocaleString()方法的区别
2017/02/15 Javascript
vue 音乐App QQ音乐搜索列表最新接口跨域设置方法
2018/09/25 Javascript
微信小程序实现上拉加载功能示例【加载更多数据/触底加载/点击加载更多数据】
2020/05/29 Javascript
vue 导航锚点_点击平滑滚动,导航栏对应变化详解
2020/08/10 Javascript
浅析 Vue 3.0 的组装式 API(一)
2020/08/31 Javascript
Vue-Ant Design Vue-普通及自定义校验实例
2020/10/24 Javascript
[13:16]INFAMOUS vs VGJ T BO3
2018/06/07 DOTA
python将多个文本文件合并为一个文本的代码(便于搜索)
2011/03/13 Python
基于python实现文件加密功能
2020/01/06 Python
如何查看Django ORM执行的SQL语句的实现
2020/04/20 Python
详解canvas.toDataURL()报错的解决方案全都在这了
2020/03/31 HTML / CSS
全球最大的房车租赁市场:Outdoorsy
2018/09/19 全球购物
Python中如何定义一个函数
2016/09/06 面试题
运动会四百米广播稿
2014/01/19 职场文书
行政部工作岗位职责范本
2014/03/05 职场文书
工程造价专业大学生职业规划范文
2014/03/09 职场文书
结对共建协议书
2014/08/20 职场文书
领导干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
初三语文教学计划
2015/01/22 职场文书
淮阳太昊陵导游词
2015/02/10 职场文书
销区经理年终述职报告模板
2019/11/28 职场文书
Nginx配置https原理及实现过程详解
2021/03/31 Servers
MySQL配置主从服务器(一主多从)
2021/08/07 MySQL
JavaScript的Set数据结构详解
2022/02/18 Javascript
JavaScript中10个Reduce常用场景技巧
2022/06/21 Javascript