calc() 工作原理
CSS3 calc()
函数允许我们在声明 CSS 属性值时执行以下计算,也就数学运算(+
、-
、*
、/
)。
例如,我们不必声明元素宽度的静态像素值,我们可以使用 calc()
来指定宽度是两个或多个数值相加的结果。
.foo {width: calc(100px + 20px);
}
calc()
如果您使用过像 SASS 这样的 CSS 预处理器,你肯定遇到过上面的这种写法。
.nav {width: 100px + 20px;
}// SASS 中可以直接相加
.foo {width: 100px + 20px;
}// 或者使用变量
$first-width: 100px;
$second-width: 20px;.bar {width: $first-width + $second-width;
}
但是,calc()
函数提供了一个更好的解决方案,原因有两个。
- 我们可以合并不同的单位。具体来说,我们可以将相对单位(如百分比(
%
)和视口单位(vw
、vh
、vmax
、vmin
))与绝对单位(如像素(px
))混合。例如,我们可以创建一个表达式,用百分比值减去像素值。
单位详细介绍可查看:CSS 单位及其需要注意的地方。
.sidebar {width: calc(100% - 120px);
}
在本例中,.sidebar
元素的宽度总是比其父元素宽度的 100%
小 120px
。
- 对于
calc()
,计算的值是表达式本身,而不是表达式的结果值。使用 CSS 预处理器处理数学表达式时,给浏览器的值就是表达式的结果值。
// SCSS 中指定的值
.foo {width: 100px + 20px;
}// 在浏览器中编译 CSS 和计算值
.foo {width: 120px;
}
但是,浏览器解析的值是实际表达式。
// CSS 中指定的值
.foo {width: calc(100% - 120px);
}// 浏览器中的计算值
.foo {width: calc(100% - 120px);
}
这意味着浏览器中的值可以更动态,并随着视口的变化而调整。我们可以有一个高度为视口减去绝对值的元素,它将随着视口的变化而调整。
使用 calc()
calc()
函数可用于对数值执行加减乘除计算。也就是可以与 <length>
、<frequency>
、<angle>
、<time>
、<number>
、<integer>
一起使用。
.foo {width: calc(50vmax + 3rem);padding: calc(1vw + 1em);transform: rotate(calc(1turn + 28deg));background: hsl(100, calc(3 * 20%), 40%);font-size: calc(50vw / 3);
}
嵌套 calc()
calc()
函数可以嵌套。但是,内部函数将被视为简单的括号表达式。以下面的嵌套表达式为例
.foo {width: calc(100% / calc(100px * 2));
}
此函数的计算值如下
.foo {width: calc(100% / (100px * 2));
}
提供后备方案
对 calc()
的支持相对广泛,以下为其支持情况:
基本上现代主流浏览器均支持该属性。但对于那些不支持的浏览器(你知道的),将忽略整个属性值表达式。这也意味着我们可以很容易地提供一个将由不支持的浏览器使用的回退静态值。
.foo {width: 90%; /* 旧浏览器的回退 */width: calc(100% - 120px);
}
应用
calc()
函数在各种情况下都很有用。
定位元素
使用 calc()
为解决容器内元素水平垂直居中提供了另一种解决方法。如果我们已知子元素的尺寸,一个典型的解决方案是使用负边距将元素的高度和宽度移动一半,就像这样
.foo {position: absolute;top: 50%;left: 50%;margin-top: -150px;margin-left: -150px;width: 300px;height: 300px;
}
使用 calc()
函数,我们只需在顶部和左侧使用属性即可实现所有这些操作。
.foo {position: absolute;top: calc(50% - 150px);left: calc(50% - 150px);width: 300px;height: 300px;
}
随着 Flexbox 的引入,这样的方法不太可能被需要。但是,在不能使用 Flexbox 的情况下,例如,如果元素需要绝对定位或固定,则此方法非常有用。
创建根网格大小
calc()
函数可用于在单元外创建基于视口的网格。我们可以将根元素的字体大小设置为整个视口宽度的一小部分。
html {font-size: calc(100vw / 30);
}
现在,将关联到视口宽度的 1/30
。对于我们页面上的任何文本,这意味着它将根据视口自动缩放。此外,给定相同的视区尺寸,无论视区的实际大小如何,屏幕上始终会有相同数量的文本。
如果我们使用 rem
单位来调整页面上其他非文本元素的大小,它们也会遵循这种行为。宽度为 1rem
的元素始终为视口宽度的 1/30
。
清晰度
calc()
有助于使任何正在进行的计算更加明显。例如,如果希望一组项的宽度为其父容器宽度的 1/6,可以这样编写
.foo {width: 16.666666667%;
}
然而,阅读 CSS 的人更清楚的是如何编写
.foo {width: calc(100% / 6);
}
创建网格系统
对于创建 Grid 网格系统来说,calc
在好不过:
img {float: left;margin: 10px;width: calc(100% * 1 / 4 - 20px);
}@media (max-width: 900px) {img {width: calc(100% * 1 / 3 - 20px);}
}@media (max-width: 600px) {img {width: calc(100% * 1 / 2 - 20px);}
}@media (max-width: 400px) {img {width: calc(100% - 20px);}
}
http://www.taodudu.cc/news/show-2720486.html
相关文章:
- rem css calc,关于使用rem单位、css函数calc()进行自适应布局
- calc()的使用
- css3 calc的使用
- html中calc属性什么意思,深入理解CSS calc属性
- css之calc,初探CSS3中的calc()功能
- calc桌面计算机,Calc1(桌面计算器)
- html5的calc,CSS 计算属性 calc()的完整指南(下)
- CSS calc() 使用指南
- css之calc,CSS之calc()
- calcbusiness使用教程_Calc Business
- calc
- 学Web的第二十一天
- calc的使用
- calc()语法规则
- selenium怎样定位web动态提示语
- 测试如何定位问题
- Python selenium定位动态下拉框
- Android studio百度地图之定位到国外
- 怎样关闭qq位置定位服务器,手机qq怎么关闭定位
- dw css定位,Dreamweaver中层的定位
- java内存溢出定位
- python实现位置定位_python定位位置
- Python 的文件定位
- html一般用那种方式定位,使用三种方式定位html中的元素
- html相对定位 不占位置,CSS position 相对定位和绝对定位
- 测试人员怎样定位bug原因
- 如何定位前后端Bug
- html中div的定位,html中div定位练习
- 我是怎么定位线上问题的?
- xpath定位元素详解
calc() 工作原理相关推荐
- [转]Sandboxie 的工作原理
Sandboxie 的工作原理 术语解释 Sandboxie 4.x 工作原理的一个示意图 hx1997 解说 Sandboxie 4.x 的工作原理 Sandboxie 3.x 的工作原理 术语解释 ...
- 2021年大数据ELK(十八):Beats 简单介绍和FileBeat工作原理
全网最详细的大数据ELK文章系列,强烈建议收藏加关注! 新文章都已经列出历史文章目录,帮助大家回顾前面的知识重点. 目录 Beats 简单介绍和FileBeat工作原理 一.Beats 二.FileB ...
- 深入理解Nginx工作原理
1 反向代理 1.1 概念 反向代理(Reverse Proxy)方式是指以代理服务器来接受internet上的连接请求,然后将请求转发给内部网络上的服务器,并将从服务器上得到的结果返回给intern ...
- 高频开关电源原理_程控开关电源的工作原理
本文介绍了开关电源的工作原理以及它的特点. 程控开关电源要要比线性电源复杂得多. 下图是典型的开关电源工作原理图. 首先对 220 V/50Hz 的 AC 输入,通过桥式整流器进行整流 储能电容对整流 ...
- Servlet生命周期与工作原理
Servlet生命周期分为三个阶段: 1,初始化阶段 调用init()方法 2,响应客户请求阶段 调用service()方法 3,终止阶段 调用destroy()方法 Servlet初始化阶段: 在 ...
- java的工作原理你知道吗_每天用Mybatis,但是Mybatis的工作原理你真的知道吗?
近来想写一个mybatis的分页插件,但是在写插件之前肯定要了解一下mybatis具体的工作原理吧,于是边参考别人的博客,边看源码就开干了. 核心部件:SqlSession Executor Stat ...
- linux网络管理原理,Linux__网络管理(物理层 数据链路层 网络层工作原理)
千锋云计算逆战班11点后打卡 今天学习后,进行复习下,物理层 数据链路层 网络层 的工作原理 物理层关心的两件事情:1.信号 2.介质 先说信号:信号分为模拟信号和数字信号 模拟信号: 模拟信号,不 ...
- HDD工作原理 导图
以上导图介绍了我们使用的 (HDD)机械硬盘的基本构造以及核心工作原理,对于大家扫盲有所帮助 参考文档: https://blog.csdn.net/yizhaoxin/article/details ...
- 路由和交换机工作原理
路由器与交换机的工作原理 计算机网络往往由许多种不同类型的网络互连连接而成.如果几个计算机网络只是在物理上连接在一起,它们之间并不能进行通信,那么这种"互连"并没有什么实际意义.因 ...
最新文章
- Hadoop 资源列表
- linux设置默认时区,关于linux:如何修改-Linux-默认时区
- 4. 连续时间鞅(REN)
- OpenGL Shadow Mapping阴影贴图的实例
- 在VS.NET 的项目中使用生成事件
- arc科学计算机在线应用使用,ArcMap字段计算器(Field Calculator)的妙用
- JSCore的基本使用
- 深度学习中的样本采样
- MATLAB 线性运算之图像相加去噪
- igzo屏幕优点与缺点_手机贴膜怎么选?选对了可以省个屏幕钱
- 运行vue遇到的坑(续更
- Hadoop概述--四大组件架构及其关系
- Ubuntu18.04 显卡驱动完美安装(解决安装后无法进入桌面)
- 笔记本电脑电源和电池充电管理电路设计
- 数字光电耦合器为汽车应用提供低功耗和高隔离
- android项目图片分辨率转换工具
- spark ml pipelines
- 吉他演奏中的速度与节拍
- 【侯捷】C++面向对象程序设计
- 金山打字通83字/分
热门文章
- mysql插入表情_向MySQL数据库中插入带emoji表情符的数据时报错
- 论文阅读 “Adaptive Tool Path Planning Strategy for Freeform Surface Machining using Point Cloud Article”
- html 导航栏设计,在网页中设计导航菜单的三个原则(附案例)
- 阿里云win2016服务器部署jdk+tomcat填坑
- 黑苹果外接显示器最优解决方案
- python几岁开始学比较好_少儿编程到底几岁开始学合适?
- 钉钉视频下载方法地瓜网络钉钉视频下载器
- 购买学校计算机房加密狗的请示,2015关于扩建机房的请示.doc
- 2020年wordpress主题开发视频教程、WP主题WP模板开发视频教程
- 十一黄金周旅游线路排行榜(图文)