css3 calc(1/2)

本篇文章主要介绍了"css3 calc"，主要涉及到方面的内容，对于HTMLjrs看球网直播吧_低调看直播体育app软件下载_低调看体育直播感兴趣的同学可以参考一下： 概述CSS函数calc()可以用在任何一个需要的地方.有了calc(),你可以通过计算来决定一个对象的大小和形状.你还可以在一个ca...

概述

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

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

语法

calc(expression)

值

expression

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

表达式

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

+

加法

-

减法

*

乘法

/

除法.

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

例子

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

使用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;}

<divclass="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><divid="formbox"><label>Type something:label><inputtype="text">div>form>

浏览器兼容性