css 百分比减去像素

最新推荐文章于 2024-02-21 11:23:31 发布

原创最新推荐文章于 2024-02-21 11:23:31 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#乔乐共享 #css #calc #percent #px

本文介绍了两种利用 CSS calc 函数实现动态布局的方法。第一种方法展示了如何根据文档宽度动态调整元素尺寸，第二种方法则提供了简化后的代码示例，包括不同单位间的计算以及三栏等宽布局的具体实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

[size=large][color=red]高级运算式[/color][/size]


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