css 百分比减去像素
2024-08-27 10:44:58
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);
最新文章
- ZHA profile与ZLL profile的一个例子
- python数据类型和字符串(三)
- Android之旅---广播(BroadCast)
- MySQL 数据库设计 笔记与总结(3)物理设计
- 第九篇 Integration Services:控制流任务错误
- 刻通云KeyTone Cloud测试
- 通过find命令寻找文件并拷贝到一个指定目录方法详解
- PAT1005—— 继续(3n+1)猜想
- shell脚本练习(autocert)
- 说说关于php内置函数curl_init()
- flash导入图片缩放后出现毛边、失真、锯齿、文字模糊不清晰的情况
- MySQL源码安装(centos)
- JavaScript返回上一页并自动刷新
- 【JQUERY】插件的写法
- JButton
- 2、Android构建本地单元测试
- spring注解关键字
- Jmeter初步
- matlab-画个拱桥和倒影?
- bash shell执行方式