css样式中calc的含义是什么

css中,calc是计算的意思;calc可以理解为一个函数function,是calculate的缩写,用来指定一个元素的长度,calc可以给元素做计算,使用指定的单位值计算出长度值,语法为“元素{长度属性:calc(表达式)}”。

本教程操作环境:windows10系统、CSS3&&HTML5版本、Dell G3电脑。

css样式中的calc是什么意思

calc()从字面我们可以把他理解为一个函数function。其实calc是英文单词calculate(计算)的缩写,是css3的一个新增的功能,用来指定元素的长度。

比如说,你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。为何说是动态值呢?因为我们使用的表达式来得到的值。不过calc()最大的好处就是用在流体布局上,可以通过calc()计算得到元素的宽度。

calc()能做什么?

calc()能让你给元素的做计算,你可以给一个div元素,使用百分比、em、px和rem单位值计算出其宽度或者高度,比如说“width:calc(50% + 2em)”,这样一来你就不用考虑元素DIV的宽度值到底是多少,而把这个烦人的任务交由浏览器去计算。

calc()语法

calc()语法非常简单,就像我们小时候学加 (+)、减(-)、乘(*)、除(/)一样,使用数学表达式来表示:

.elm {  width: calc(expression);}

其中”expression”是一个表达式,用来计算长度的表达式。

calc()的运算规则

calc()使用通用的数学运算规则,但是也提供更智能的功能:

使用“+”、“-”、“*” 和 “/”四则运算;

可以使用百分比、px、em、rem等单位;

可以混合使用各种单位进行计算;

表达式中有“+”和“-”时,其前后必须要有空格,如”widht: calc(12%+5em)”这种没有空格的写法是错误的;

表达式中有“*”和“/”时,其前后可以没有空格,但建议留有空格。

大家在实际使用时,同样需要添加浏览器的前缀

 .elm {    /*Firefox*/    -moz-calc(expression);    /*chrome safari*/    -webkit-calc(expression);    /*Standard */    calc(); }

通过上面的了解,大家对calc()不在那么陌生,但对于实际的运用可能还是不太了解,那么大家就接下来跟我一起动手,通过实例来了解他吧。首先我们来看一个最常用的实例:

<div class="demo">     <div class="box"></div></div>

上面的结构很简单,就是一个div.demo的元素中包含了一个div.box的元素,接下来我们一步一步来看其中的变化。

第一步:添加普通样式:

.demo {    width: 300px;    background: #60f;}.box {  width: 100%;    background: #f60;    height: 50px;}

此时的效果很简单,就是div.box完全遮盖了div.demo,如下图所示:

css样式中calc的含义是什么

第二步,在div.box上添加border和padding

这一步很棘手的事情来了,在div.box上添加10px的内距padding,同时添加5px的border:

.demo {    width: 300px;    background: #60f;}.box {  width: 100%;  background: #f60;  height: 50px;  padding: 10px;  border: 5px solid green;}

为了更好的说明问题,我在div.demo上添加了一个padding:3px 0;

.demo {    width: 300px;    background: #60f;padding: 3px 0;  }.box {  width: 100%;  background: #f60;  height: 50px;  padding: 10px;  border: 5px solid green;}

这个时候大家不知道能否想到问题会发生在哪?其实很简单,这个时候div.box的宽度大于了其容器div.demo的总宽度,从而撑破容器伸出来了,如图所示:

css样式中calc的含义是什么

第三步,calc()的运用

为了解决撑破容器的问题,以前我们只能去计算div.box的宽度,用容器宽度减去padding和border的值,但有时候,我们苦于不知道元素的总宽度,比如说是自适应的布局,只知道一个百分值,但其他的值又是px之类的值,这就是难点,死卡住了。随着CSS3的出现,其中利用box-sizing来改变元素的盒模型类型实使实现效果,但今天我们学习的calc()方法更是方便。

知道总宽度是100%,在这个基础上减去boder的宽度(5px 2 = 10px),在减去padding的宽度(10px 2 = 20px),即”100% – (10px + 5px) * 2 = 30px” ,最终得到的值就是div.box的width值:

.demo {    width: 300px;    background: #60f;    padding: 3px 0;}.box {    background: #f60;    height: 50px;    padding: 10px;    border: 5px solid green;width: 90%;/*写给不支持calc()的浏览器*/    width:-moz-calc(100% - (10px + 5px) * 2);    width:-webkit-calc(100% - (10px + 5px) * 2);    width: calc(100% - (10px + 5px) * 2);}

这样一来,通过calc()计算后,div.box不在会超出其容器div.demo的宽度,如图所示:

css样式中calc的含义是什么

到此,关于“css样式中calc的含义是什么”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!

文章标题:css样式中calc的含义是什么,发布者:亿速云,转载请注明出处:https://worktile.com/kb/p/24932

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022年9月15日 上午1:34
下一篇 2022年9月15日 上午1:35

相关推荐

  • 如何像专业人士一样举办“有效会议”?

    有效会议不仅仅是设定议程并按时开始的问题,这篇文章我们要说的是如何像专业人士一样举办真正的“有效会议”。 想要举办一场有效会议,你要做的可不止告知会议议程和强调按时召开这些基本事项(虽然这些确实也很重要)。有效会议的真正关键是要以人性化的方式来组织和运行,而不是像机器一样流程化的来执行。 我们大多数…

    2022年3月20日
    11800
  • MySQL慢查询日志怎么设置

    一、概述 MySQL的慢查询日志是MySQL提供的一种日志记录,它用来记录在MySQL中响应时间超过阀值(long_query_time,单位:秒)的SQL语句。默认情况下,MySQL不启动慢查询日志。本文简单介绍如何开启慢查询日志,如何用mysqldumpslow分析慢查询。 二、慢查询日志设置 …

    2022年9月15日
    12000
  • Js变量or循环中的var和le的介绍

    目录 在for循环中使用var声明初始化带来的问题 解决方法 使用闭包 使用let变量初始化 for循环怎么处理用let和var声明的初始化变量? 总结 在for循环中使用var声明初始化带来的问题 // 一道经典面试题:var funcs = [];for (var i = 0; i < 3…

    2022年9月13日
    4500
  • vlookup函数匹配不出来的原因是什么

    vlookup函数匹配不出来的原因 一、单元格空白 1、首先任选一个单元格,输入“=E2=A9”,回车查看结果。 2、如果和图示一样,显示“FALSE”,说明原本应该一致的“E2”和“A9”并不一致。 3、接着我们在对应一列中使用“LEN”函数,可以看到数值不一样,一个3一个5。 4、这时候,我们只…

    2022年9月24日
    53900
  • windows浩辰cad看图王测量尺寸不对怎么解决

    解决方法: 1、我们可以看到首次测量的距离如图所示,发现与已知尺寸不同。 2、这时候我们点击窗口最下方的对象捕捉,如图所示、 3、再点击上方测量中的“距离” 4、然后我们将鼠标移动到需要测量的点,会发现软件会自动帮你定位。 5、选取第一个点后,再使用相同的方法选取第二个点。 6、选取完成后按下键盘“…

    2022年9月21日
    11100
  • 用于黑客渗透测试的Linux工具有哪些

    用于黑客渗透测试的 Kali Linux 工具 Kali Linux 预装了几种类型的工具。如果你发现有的工具没有安装,只需下载并进行设置即可。这很简单。 1、Nmap Nmap Nmap (即 “ 网络映射器(Network Mapper)”)是 Kali Linux 上很受欢迎的信息收集工具之一…

    2022年9月1日
    12500
  • SQL窗口函数之排名窗口函数怎么使用

    取值窗口函数可以用于返回窗口内指定位置的数据行。常见的取值窗口函数如下: LAG函数可以返回窗口内当前行之前的第N行数据。LEAD函数可以返回窗口内当前行之后的第N行数据。FIRST_VALUE函数可以返回窗口内第一行数据。LAST_VALUE函数可以返回窗口内最后一行数据。NTH_VALUE函数可…

    2022年9月10日
    8600
  • mysql列转行函数指的是什么

    在mysql中,列转行函数是“group_concat()”函数;该函数用于将非空列值按照分组条件进行合并并最终返回,如果其中有空值则返回的结果是空,语法为“select group_concat(name separator ‘;’)列名 from 表名;”。 本教程操作环…

    2022年9月16日
    43700
  • WEB开发中常见漏洞防御方法是什么

    SQL注入漏洞 SQL注入漏洞产生原因及危害 在sql查询中很多程序员会将变量拼接入sql语句后再进行查询,这样如果黑客在参数中插入其他sql语句就可能导致我们网站的密码被被黑客查询出来或者被拖取大量数据,如果在开发中使用了字符串拼接进SQL语句就必须进行严格的过滤,任何用户输入的内容都不可信任,以…

    2022年9月26日
    5100
  • Git远程仓库配置SSH怎么实现

    1. 设置本地git账户邮箱和用户名 输入命令git config –global user.name “Git账号”以及git config –global user.email “Git邮箱”。 输入命令git config –global –list,查看配置是否正确。 2. 生成新的…

    2022年9月20日
    5200
联系我们
关注微信
关注微信
分享本页
返回顶部
PingCode 比 Jira 更好用的研发管理工具。免费试用