CSS3计算样式 calc()
calc() 计算
var() 引用变量 --varxxx
:root{
--globalVarxx:100px; 申明 html全局变量
}
:root{
--windowW:1000px;
--windowH:1000px;
}
.father{
width: var(--windowW);
height: calc(var(--windowH)-100px);
}
:root{}
可以在一个CSS文件中定义全局变量,供多个属性引用。
var()
var() 函数用于插入自定义的属性值,如果一个属性值在多处被使用,该方法就很有用。
calc()
calc() 函数用于动态计算长度值。
需要注意的是,运算符前后都需要保留一个空格,例如:width: calc(100% - 10px);
任何长度值都可以使用calc()函数进行计算;
calc()函数支持 "+", "-", "*", "/" 运算;
calc()函数使用标准的数学运算优先级规则
https://developer.mozilla.org/zh-CN/docs/Web/CSS/calc
calc()
calc() 此 CSS 函数允许在声明 CSS 属性值时执行一些计算。它可以用在如下场合:<length>、<frequency>, <angle>、<time>、<percentage>、<number>、或 <integer>。
语法
/* property: calc(expression) */
width: calc(100% - 80px);
Copy to Clipboard
此 calc() 函数用一个表达式作为它的参数,用这个表达式的结果作为值。这个表达式可以是任何如下操作符的组合,采用标准操作符处理法则的简单表达式。
+
加法。
-
减法。
*
乘法,乘数中至少有一个是 <number>。
/
除法,除数(/
右面的数)必须是 <number>。
表达式中的运算对象可以使用任意 <length> 值。如果你愿意,你可以在一个表达式中混用这类值的不同单位。在需要时,你还可以使用小括号来建立计算顺序。
备注
+
和-
运算符的两边必须要有空白字符。比如,calc(50% -8px)
会被解析成为一个无效的表达式,解析结果是:一个百分比 后跟一个负数长度值。而加有空白字符的、有效的表达式calc(8px + -50%)
会被解析成为:一个长度 后跟一个加号 再跟一个负百分比。*
和/
这两个运算符前后不需要空白字符,但如果考虑到统一性,仍然推荐加上空白符。- 用 0 作除数会使 HTML 解析器抛出异常。
- 涉及自动布局和固定布局的表格中的表列、表列组、表行、表行组和表单元格的宽度和高度百分比的数学表达式,
auto
可视为已指定。 calc()
函数支持嵌套,但支持的方式是:把被嵌套的calc()
函数全当成普通的括号。(译者注:所以,函数内直接用括号就好了。)
形式化语法
Error: could not find syntax for this item
例子
使用指定的外边距定位一个对象
使用 calc()
可以很容易的为一个对象设置一个左右两边相等的外边距。在这个例子中,使用 CSS 创建了一个横跨整个窗口的 banner,该 banner 左右两边各有一个距离窗口边缘 40 像素的间距:
.banner {position: absolute;left: 40px;width: calc(100% - 80px);border: solid black 1px;box-shadow: 1px 2px;background-color: yellow;padding: 6px;text-align: center;box-sizing: border-box;
}
Copy to Clipboard
<div class="banner">This is a banner!</div>
Copy to Clipboard
自动调整表单域的大小以适应其容器的大小
calc()
的另外一个用例是用来确保一个表单域的大小适合当前的可用空间,而不会在保持合适的外边距的同时,因挤压超出其容器的边缘。
看一下下面的 CSS:
input {padding: 2px;display: block;width: calc(100% - 1em);
}#formbox {width: calc(100% / 6);border: 1px solid black;padding: 4px;
}
Copy to Clipboard
这个例子中,form 元素自身使用了窗口可用宽度的 1/6,然后,为了让 form 元素内部的 input 元素保持合适的大小,我们再一次使用了 calc()
,让它的宽度为其容器的宽度减 1em。下面的 HTML 使用了上面的 CSS:
<form><div id="formbox"><label>Type something:</label><input type="text"></div>
</form>
Copy to Clipboard
使用 CSS 变量嵌套使用 calc()
我们来看一下下面的代码:
.foo {--widthA: 100px;--widthB: calc(var(--widthA) / 2);--widthC: calc(var(--widthB) / 2);width: var(--widthC); }
在所有的变量都被展开后,widthC
的值就会变成 calc( calc( 100px / 2) / 2)
,然后,当它被赋值给 .foo
的 width 属性时,所有内部的这些 calc()
(无论嵌套的有多深)都将会直接被扁平化为一个括号(原文:be flattened to just parentheses),所以这个 width
属性的值就直接相当于 calc( ( 100px / 2) / 2)
了,或者说就变成 25px
了。简而言之:一个 calc()
里面的 calc()
就仅仅相当于是一个括号。
:root
概述
:root
这个 CSS 伪类匹配文档树的根元素。对于 HTML 来说,:root
表示 <html> 元素,除了优先级更高之外,与 html
选择器相同。
语法
Error: could not find syntax for this item
示例
在声明全局 CSS 变量时 :root
会很有用:
:root {--main-color: hotpink;--pane-padding: 5px 42px;
}
:root
:root是一个伪类,表示文档根元素,所有主流浏览器均支持 :root 选择器,除了 IE8 及更早的版本。在:root中声明相当于全局属性,只要当前页面引用了:root segment所在文件,都可以使用var()来引用。
var()
var()函数可以代替元素中任何属性中的值的任何部分。var()函数不能作为属性名、选择器或者其他除了属性值之外的值。(这样做通常会产生无效的语法或者一个没有关联到变量的值。)
body {
background-color: var(--blue); /* 设置背景颜色为蓝色 */
————————————————
版权声明:本文为CSDN博主「星 尘」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/weixin_51123974/article/details/122311909
无障碍相关考量
当 calc()
被用于控制文本的长度时,确保值中包含一个相对长度单位,例如:
h1 {font-size: calc(1.5rem + 3vw);
}
CSS3计算样式 calc()相关推荐
- css中会计算的属性,css3中样式计算属性calc()的使用和总结
calc的介绍 在css3样式中有一个类似与函数的计算属性calc(),它主要用于指定元素的长度,无论是border.margin.pading.font-size和width等属性都可以使用calc ...
- css定义变量(定义:--aa;使用:var(--aa)、calc()计算样式函数
一.兼容性 2017年3月,微软宣布 Edge 浏览器将支持 CSS 变量.这个重要的 CSS 新功能,所有主要浏览器已经都支持了. 二.用法 声明css变量的时候,变量名前面要加两根连词线(--). ...
- CSS/CSS3常用样式与web移动端资源
CSS/CSS3常用样式与知识点 IE条件注释 条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法. ...
- [总结]CSS/CSS3常用样式与web移动端资源
CSS/CSS3常用样式与知识点 IE条件注释 条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法. ...
- CSS3 属性样式总结记录(图文)
CSS3 属性样式总结记录 1 .边框-背景 border-image 设置所有边框图像的速记属性. 3 border-radius 一个用于设置所有四个边框- *-半径属性的速记属性 3 box-s ...
- CSS 计算属性 calc()的完整指南(下)
从之前的文章:CSS 计算属性 calc()的完整指南(一),我们可以学习到几个方面: calc() 只作用于属性值 calc() 用于长度和其他数值 不能在媒体查询中使用 混合单位 与预处理器数学比 ...
- 深入理解脚本化CSS系列第二篇——查询计算样式
前面的话 元素的渲染结果是多个CSS样式博弈后的最终结果,这也是CSS中的C(cascade)层叠的含义.访问第一篇中的style属性只能获取行间样式,这通常来说,并不是我们想要的结果.本文将详细介绍 ...
- css3-3 css3背景样式
css3-3 css3背景样式 一.总结 一句话总结:网站页面上的小图标集成在一张大图上面,是因为降低服务器负载,网站上的那些图片都可以下载下来,源码那里,或者工具那里. 1.background:# ...
- 一些上流的CSS3图片样式
译自:CSS3 Image Styles 中文:CSS3图片样式 请尊重版权,转载请注明来源,多谢-- 直接在图片元素上直接应用CSS3 inset box-shadow 或 border-radiu ...
最新文章
- 金山网盾3.5.3版本预升级公告
- 一些安全相关的HTTP响应头
- beanutil 批量copy_Apache Commons Beanutils对象属性批量复制(pseudo-singleton)
- 同一服务器 数据库间 不同表 的查询
- 正版七日杀服务器存档,七日杀网吧怎么存档 七日杀网吧存档读档方法介绍-游侠网...
- Eclipse新建SpringBoot后pom.xml代码
- Centos6搭建SkyWalking 做分布式跟踪
- 文末送书 | 阿里资深员工撰写:深度实践OCR
- Hive 与 RDBMS的区别
- [你的灯亮着吗]读书笔记
- 浏览器渲染页面的原理及流程---------重绘与重排(回流)--优化
- 干货 | 我可以读哪些论文来跟上现代NLP的最新趋势?
- VUE优秀的组件库总结
- Ubuntu下搭建git服务器步骤
- DBMS Implementation 笔记 05: SIMC CATC 以及 Join 操作的实现
- OpenCV获取轮廓最大内接正矩形(C++源码)
- 译:手把手教你如何写自定义babel代码转换
- 看完,感触很多 “IT技术开发人员获得成功的六大步骤”
- git 拉取远端所有分支
- 14个适合后台管理系统快速开发的前端框架
热门文章
- 人工智能政策再加码 中庆录播另辟新路径
- android电视查看百度网盘,百度网盘如何投屏到电视?百度网盘投屏到电视的方法...
- 单体类例子 java_Java单体应用 - 项目实战(后台)
- 江苏计算机专业对口单招学校排名,2015江苏对口单招学校排名名单详情【本科批次】...
- metabase Drill Through(数据下钻)能力
- vue 获取dom子元素_vue获取dom元素注意事项
- Activity和Fragment生命周期变化
- LaTex常用数学符号大全
- vscode打开自动提示_VSCode 自动补全
- Vue创建项目、安装插件、引入全局的less变量