calc()函数

  • Post author:
  • Post category:其他


开发工具与关键技术:MVC/C#

作者:张文静

撰写时间:2019/4/8

calc:()函数用于动态计算长度值,calc是英文单词calculate(计算)的缩写,即

calc()运算符前后都需要保留一格空格,

任何长度值都可以使用calc()函数进行计算,

calc()函数支持”+ ”,”-”,”

”,”/”,

calc()函数支持使用标准的数学运算符优先级规则, 为了方便了解calc()函数的动态计算长度值,

第一步,举一个例子,见截图

在这里插入图片描述

然后添加它的普通样式,即div.case覆盖了div.develop,见截图,然后看它的执行效果

在这里插入图片描述

第二步,在div.case添加5px的border和10px的padding;然后在div.develop添加上、下内边距为3px和左、右内边距为0的padding,即

在这里插入图片描述

然后div.case的宽度 div.develop的宽度,从而撑破盒子

在这里插入图片描述

第三步,防止盒子被撑破

首先知道总的宽度是100%,在这个基础之上减去boder的宽度(5px

2=10px),然后再减去padding的宽度(10px

2=20px),即100% -(10px + 5px)

2=30px,得到div.case的width值:

在这里插入图片描述

然后通过calc()函数的计算后,div.case不会超出盒子的宽度,见截图:

在这里插入图片描述



版权声明:本文为weixin_44560027原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。