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. day54 Pyhton 前端JS05

    今日内容: 1.数组Array var colors = ['red','color','yellow']; 使用new 关键词对构造函数进行创建对象 var colors2 = new Array( ...

  2. Java改写重构第2版第一个示例

    写在前面 <重构:改善既有代码的设计>是一本经典的软件工程必读书籍.作者马丁·福勒强调重构技术是以微小的步伐修改程序. 但是,从国内的情况来而论,"重构"的概念表里分离 ...

  3. hugo不蒜子统计数量

    date: "2020-10-18T22:39:27+08:00" title: "hugo不蒜子统计数量" tags: ["不蒜子"] c ...

  4. swoft运行流程

    启动命令 php bin/swoft http:start 或者  swoftctl run -c http:start 1 入口文件 bin/swoft.php #!/usr/bin/env php ...

  5. IntelliJ IDEA 15款 神级超级牛逼插件推荐(超赞,谁用谁知道)

    满满的都是干货  所有插件都是在 ctrl+alt+s 里的plugins 里进行搜索安装 1.CodeGlance 代码迷你缩放图插件 2. Codota 代码提示工具,扫描你的代码后,根据你的敲击 ...

  6. 不死的小强 .net core 微服务 快速开发框架 Viper 限流

    1.Viper是什么? Viper 是.NET平台下的Anno微服务框架的一个示例项目.入门简单.安全.稳定.高可用.全平台可监控.底层通讯可以随意切换thrift grpc. 自带服务发现.调用链追 ...

  7. Anderson《空气动力学基础》5th读书笔记 第0记——白金汉PI定理

    目录 量纲分析:白金汉PI定理 相似参数 量纲分析:白金汉PI定理 在空气动力学中,飞机的空气动力主要由自由来流的密度ρ∞,自由来流数V∞,翼弦长度c,自由来流的粘性系数μ∞以及音速a∞,所以假设我们 ...

  8. jquery动态绑定hover没有效果

    在JQuery中,hover()函数本身是对 mouseenter && mouseleave 的封装,然而在原生event中,并没有hover这一事件,所以在传递参数hover时,并 ...

  9. poj2187 Beauty Contest (凸包 + 旋转卡壳)

    Beauty Contest Time Limit: 3000MS   Memory Limit: 65536K Total Submissions: 38349   Accepted: 11851 ...

  10. webpack5文档解析(下)

    声明:所有的文章demo都在我的仓库里 代码分离 代码分离的有点在于: 切割代码,生成不同的打包文件,按需加载这些文件. 每个bundle的体积更小 控制外部资源的加载顺序 常用的方法有: 入口起点: ...