css 百分比减去像素

yyNet0 2013-04-23

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);

相关推荐

aSuncat / 0评论 2020-08-18