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 相关文章推荐
html5 css3 动态气泡按钮实例演示
Dec 02 HTML / CSS
表单button的outline在firefox浏览器下的问题
Dec 24 HTML / CSS
可自定义箭头样式的CSS3气泡提示框
Mar 16 HTML / CSS
CSS3 实现倒计时效果
Nov 25 HTML / CSS
HTML5标签使用方法详解
Nov 27 HTML / CSS
浅谈html5增强的页面元素
Jun 14 HTML / CSS
a标签下载链接的简单实现
Sep 13 HTML / CSS
Web前端页面跳转并取到值
Apr 24 HTML / CSS
canvas 阴影和图形变换的示例代码
Jan 02 HTML / CSS
html5中嵌入视频自动播放的问题解决
May 25 HTML / CSS
CSS3 制作精美的定价表
Apr 06 HTML / CSS
CSS三大特性继承性、层叠性和优先级详解
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
MySQL相关说明
2007/01/15 PHP
php flush类输出缓冲剖析
2008/10/19 PHP
PHP rawurlencode与urlencode函数的深入分析
2013/06/08 PHP
php使用百度ping服务代码实例
2014/06/19 PHP
XHTML下,JS浮动代码失效的问题
2009/11/12 Javascript
JavaScript高级程序设计(第3版)学习笔记3 js简单数据类型
2012/10/11 Javascript
jQuery Mobile的loading对话框显示/隐藏方法分享
2013/11/26 Javascript
js获取select标签的值且兼容IE与firefox
2013/12/30 Javascript
js实现鼠标点击文本框自动选中内容的方法
2015/08/20 Javascript
jquery实现跳到底部,回到顶部效果的简单实例(类似锚)
2016/07/10 Javascript
AngularJS 执行流程详细介绍
2016/08/18 Javascript
初识NodeJS服务端开发入门(Express+MySQL)
2017/04/07 NodeJs
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
2017/08/04 jQuery
JavaScript图片处理与合成总结
2018/03/04 Javascript
详解JS实现系统登录页的登录和验证
2019/04/29 Javascript
vue实现简单的日历效果
2020/09/24 Javascript
js实现简易点击切换显示或隐藏
2020/11/29 Javascript
Python的Tornado框架异步编程入门实例
2015/04/24 Python
Python的Django框架下管理站点的基本方法
2015/07/17 Python
Scrapy爬虫实例讲解_校花网
2017/10/23 Python
Python发展史及网络爬虫
2019/06/19 Python
pytorch载入预训练模型后,实现训练指定层
2020/01/06 Python
pytorch动态网络以及权重共享实例
2020/01/06 Python
Python环境管理virtualenv&virtualenvwrapper的配置详解
2020/07/01 Python
100%有机精油,美容油:House of Pure Essence
2018/10/30 全球购物
怎样写好创业计划书的内容
2014/02/06 职场文书
爱情寄语大全
2014/04/09 职场文书
2015年库房工作总结
2015/04/30 职场文书
刑事上诉状(量刑过重)
2015/05/23 职场文书
田径运动会广播稿
2015/08/19 职场文书
创业计划书之服装
2019/10/07 职场文书
使用canvas实现雪花飘动效果的示例代码
2021/03/30 HTML / CSS
用Python生成会跳舞的美女
2022/01/18 Python
分享python函数常见关键字
2022/04/26 Python
Python实现对齐打印 format函数的用法
2022/04/28 Python
分享几个实用的CSS代码块
2022/06/10 HTML / CSS