耽美漫画

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

我是在工作中遇到这个问题的,情况是这样:

  html:

    

      

      

    

  css:

    .box{

        width:100px;

        height:200px;

      }

    .box-left{

          width:50%;

          height:100%;

          border-right:1px solid black;

        }

    .box-right{

          width:50%;

          height:100%;

        }

一个div中有左右两个div,但是两个div中有一条中线,我想一般都是用border解决吧!但是因为div的宽度各占50%,在添加了borer之后,两个div的总宽度为50%+50%+1px=100%+1px。

我们的总宽度超过父元素的总宽度了QAQ!所以.div-right被无情的挤了下来。

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

    

    .box-left{

          width:calc(50% – 1px);

          height:100%;

          border-right:1px solid black;

        }

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

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

1、运算符号的左右两边要有空格分开,如calc(50% – 1px);

  乘号和除号可以不要加空格,但是建议加上比较好。

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

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