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 相关文章推荐
利用SVG和CSS3来实现一个炫酷的边框动画
Jul 22 HTML / CSS
浅谈CSS3特性查询(Feature Query: @supports)功能简介
Jul 31 HTML / CSS
浅析CSS3 用text-overflow解决文字排版问题
Oct 28 HTML / CSS
HTML5表格_动力节点Java学院整理
Jul 11 HTML / CSS
canvas基础之图形验证码的示例
Jan 02 HTML / CSS
HTML 5 标签、属性、事件及浏览器兼容性速查表 附打包下载
Oct 20 HTML / CSS
HTML5 实现一个访问本地文件的实例
Dec 13 HTML / CSS
canvas像素点操作之视频绿幕抠图
Sep 11 HTML / CSS
如何给HTML标签中的文本设置修饰线
Nov 18 HTML / CSS
HTML实现代码雨源码及效果示例
Feb 25 HTML / CSS
HTML5 直播疯狂点赞动画实现代码 附源码
Apr 14 HTML / CSS
css实现两栏布局,左侧固定宽,右侧自适应的多种方法
Aug 07 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
虹吸式咖啡探讨–研磨
2021/03/03 冲泡冲煮
php5 mysql分页实例代码
2008/04/10 PHP
使ecshop模板中可引用常量的实现方法
2011/06/02 PHP
PHP中使用Imagick读取pdf并生成png缩略图实例
2015/01/21 PHP
CI框架入门之MVC简单示例
2016/11/21 PHP
Laravel 数据库加密及数据库表前缀配置方法
2019/10/10 PHP
asp javascript 实现关闭窗口时保存数据的办法
2007/11/24 Javascript
JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参
2011/01/06 Javascript
Jquery ajaxStart()与ajaxStop()方法(实例讲解)
2013/12/18 Javascript
JavaScript的21条基本知识点
2014/03/04 Javascript
js如何实现淡入淡出效果
2020/11/18 Javascript
使用BootStrap实现标签切换原理解析
2017/03/14 Javascript
Jquery获取radio选中的值
2017/05/05 jQuery
AngularJS 支付倒计时功能实现思路
2017/06/05 Javascript
Node.js使用MySQL连接池的方法实例
2018/02/11 Javascript
jQuery实现菜单的显示和隐藏功能示例
2018/07/24 jQuery
vue模块拖拽实现示例代码
2019/03/09 Javascript
[01:08:33]OG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[03:35]2018年度DOTA2最佳辅助位选手5号位-完美盛典
2018/12/17 DOTA
[33:19]完美世界DOTA2联赛PWL S2 PXG vs InkIce 第一场 11.26
2020/11/30 DOTA
Python3使用正则表达式爬取内涵段子示例
2018/04/22 Python
pandas值替换方法
2018/07/10 Python
python 使用sys.stdin和fileinput读入标准输入的方法
2018/10/17 Python
Python处理session的方法整理
2019/08/29 Python
Python使用scipy模块实现一维卷积运算示例
2019/09/05 Python
Python如何对XML 解析
2020/06/28 Python
Selenium环境变量配置(火狐浏览器)及验证实现
2020/12/07 Python
Tessabit美国:集世界奢侈品和设计师品牌的意大利精品买手店
2020/06/29 全球购物
省优秀教师事迹材料
2014/01/30 职场文书
年度优秀员工获奖感言
2014/08/15 职场文书
2014年小学教学工作总结
2014/11/13 职场文书
银行催款通知书
2015/04/17 职场文书
九年级化学教学反思
2016/02/22 职场文书
Flask搭建一个API服务器的步骤
2021/05/28 Python
我们认为中短波广播场强仪的最佳组合
2022/04/05 无线电
win11系统中dhcp服务异常什么意思? Win11 DHCP服务异常修复方法
2022/04/08 数码科技