css3 calc()

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css3 calc()相关的知识,希望对你有一定的参考价值。

概述

CSS函数calc()可以用在任何一个需要<length>的地方.有了calc(),你可以通过计算来决定一个对象的大小和形状.

你还可以在一个calc()内部嵌套另一个calc().

语法

如何阅读 CSS 语法。
calc(expression)

expression
一个数学表达式,该表达式的结果会作为最终的<length>.

表达式

该表达式中可以使用下面的几个运算符连接任意的简单表达式:

+
加法
-
减法
*
乘法
/
除法.

表达式中的操作数可以使用任意的长度语法.如果你愿意,你可以在一个表达式中混用多种不同的长度单位.在需要时,你还可以使用小括号来调整计算顺序.

例子

使用指定的外边距定位一个对象

使用calc()可以很容易的为一个对象设置一个左右两边相等的外边距.在这个例子中,使用CSS创建了一个横跨整个窗口的banner,该banner左右两边各有一个距离窗口边缘40像素的间距:

.banner {   position:absolute;   left: 40px;   width: 90%;                       /* fallback for browsers without support for calc() */   width: -webkit-calc(100% - 80px);  /* WebKit 536.3 (Chrome 19) and above, experimental */   width:         calc(100% - 80px);  /* final CSS3 compliant implementation; Firefox 16 and IE 9, and above */   border: solid black 1px;   box-shadow: 1px 2px;   background-color: yellow;   padding: 6px;   text-align: center; }
<div class="banner">This is a banner!</div>

 

 

自动调整表单域的大小以适应其容器的大小

calc()的另外一个用例是用来确保一个表单域的大小适合当前的可用空间,而不会在保持合适的外边距的同时,因挤压超出其容器的边缘.


 

看一下下面的CSS:

input {   padding: 2px;   display: block;   width:  98%;                      /* fallback for browsers without support for calc() */   width: -webkit-calc(100% - 1em);  /* WebKit 536.3 (Chrome 19) and above, experimental */   width:         calc(100% - 1em);  /* final CSS3 compliant implementation; IE 9 and above */ }  #formbox {   width:  130px;                 /* fallback for browsers without support for calc() */   width:    -moz-calc(100% / 6);   /* Gecko 2.0 (Firefox 4) and above, experimental, will be dropped */   width: -webkit-calc(100% / 6);   /* WebKit 536.3 (Chrome 19) and above, experimental */   width:         calc(100% / 6);   /* final CSS3 compliant implementation; Firefox 16 and IE 9, and above */   border: 1px solid black;   padding: 4px; }

这个例子中,form元素自身使用了窗口可用宽度的1/6,然后,为了让form元素内部的input元素保持合适的大小,我们再一次使用了calc(),让它的宽度为其容器的宽度减1em.下面的html使用了上面的CSS:

<form>   <div id="formbox">   <label>Type something:</label>   <input type="text">   </div> </form>

浏览器兼容性

FeatureandroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support?4.0 (2) -moz
16.0 (16)
???
On gradients‘ color stops?19.0 (19)???

 

FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support19 (WebKit 536.3) -webkit4.0 (2) -moz
16 (16)
9--webkit(buggy)
On gradients‘ color stops19 (WebKit 536.3) -webkit19 (19)9--webkit(buggy)

相关链接

 

以上是关于css3 calc()的主要内容,如果未能解决你的问题,请参考以下文章

css3中的calc()

IE8中使用css3中的属性calc(),大神求解决……

为啥calc这么重要的css3函数不支持

css3案例之calc()的使用

css3 calc()

CSS3中的calc()