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:0;
}

高级运算式

－收缩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);

评论

1 楼 u013411732 2015-12-28  

"css 百分比减去像素" 为什么我用你写的第一种实现方式不行呢？