自定义属性--和calc

pepperwang 发布于2019-08-29 16:20 / 2050人阅读

摘要：自定义属性带有前缀的属性名，比如，表示的是带有值的自定义属性，其可以通过函数在全文档范围内复用的。自定义属性是可以级联的每一个自定义属性可以多次出现，并且变量的值将会借助级联算法和自定义属性值运算出来。

>>>点击获取更多文章<<<

最近在弄练习写demo11，写到有关于 --XXX的自定义属性，calc，平时很少用，比较生面口，于是将它mark下来。

自定义属性 (--*)

带有前缀--的属性名，比如--example--name，表示的是带有值的自定义属性，其可以通过 var 函数在全文档范围内复用的。

CSS 自定义属性是可以级联的：每一个自定义属性可以多次出现，并且变量的值将会借助级联算法和自定义属性值运算出来。

语法

--somekeyword: left;
--somecolor: #0000ff;
--somecomplexvalue: 3px 6px rgb(20, 32, 54);

Link to section示例

This paragraph should have a blue background and yellow text.

This paragraph should have a yellow background and blue text.

This paragraph should have a green background and yellow text.

结果

calc 概述

CSS函数calc()可以用在任何一个需要、, 、、、或的地方。有了calc()，你就可以通过计算来决定一个CSS属性的值了。你还可以在一个 calc() 内部嵌套另一个 calc() ，里面的 calc() 会被简单地视为加了括号。

语法

calc(  )
where 
 =  [ [ "+" | "-" ]  ]*

where 
 =  [ "*"  | "/"  ]*

where 
 =  |  |  | (  )

/* property: calc(expression) */
width: calc(100% - 80px);

其中的表达式，可以用+(加法) -(减法) *(乘法，乘数中至少要有一个是类型的) /(除法，被除数（/右面的数）必须是类型的)。表达式中的操作数可以使用任意语法种类的长度。如果你愿意，你可以在一个表达式中混用多种不同的长度单位。在需要时，你还可以使用小括号来调整计算顺序。

注意，+ 和 - 运算符的两边必须始终要有空白符。

例子(使用指定的外边距定位一个对象)

使用 calc() 可以很容易的为一个对象设置一个左右两边相等的外边距.在这个例子中,使用 CSS 创建了一个横跨整个窗口的 banner,该 banner 左右两边各有一个距离窗口边缘 40 像素的间距:

.banner {
    position: absolute;
/* fallback for browsers which still doesn"t support for `calc()` */
    left: 5%;
    width: 90%;
/* overwrite, if the browsers support for `calc()`*/
    left: calc(40px);
    width: calc(100% - 80px);
    border: 1px solid black;
    box-shadow: 1px 2px;
    background-color: yellow;
    padding: 6px;
    text-align: center;
}

This is a banner!

使用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() 就仅仅相当于是一个括号。

参考来源

https://developer.mozilla.org...*

https://developer.mozilla.org...

GPU云服务器云服务器自定义属性值 dom自定义属性自适应属性属性定义方法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113685.html

CSS 自定义属性 - 入门

摘要：变量的函数引用的自定义属性被称为变量。为此，可读性和可维护性是自定义属性最大的优势。自定义属性作用域在中，变量有作用域一说。因此，在选择器中声明的自定义属性，其作用域的范围是全局范围，也就是全局作用域。引言 CSS语言是一种声明式语言，不像其他语言有变量、条件和逻辑等特性，因为这个原因，社区中有了各种CSS处理器语言，比如Sass、LESS和Stylus等。这些处理器语言引入了一...

seanlook 2019-08-30 15:44 评论0 收藏0
CSS自定义变量属性——像less，sass那样在css中使用变量（译）

摘要：设置值的注意事项自定义属性可以以结尾但是解析器会自动移除这个属性的值，并按瀑布流的形式确定其优先属性。这里虽然有背景色的设置但是优先级并没有自定义属性的高，故而的背景色是透明色翻译参考介绍通常大型文档或者应用（甚至小规模的文档或应用）会包括大量的CSS。在这些CSS文件中通常会有大量相同的数据；例如，一个网站可能用了一个颜色主题并反复用三到四种颜色贯穿始终。改动这些数据会非常困难并...

Backache 2019-08-01 17:39 评论0 收藏0
CSS自定义变量属性——像less，sass那样在css中使用变量（译）

摘要：设置值的注意事项自定义属性可以以结尾但是解析器会自动移除这个属性的值，并按瀑布流的形式确定其优先属性。这里虽然有背景色的设置但是优先级并没有自定义属性的高，故而的背景色是透明色翻译参考介绍通常大型文档或者应用（甚至小规模的文档或应用）会包括大量的CSS。在这些CSS文件中通常会有大量相同的数据；例如，一个网站可能用了一个颜色主题并反复用三到四种颜色贯穿始终。改动这些数据会非常困难并...

王军 2019-08-29 13:28 评论0 收藏0
FE.CSS-Sultana后记：纯css也能写col,select,datepicker,caro

摘要：接着只要在中使用就能搞定自适应。代码如下标题标题标题标题标题在上述点功能中，可以用变量解决，比如实现了宽度，高度圆点大小直径的控件。未完待续背景如今css3越来越发达，focus-within等属性也已经开始在Chrome得到支持。如果有出色的css功底，一点点ps技能，你也能用css3配合原生html标签写出优秀的框架。通过对css3的实践，我发现自定义原生控件并不是什么难事，...

BigTomato 2019-08-29 15:17 评论0 收藏0
FE.CSS-Sultana后记：纯css也能写col,select,datepicker,caro

摘要：接着只要在中使用就能搞定自适应。代码如下标题标题标题标题标题在上述点功能中，可以用变量解决，比如实现了宽度，高度圆点大小直径的控件。未完待续背景如今css3越来越发达，focus-within等属性也已经开始在Chrome得到支持。如果有出色的css功底，一点点ps技能，你也能用css3配合原生html标签写出优秀的框架。通过对css3的实践，我发现自定义原生控件并不是什么难事，...

lanffy 2019-08-26 17:29 评论0 收藏0