首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >自定义属性--和calc

自定义属性--和calc

作者头像
张炳
发布2019-08-02 17:08:50
6830
发布2019-08-02 17:08:50
举报

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

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

自定义属性 (--*)

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

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

语法

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

Link to section示例

<style type="text/css">
:root {
  --first-color: #488cff;
  --second-color: #ffff8c;
}

#firstParagraph {
  background-color: var(--first-color);
  color: var(--second-color);
}

#secondParagraph {
  background-color: var(--second-color);
  color: var(--first-color);
}

#container {
  --first-color: #48ff32;
}

#thirdParagraph {
  background-color: var(--first-color);
  color: var(--second-color);
}
</style>


<p id="firstParagraph">This paragraph should have a blue background and yellow text.</p>
<p id="secondParagraph">This paragraph should have a yellow background and blue text.</p>
<div id="container">
  <p id="thirdParagraph">This paragraph should have a green background and yellow text.</p>
</div>

结果

1.jpg
1.jpg

calc

概述

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

语法

calc( <calc-sum> )
where 
<calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*

where 
<calc-product> = <calc-value> [ '*' <calc-value> | '/' <number> ]*

where 
<calc-value> = <number> | <dimension> | <percentage> | ( <calc-sum> )
/* property: calc(expression) */
width: calc(100% - 80px);

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

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

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

使用 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;
}
<div class="banner">This is a banner!</div>
2.jpg
2.jpg

使用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...

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 自定义属性 (--*)
    • 语法
      • Link to section示例
        • 结果
        • calc
          • 概述
            • 语法
              • 例子(使用指定的外边距定位一个对象)
              • 使用CSS变量来嵌套calc()
              • 参考来源
              领券
              问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档