css 百分比减去像素

1)第一种实现方式

    @body_center_width:  ~`$(document).width()-400+'px'`;  

    #helloworld {
        width: @body_center_width;
        height: 200px;
        background: #000;
    }  

    @height: ~`document.body.clientWidth-400+'px'`;
    #box { height:200px; width:@height; background:#080; opacity:@height; }  

2)第二种实现方式

    /** 1)收缩CSS代码 **/
    .box{
    border:1px solid #ddd;
    width:calc(100%-2px)
    }  

    /** 2）宽度，10em加20px。 **/
    －收缩CSS代码
    .box{
    width:calc(10em+20px)
    }  

    /** 3）3栏等宽布局。 **/
    －收缩CSS代码
    .box{
    margin-left:20px;
    width:calc(100%/3-20px);
    }
    .box:nth-child(3n){
    margin-left:;
    }  

高级运算式

    －收缩CSS代码
    width:calc(100%/3 - 2*1em - 2*1px);  

    这样写也是可以的：
    －收缩CSS代码
    width:calc(100% / 3 - 2 * 1em - 2 * 1px);  

    但是这样写就是错的：
    －收缩CSS代码
    width:calc(100%/3-2*1em-2*1px);