More than code
Welcome to the website

CSS3的calc()使用

前言

平时在制作页面的时候,总会碰到有的元素是100%的宽度。如果元素宽度为100%时,如果改变了默认的盒模型,那就有可能导致盒子撑破。比如说,有一个边框,或者说有margin和padding,这些都会让你的盒子撑破。换句话来说,如果你的元素宽度是100%时,只要你在元素中添加了border,padding,margin任何一值,都将会把元素盒子撑破(标准模式下,除IE怪异模式)。这样一来就会相当的麻烦,平时我们碰到这样的现象时,也是相当的谨慎,有时甚至无法解决,只能通过改变结构来实现。就算通过繁琐的方法实现了,但有于浏览器的兼容性而导致最终效果不一致。虽然前面介绍的CSS3属性中的box-sizing在一定程度上解决这样的问题,其实今天的calc()函数功能实现上面的效果来得更简单。

什么是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()使用通用的数学运算规则,但是也提供更智能的功能:

  1. 使用“+”、“-”、“*” 和 “/”四则运算;
  2. 可以使用百分比、px、em、rem等单位;
  3. 可以混合使用各种单位进行计算;
  4. 表达式中有“+”和“-”时,其前后必须要有空格,如”widht: calc(12%+5em)”这种没有空格的写法是错误的;
  5. 表达式中有“*”和“/”时,其前后可以没有空格,但建议留有空格。

浏览器的兼容性

目前大部分浏览器都已支持该属性,比较老的浏览器还是要加上浏览器前缀

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

案例

<!--html-->
<div class="main">
   <div class="box"></div>
</div>
/*css*/
.main {
   width: 300px;
   background-color: royalblue;
   border: 5px solid black;
}
.box {
   height: 80px;
   width: 100%;
   padding: 20px;
   border: 2px solid red;
   background-color: purple;
}

效果如图:

对css改进:

 /*css*/
 .main {
   width: 300px;
   background-color: royalblue;
   border: 5px solid black;
 }
 .box {
   height: 80px;
   width: -moz-calc(100% - (20px + 5px) * 2);
   width: -webkit-calc(100% - (20px + 5px) * 2);
   width: calc(100% - (20px + 5px) * 2);
   padding: 20px;
   border: 5px solid red;
   background-color: purple;
 }

效果如图:

赞(1) 打赏
未经允许不得转载:李帅帅空间 » CSS3的calc()使用

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏