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 相关文章推荐
利用CSS的Sass预处理器(框架)来制作居中效果
Mar 10 HTML / CSS
CSS3的文字阴影—text-shadow的使用方法
Dec 25 HTML / CSS
HTML5时代CSS设置漂亮字体取代图片
Sep 04 HTML / CSS
深入浅析css3 中display box使用方法
Nov 25 HTML / CSS
利用简洁的图片预加载组件提升html5移动页面的用户体验
Mar 11 HTML / CSS
基于HTML5的WebSocket的实例代码
Aug 15 HTML / CSS
html5贪吃蛇游戏使用63行代码完美实现
Jun 25 HTML / CSS
HTML5 Canvas自定义圆角矩形与虚线示例代码
Aug 02 HTML / CSS
基于HTML5的WebGL实现json和echarts图表展现在同一个界面
Oct 26 HTML / CSS
HTML5中的websocket实现直播功能
May 21 HTML / CSS
完美实现CSS垂直居中的11种方法
Mar 27 HTML / CSS
教你做个可爱的css滑动导航条
Jun 15 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 date函数参数详解
2006/11/27 PHP
php 验证码实例代码
2010/06/01 PHP
PHP 通过Socket收发十六进制数据的实现代码
2013/08/16 PHP
用JS实现一个页面多个css样式实现
2008/05/29 Javascript
JQUBAR1.1 jQuery 柱状图插件发布
2010/11/28 Javascript
jquery 快速回到页首的方法
2013/12/05 Javascript
用jQuery模拟select下拉框的简单示例代码
2014/01/26 Javascript
完美兼容各大浏览器获取HTTP_REFERER方法总结
2014/06/24 Javascript
js带缩略图的图片轮播效果代码分享
2015/09/14 Javascript
WEB前端开发都应知道的jquery小技巧及jquery三个简写
2015/11/15 Javascript
基于BootStrap的Metronic框架实现页面链接收藏夹功能按钮移动收藏记录(使用Sortable进行拖动排序)
2016/08/29 Javascript
Javascript基础回顾之(二) js作用域
2017/01/31 Javascript
如何使用proxy实现一个简单完整的MVVM库的示例代码
2019/09/17 Javascript
[54:56]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第三局
2016/03/06 DOTA
python求crc32值的方法
2014/10/05 Python
python:pandas合并csv文件的方法(图书数据集成)
2018/04/12 Python
Python 网络爬虫--关于简单的模拟登录实例讲解
2018/06/01 Python
python单例模式获取IP代理的方法详解
2018/09/13 Python
python实现顺序表的简单代码
2018/09/28 Python
django配置连接数据库及原生sql语句的使用方法
2019/03/03 Python
Python数据类型之Number数字操作实例详解
2019/05/08 Python
python通过SSH登陆linux并操作的实现
2019/10/10 Python
python创建学生成绩管理系统
2019/11/22 Python
如何基于python3和Vue实现AES数据加密
2020/03/27 Python
纯css3制作网站后台管理面板
2014/12/30 HTML / CSS
Nike西班牙官方网站:Nike.com (ES)
2017/10/30 全球购物
Gap工厂店:Gap Factory
2017/11/02 全球购物
创意爱尔兰礼物:Creative Irish Gifts
2020/01/29 全球购物
《猴子种树》教学反思
2014/02/14 职场文书
教室标语大全
2014/06/21 职场文书
2014大学生中国梦主题教育学习思想汇报
2014/09/10 职场文书
2015年全国爱眼日活动小结
2015/02/27 职场文书
复兴之路纪录片观后感
2015/06/02 职场文书
selenium.webdriver中add_argument方法常用参数表
2021/04/08 Python
在HTML中引入CSS的几种方式介绍
2021/12/06 HTML / CSS
详细介绍Java中的CyclicBarrier
2022/04/13 Java/Android