css 百分比减去像素

最新推荐文章于 2022-03-19 17:49:25 发布

weixin_33755554

最新推荐文章于 2022-03-19 17:49:25 发布

阅读量874

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/wpcnblog/p/10973809.html

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

转载于:https://www.cnblogs.com/wpcnblog/p/10973809.html