calc() 函数支持任意CSS长度单位的混合计算,遵循标准数学运算优先级规则,可以动态计算长度值。注意,calc()函数内部的运算符两侧各加一个空白符,否则会产生解析错误。

calc()使用的难点在于百分比,理解了百分比定位,使用calc()就非常便捷。譬如以background-position中使用为例。

将背景图片偏移距离底部10px

 <div class='container'>
</div>

  

可以采用采用关键字的形式

.container {
width: 700px;
height: 400px;
background-color: #ccc;
margin: 0 auto;
background-image: url(./images/1.jpg);
background-size: contain;
background-repeat: no-repeat;
/* 核心代码 */
background-position:left 0 bottom 10px;
}

  

也可以采用calc()函数实现:

.container {
width: 700px;
height: 400px;
background-color: #ccc;
margin: 0 auto;
background-image: url(./images/1.jpg);
background-size: contain;
background-repeat: no-repeat;
/* 核心代码 */
background-position: 0 calc(100% - 10px);
}

  

实现效果

CSS之calc()的更多相关文章

  1. 利用CSS函数calc(...)实现Web页面左右布局

    前言 因为自己的网站需要,想要做一个左右布局的页面: 左边是导航菜单之类的东西.右边是文档内容(因为最近看的一些软件的文档页面都是这么布局的): 左边固定宽度——300像素.右边使用剩余的宽度: 左边 ...

  2. 在Electron运行的页面使用CSS的calc导致应用卡死

    这几天发现运行在我们开发的Electron里面的网页有部分应用点击访问就会卡死,通过排除法定位到使用了CSS的calc方法,如下: <el-table height="calc(100 ...

  3. css 1) calc() 函数的使用. 2)box-sizing:border-box

    calc() 是一个css 函数, 可以实现.计算 ---------------------------- 1. 每个div宽度是25%; 总共4个div. 同时 前三个div 有 border-r ...

  4. CSS 中 calc() 函数用法

    CSS calc() 函数 calc() 函数用于动态计算长度值. 注意,运算符前后都需要保留一个空格,例如:width: calc(100% - 10px): 任何长度值都可以使用calc()函数进 ...

  5. 关于使用rem单位、css函数calc()进行自适应布局

    一.关于css中的单位 大家都知道在css中的单位,一般都包括有px,%,em等单位,另外css3新增加一个单位rem. 其中px,%等单位平时在传统布局当中使用的比较频繁,大家也比较熟悉,不过px单 ...

  6. sass和css的calc运算

    1.sass不识别不同单位之间的计算,而calc则没问题. width: #{1rem - 2px}; /*出错*/ width: calc(1rem - 2px); 通常情况定制css样式,我不需要 ...

  7. css函数——calc()和attr()

    css也有函数?好吧,我孤陋寡闻了.这里记录一下学习情况. calc()函数 定义:用于动态计算长度值 支持版本:css3 运算符前后都需要保留一个空格,例如:width: calc(100% - 1 ...

  8. CSS 使用calc()获取当前可视屏幕高度

    来自:https://blog.csdn.net/qq_32063079/article/details/89766442 先了解一下CSS3的相对长度单位(参考详细教程) : 相对长度单位指定了一个 ...

  9. css 中calc无效属性值问题

    width:calc(50%-20px); 这样书写是无效的因为calc中计算的两个因子同运算符号之间必须存在空格:

随机推荐

  1. ansible-命令使用说明

    1. ansible命令的使用说明 ansible 主机或组-m 模块名-a '模块参数' ansible参数 表示调用什么模块,使用模块的那些参数 • 主机和组,是在/etc/ansible/hos ...

  2. Java 8 有多牛逼?打破一切你对接口的认知!

    前段时间面试了一个 39 岁的程序员,结果不是很理想,没看过的点击这里阅读. 最近也面试一些 Java 程序员,不乏工作 4.5 年经验的,当我问他一些 Java 8 的新特性时,大多却答不上来. 比 ...

  3. Redis 客户端 Jedis、lettuce 和 Redisson 对比

    Redis 支持多种语言的客户端,下面列举了部分 Redis 支持的客户端语言,大家可以通过官网查看 Redis 支持的客户端详情. C语言 C++ C# Java Python Node.js PH ...

  4. eclipse 配置opencv

    1 准备 eclipse 2017 JDK1.8 opencv 4.40 2 配置 新建java工程 添加jar包 选择opencv-xxx.jar包 加入原生库 选择原生库位置 确认即可,测试 新建 ...

  5. 多测师讲解rf--定位元素--高级讲师肖sir

    注意点: 注意点: rfbug:rf 点击勾选一个运行就运行两个出现用例执行 注释快捷键: 改字体大小: 快捷键:显示关键字信息 (ctrl+鼠标悬浮) 注解不能空格在注解 未保存提示 定位方法 : ...

  6. C++时间函数小结

    time time_t time (time_t* timer); 返回的值表示自1970年1月1日0时0分0秒(这个时间名叫 The Unix Epoch)起,到现在过去的时间,这里C/C++标准中 ...

  7. Java NIO:选择器

    最近打算把Java网络编程相关的知识深入一下(IO.NIO.Socket编程.Netty) Java NIO主要需要理解缓冲区.通道.选择器三个核心概念,作为对Java I/O的补充, 以提升大批量数 ...

  8. linux(centos8):用fallocate快速生成大文件

    一,fallocate的用途? 1,用途 我们有时需要用大文件来测试下载速度, 有时需要用大文件来覆盖磁盘空间, 如果在网上搜索,很多文章讲的是使用dd等工具, 事实上linux系统已经内置了生成大文 ...

  9. 第十七章 DNS原理

    一.DNS的相关介绍 1.主机名与IP地址映射需求 1)IP地址难于记忆 2)能否用便于记忆的名字来映射IP地址? 2.hosts文件 1)hosts文件记录了主机名和IP地址的对应信息 2)host ...

  10. Dubbo系列之 (七)网络层那些事(2)

    辅助链接 Dubbo系列之 (一)SPI扩展 Dubbo系列之 (二)Registry注册中心-注册(1) Dubbo系列之 (三)Registry注册中心-注册(2) Dubbo系列之 (四)服务订 ...