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五个技巧给你的网站带来出色的效果
Apr 02 HTML / CSS
CSS3之transition实现下划线的示例代码
May 30 HTML / CSS
css3 flex布局 justify-content:space-between 最后一行左对齐
Jan 02 HTML / CSS
css3弹性盒子flex实现三栏布局的实现
Nov 12 HTML / CSS
CSS3只让背景图片旋转180度的实现示例
Mar 09 HTML / CSS
W3C公布最新的HTML5标准草案
Oct 17 HTML / CSS
HTML5 Canvas——用路径描画线条实例介绍
Jun 09 HTML / CSS
html5实现完美兼容各大浏览器的播放器
Dec 26 HTML / CSS
HTML5全屏(Fullscreen)API详细介绍
Apr 24 HTML / CSS
简单介绍HTML5中的文件导入
May 08 HTML / CSS
HTML5中的进度条progress元素简介及兼容性处理
Jun 02 HTML / CSS
使用CSS3实现按钮悬停闪烁动态特效代码
Aug 30 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
PHP4与PHP3中一个不兼容问题的解决方法
2006/10/09 PHP
PHP中simplexml_load_string函数使用说明
2011/01/01 PHP
PHP中通过fopen()函数访问远程文件示例
2014/11/18 PHP
php验证码生成代码
2015/11/11 PHP
Thinkphp框架开发移动端接口(2)
2016/08/18 PHP
在Laravel 的 Blade 模版中实现定义变量
2019/10/14 PHP
学习jquery必备 api中英文对照的chm手册 下载
2007/05/03 Javascript
js获取提交的字符串的字节数
2009/02/09 Javascript
javascript 浏览器检测代码精简版
2010/03/04 Javascript
js格式化金额可选是否带千分位以及保留精度
2014/01/28 Javascript
JavaScript实现的encode64加密算法实例分析
2015/04/15 Javascript
JavaScript检查数字是否为整数或浮点数的方法
2015/06/09 Javascript
利用JavaScript判断浏览器类型及版本
2016/08/23 Javascript
jQuery简单实现列表隐藏和显示效果示例
2016/09/12 Javascript
Vue 仿百度搜索功能实现代码
2017/02/16 Javascript
详解NODEJS的http实现
2018/01/04 NodeJs
对angularjs框架下controller间的传值方法详解
2018/10/08 Javascript
傻瓜式解读koa中间件处理模块koa-compose的使用
2018/10/30 Javascript
p5.js临摹动态图形实现方法详解
2019/10/23 Javascript
原生JS实现汇率转换功能代码实例
2020/05/13 Javascript
python anaconda 安装 环境变量 升级 以及特殊库安装的方法
2017/06/21 Python
Python使用当前时间、随机数产生一个唯一数字的方法
2017/09/18 Python
在Python程序员面试中被问的最多的10道题
2017/12/05 Python
Python读取properties配置文件操作示例
2018/03/29 Python
PyQt4编程之让状态栏显示信息的方法
2019/06/18 Python
Pycharm最新激活码2019(推荐)
2019/12/31 Python
Ubuntu中配置TensorFlow使用环境的方法
2020/04/21 Python
python 基于DDT实现数据驱动测试
2021/02/18 Python
英国综合网上购物商城:The Hut
2018/07/03 全球购物
递归实现回文判断(如:abcdedbca就是回文,判断一个面试者对递归理解的简单程序)
2013/04/28 面试题
城市轨道交通工程职业规划书范文
2014/01/18 职场文书
法定代表人授权委托书
2014/04/04 职场文书
市政工程技术专业自荐书
2014/07/06 职场文书
一份没有按时交货失信于客户的检讨书
2014/09/19 职场文书
碧霞祠导游词
2015/02/09 职场文书
MySQL主从切换的超详细步骤
2022/06/28 MySQL