css3之calc()

在使用calc()之前,我也只是听说有这么一个东西,但在用过之后我才发现这个功能其实很实用。
calc()其实就是英文calculate(计算)的缩写,它看起来像个函数吧?其实不是,calc()是css3中的一个属性。

什么是calc()?

使用calc()我们可以动态的来指定元素的长度,我们可以用它给元素的border、margin、pading、font-size和width等属性设置动态值。
为何它是动态的?因为它是通过计算来决定属性的长度的。

calc()的语法

就像它全称calculate(计算)所说的,就是加 (+)、减(-)、乘(*)、除(/)。

怎么写?我举个例子:

.box {
  width: calc(100% - 10px);
}

这样的话类名为box的类标签,它的宽度就是父元素宽度的100%减去10px,这是一个动态的属性。

实例

我是在工作中遇到这个问题的,情况是这样:
一个div中有左右两个div,但是两个div中有一条中线,我想一般都是用border解决吧!但是因为div的宽度各占50%,在添加了borer之后,两个div的总宽度为50%+50%+1px=100%+1px。
如下图所示:


css3之calc()_第1张图片

我们的总宽度超过父元素的总宽度了QAQ!所以.div-right被无情的挤了下来。就会变成这样:

css3之calc()_第2张图片
红色代表中间的中线

我们来用calc()把.box-right放上去吧!代码如下:

.div-r{
        float: left;
        width: calc(50% - 1px);
        height: 100%;
        border-left:1px solid red;
        background: #FFB86C;
    }

css3之calc()_第3张图片

这样我们就把两个div放进.box了,并且中间成功的放进了一条分割线。╰( ´︶`)╯

注意事项

在使用的过程中有一些注意事项:

1、运算符号的左右两边要有空格分开,如calc(50% - 1px);
  乘号和除号可以不要加空格,但是建议加上比较好。

2、考虑到兼容问题,我们还可以加上这些:

   width:-moz-calc(40% - 1px); 
   width:-webkit-calc(40% - 1px); 
   width:calc(40% - 1px);

你可能感兴趣的:(css3之calc())