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实现漂亮便签样式
Mar 18 HTML / CSS
css3 iphone玻璃透明气泡完美实现
Mar 20 HTML / CSS
基于Jquery和Css3代码制作可以缩放的搜索框
Nov 19 HTML / CSS
利用CSS3的3D效果制作正方体
Mar 10 HTML / CSS
HTML 5 标签、属性、事件及浏览器兼容性速查表 附打包下载
Oct 20 HTML / CSS
HTML5注册表单的自动聚焦与占位文本示例代码
Jul 19 HTML / CSS
HTML5实现的图片无限加载的瀑布流效果另带边框圆角阴影
Mar 07 HTML / CSS
HTML5新增的8类INPUT输入类型介绍
Jul 06 HTML / CSS
html5实现移动端适配完美写法
Nov 16 HTML / CSS
HTML5 解决苹果手机不能自动播放音乐问题
Dec 27 HTML / CSS
html table呈现个人简历以及单元格宽度失效的问题解决
Jan 22 HTML / CSS
CSS3实现三角形不断放大效果
Apr 13 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通过iconv将字符串从GBK转换为UTF8字符集
2011/07/18 PHP
执行、获取远程代码返回:file_get_contents 超时处理的问题详解
2013/06/25 PHP
WordPress中用于更新伪静态规则的PHP代码实例讲解
2015/12/18 PHP
php获取数据库中数据的实现方法
2017/06/01 PHP
php curl获取到json对象并转成数组array的方法
2018/05/31 PHP
PHP5.5新特性之yield理解与用法实例分析
2019/01/11 PHP
把JS与CSS写在同一个文件里的书写方法
2007/06/02 Javascript
用函数式编程技术编写优美的 JavaScript_ibm
2008/05/16 Javascript
js 异步处理进度条
2010/04/01 Javascript
用javascript删除当前行,添加行(示例代码)
2013/11/25 Javascript
常用的JS验证和函数汇总
2014/12/23 Javascript
jQuery蓝色风格滑动导航栏代码分享
2015/08/19 Javascript
webpack实现热更新(实施同步刷新)
2017/07/28 Javascript
基于jQuery选择器之表单对象属性筛选选择器的实例
2017/09/19 jQuery
vue项目中v-model父子组件通信的实现详解
2017/12/10 Javascript
JavaScript实现数组全排列、去重及求最大值算法示例
2018/07/30 Javascript
React 使用recharts实现散点地图的示例代码
2018/12/07 Javascript
Python函数式编程指南(二):从函数开始
2015/06/24 Python
Python实现处理逆波兰表达式示例
2018/07/30 Python
使用Python实现一个栈判断括号是否平衡
2018/08/23 Python
Python写一个基于MD5的文件监听程序
2019/03/11 Python
详解mac python+selenium+Chrome 简单案例
2019/11/08 Python
在css3中background-clip属性与background-origin属性的用法介绍
2012/11/13 HTML / CSS
linux面试题参考答案(8)
2016/04/19 面试题
大专毕业生自我评价分享
2013/11/10 职场文书
工业自动化专业毕业生推荐信
2013/11/18 职场文书
前处理组长岗位职责
2014/03/01 职场文书
开门红主持词
2014/04/02 职场文书
七一党日活动总结
2014/07/08 职场文书
培训师岗位职责
2015/02/14 职场文书
追悼会悼词大全
2015/06/23 职场文书
护士年终工作总结不会写?各科护士模板总结
2020/01/02 职场文书
学会Python数据可视化必须尝试这7个库
2021/06/16 Python
JavaScript执行机制详细介绍
2021/12/06 Javascript
Dubbo+zookeeper搭配分布式服务的过程详解
2022/04/03 Java/Android
css中:last-child不生效的解决方法
2022/08/05 HTML / CSS