首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

从calc属性继承的css似乎重复计算,而不是继承计算值

从calc属性继承的CSS似乎重复计算,而不是继承计算值。

首先,calc属性是CSS中的一个函数,用于执行简单的数学运算,以便在CSS中动态计算属性值。它可以在各种CSS属性中使用,如宽度、高度、边距、字体大小等。

当使用calc属性时,浏览器会根据给定的表达式计算出最终的属性值。然而,从calc属性继承的CSS在某些情况下可能会出现重复计算的问题,而不是继承计算值。

这个问题通常出现在使用calc属性的父元素和子元素之间存在嵌套关系时。当子元素继承了父元素的calc属性时,浏览器会尝试重新计算子元素的属性值,而不是简单地继承父元素的计算值。

这种重复计算的行为可能会导致计算结果不准确,特别是在涉及复杂的嵌套结构和多个calc属性的情况下。为了避免这个问题,可以考虑以下几点:

  1. 尽量避免在嵌套结构中使用calc属性,特别是在父元素和子元素之间存在依赖关系的情况下。如果可能的话,可以考虑使用固定的数值或其他CSS单位来替代calc属性。
  2. 如果必须使用calc属性,可以尝试将计算逻辑拆分成多个独立的calc属性,以减少嵌套结构和依赖关系。这样可以降低重复计算的可能性。
  3. 在使用calc属性时,可以使用CSS预处理器(如Sass、Less)来更好地管理和组织样式代码。预处理器可以提供更灵活的计算和变量功能,有助于减少重复计算的问题。

总之,从calc属性继承的CSS可能会导致重复计算的问题,而不是简单地继承计算值。为了避免这个问题,应尽量避免在嵌套结构中使用calc属性,或者采取其他措施来减少重复计算的可能性。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

【Hello CSS】第七章-CSS的继承与可变性

接下来我们谈谈 CSS中的继承。 特殊的通用属性值 CSS为处理继承提供了四种特殊的通用属性值,其值如下: 值 意义 initial 属性初始值。 inherit 继承的值。...revert 属性值被设置成自定义样式所定义的属性(如果被设置), 否则属性值被设置成用户代理的默认样式。 reset属性值 在这里分享一个CSS属性all。...CSS all 简写属性 将除却 unicode-bidi 与 direction 之外的所有属性重设至其初始值,或继承值。...计算值(Computed Value) 计算值(Computed Value) 是解析指定属性值的结果,通过将其绝对化用以继承。...计算值(Computed Value) 用以继承时是由父节点传达到子节点的值,由于历史原因,它不一定是由 getComputedStyle() 返回的结果。

44821

5分钟实现漂亮的CSS加载动画,纯CSS实现加载动画

video/BV1D5411H7Tc 2 知识点 2.1 CSS calc() 函数 CSS calc() 函数用于动态计算长度值。...需要注意的是,运算符前后都需要保留一个空格,例如:width: calc(100% - 10px); 任何长度值都可以使用calc()函数进行计算; calc()函数支持 "+", "-", "*",..."/" 运算; calc()函数使用标准的数学运算优先级规则; 支持版本:CSS3 2.2 CSS var() 函数 var() 函数用于插入自定义的属性值,如果一个属性值在多处被使用,可以使用该方法...从外层的阴影(开始时)改变阴影内侧阴影 2.4 CSS3 box-sizing 属性 Box-sizing 属性允许你以某种方式定义某些元素,以适应指定区域。...inherit 指定 box-sizing 属性的值,应该从父元素继承 2.5 CSS3 filter(滤镜) 属性 filter 属性定义了元素(通常是)的可视效果(例如:模糊与饱和度)。

2.3K10
  • 【CSS】470- 是时候开始用 CSS 自定义属性了

    自定义属性(有时候也被称作CSS变量或者级联变量)是由CSS作者定义的,它包含的值可以在整个文档中重复使用。...由自定义属性标记设定值(比如:--main-color: black;),由var() 函数来获取值(比如:color: var(--main-color);) 复杂的网站都会有大量的CSS代码,通常也会有许多重复的值...这意味着你可以给它定义任意常规的 css 属性关键字: inherit 继承其父元素某一属性值的关键字 initial 应用某一属性的初始值,(可能是一空值、或是其它 css 属性默认的值) unset...当一个属性默认是继承父元素的属性值时,它使用继承的值;如是属性不继承的话,就使用其默认的值 revert 它可以将一属性值重置为用户 stylesheet 样式表中的值,(在 css 自定义属性中一般是空值...通过输出 css 形式的 JSON 值来编写 css 属性,然后从 javascript 中读取它们。

    1K21

    CSS变量(自定义属性)实践指南

    你还可以从通过利用CSS变量获得另一个CSS变量的值。...当自定义属性值无效或未指定(unset)时,如果这时也没有指定备用值,那么被继承的(inherited)属性值将会被使用。 CSS变量是区分大小写的 与普通CSS属性不同,CSS变量是区分大小写的。...例如,var(--foo)和var(--FOO)是在求两个不同的自定义属性值,分别是--foo和--FOO的。 CSS变量受级联关系影响 和普通CSS属性一样,CSS变量是可继承的。...当你在另一个元素里,为改自定义属性设置了一个新值时,那么所有该元素的子元素都会继承那个新值。...opacity: var(--transparency); } } 注意到这是如何借助CSS的calc(),并用var()函数进行计算的。

    1.4K10

    前端-CSS变量(自定义属性)实践指南

    ://gitee.com/GrapeTech/css-variable-demo/blob/master/demo-1.html) 你还可以从通过利用CSS变量获得另一个CSS变量的值。...当自定义属性值无效或未指定(unset)时,如果这时也没有指定备用值,那么被继承的(inherited)属性值将会被使用。 CSS变量是区分大小写的 与普通CSS属性不同,CSS变量是区分大小写的。...例如,var(--foo)和var(--FOO)是在求两个不同的自定义属性值,分别是--foo和--FOO的。 CSS变量受级联关系影响 和普通CSS属性一样,CSS变量是可继承的。...当你在另一个元素里,为改自定义属性设置了一个新值时,那么所有该元素的子元素都会继承那个新值。...{     opacity: var(--transparency);   } } 注意到这是如何借助CSS的calc(),并用var()函数进行计算的。

    1.8K20

    CSS 中的相对单位

    准确地说,medium 关键字的值是 16px。 # em 同时用于字号和其他属性 同时用 em 指定一个元素的字号和其他属性。这时,浏览器必须先计算字号,然后使用这个计算值去算出其余的属性值。...这两类属性可以拥有一样的声明值,但是计算值不一样。...通常我们应该使用无单位的数值,因为它们继承的方式不一样。 继承有一个怪异特性:当一个元素的值定义为长度(px、em、rem,等等)时,子元素会继承它的计算值。...当使用 em 等单位定义行高时,它们的值是计算值,传递到了任何继承子元素上。如果子元素有不同的字号,并且继承了 line-height 属性,就会造成意想不到的结果,比如文字重叠。...使用无单位的数值时,继承的是声明值,即在每个继承子元素上会重新算它的计算值。这样得到的结果几乎总是我们想要的。

    91420

    CSS 变量由浅入深,提升效率必备知识!

    用例十四:继承 是的,CSS变量确实继承。如果父元素中定义了CSS变量,那么子元素将继承相同的CSS变量。...CSS 变量的工作方式 当var()函数中的CSS变量无效时,浏览器将根据所使用的属性用初始值或继承值替换。...这是完全错误的。 由于color属性是继承的,因此浏览器将执行以下操作: 该属性是否可继承? 如果是,父节点是否拥有该属性?...当浏览器计算出该值时,该值将不再有效,并且将无法按预期运行。...看到颜色 使用CSS变量时,看到颜色或背景值的视觉指示器是否有用? Chrome和Edge证明了这一点。 计算值 要查看CSS变量的计算值,只要将鼠标悬停或单击即可。

    2.2K20

    【面试题】CSS知识点整理(附答案)

    :hidden的区别 em rem vh vw calc() line-height 百分比 rem实现原理及相应的计算方案 清除浮动方法及原理 postcss是什么 css modules CSS预处理器...flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。...是否是继承属性(株连性) display:none,display不是继承属性,元素及其子元素都会消失。...7. em rem vh vw calc(), line-height 百分比 em em: 相对单位,参考物是父元素的font-size,具有继承的特点。...calc() calc(): CSS3中新增的一个函数, 用于动态计算宽/高, 语法非常简单,就像我们小时候学加 (+)、减(-)、乘(*)、除(/)一样,使用数学表达式来表示 使用“+”、“-”、“*

    1.6K40

    Sass(Scss)、Less的区别与选择 + 基本使用

    为什么要使用 CSS 预处理器 原因 CSS 仅仅是一个标记语言,不可以自定义变量,不可以引用。 语法不够强大,比如无法嵌套书写,导致模块化开发中需要书写很多重复的选择器。...没有变量和合理的样式复用机制,使得逻辑上相关的属性值必须以字面量的形式重复输出,导致难以维护。...Less 并没有丢掉 CSS 原有的语法与特性,更不是用来取代 CSS 的,而是在现有 CSS 语法的基础上,为 CSS 加入动态语言的特性。   ...,而 Less 是在客户端处理的,需要引入 less.js 来处理 Less 代码输出 CSS 到浏览器,也可以在开发服务器将 Less 语法编译成 CSS 文件,输出 CSS 文件到生产包目录,有 npm...保持兼容,calc() 并不对数学表达式进行计算,但是在嵌套函数中会计算变量和数学公式的值。

    1.7K00

    渐变的艺术:变量的力量——阿超与ChatGPT 4o的代码探险

    他需要实现一个文字渐变效果:滚动时,文字从顶部的纯白渐变为底部的纯黑,中间的渐变必须平滑优雅,没有任何多余的断裂或重复。 阿超心想:“这应该只是几行 CSS 和一点滚动监听事件的事吧?”...ChatGPT 4o 听出了阿超的期望,决定重新设计逻辑: ChatGPT 4o 的分析: “我们可以通过 CSS 自定义属性(--scroll)来动态调整背景位置,将 JavaScript 的控制逻辑转移到...200%; 3. calc() 的动态计算 作用:calc() 可以混合单位进行动态计算,比如将 CSS 变量与百分比结合。...另一个只平滑改变颜色,而不是渐变比例的版本 示例: 的探索。从变量的引入到渐变的平滑设计,他收获的不只是视觉效果,还有对 CSS 深度的理解。

    8310

    创建水平滚动的正确方式【CSS 网格布局】

    水平滚动容器(列表)已经成为了一种常见的布局做法,而不是将东西都堆叠在页面上,这将减少占用小屏幕设备垂直的空间。...使用 CSS Grid 网格布局方便我们控制元素之间的距离,无需进一步计算。...你可能想在最后一个元素添加 margin-right 的属性值以处理这个问题: .hs > li:last-child { margin-right: 20px; } 很不幸,这并不起作用。...这不是很灵活。 一种使其更灵活的处理方式是,你可以使用 Javascript 来计算卡片的数量,然后将其分配给 CSS 变量。...为此,我们需要设置 grid-auto-flow 为 column(默认值是 row)。 最后,我们需要确保的是 .hs:after ,它继承了其他卡片的大小,其占用的空间不超过 10px。

    2.6K50

    引人瞩目的 CSS 变量(CSS Variable)

    Demo戳我 -- CSS 变量简单示例。 CSS 变量的层叠与作用域 CSS 变量是支持继承的,不过这里说成级联或者层叠应该更贴切。...Demo戳我 -- CSS变量的组合使用 CSS 变量与计算属性 calc( ) 更有趣的是,CSS 变量可以结合 CSS3 新增的函数 calc( ) 一起使用,考虑下面这个例子: CSS...一个页面的配色,通常有几种主要颜色,同一个颜色值在多个地方用到。之前的 LESS、SASS预处理器的变量系统就是完成这个的,现在 CSS 变量也能轻松做到。...,只是我这里示例的 CSS 改变的样式属性较少,当媒体查询的数量达到一定程度,使用 CSS 变量从代码量及美观程度而言都是更好的选择。...LESS 、SASS 等预处理器变量,CSS 变量的优点在于: CSS 变量的动态性,能在页面运行时更改,而传统预处理器变量编译后无法更改 CSS 变量能够继承,能够组合使用,具有作用域

    79330

    「资深前端工程师总结」前端面试知识点大全—CSS篇

    5、CSS 选择符有哪些?哪些属性可以继承?优先级算法如何计算? CSS3 新增伪类有哪些?...一个好的类名应该是描述他是什么而不是像什么。 (8)避免!important,可以选择其他选择器。 (9)尽可能的精简规则,你可以合并不同类里的重复规则。 19、浏览器是怎样解析CSS选择器的?...(3)css3计算calc和vw单位巧妙实现滚动条出现页面不跳动。...首先,.wrap-outer指的是居中定宽主体的父级,如果没有,创建一个,然后,calc是css3的计算。...44、px和em的区别 px和em都是长度单位,区别是,px的值是固定的,指定是多少就是多少,计算比较容易。em得值不是固定的,并且em会继承父级元素的字体大小。 浏览器的默认字体高都是16px。

    1.6K30

    前端css单位小结:vh、vw、百分比、rem、px、计算属性calc

    前端css单位小结:vh、vw、百分比、rem、px、计算属性calc 1 vh 视口的高度,也就是眼睛可以看到屏幕的高度,如果你的屏幕分辩率为1920*1080,那么视口的高度就是1080px,vh可用于写自适应...一般给css div 的 height赋值用。 2 vw 与vh相对的,视口的宽度,同理,如果你的屏幕分辩率为1920*1080,那么视口的宽度就是1080px,vw可用于写自适应。...一般给css div的width赋值用。 3 百分比 这里需要注意的是,百分比是继承的是父级元素的高与宽,如果父级元素没高宽,那么百分比就是无效的。百分比也可以用于自适应布局。...有时候在自适应的布局下,边框线通常用px来设定,比如1px啥的。 6 计算属性calc height: calc(~'100% - 7.4rem - 10px'); 这就是计算属性咯。...可以计算出当前的值,然后再赋值。

    1.3K20

    重构实践:体验interface的威力(一)

    图1 类的物理结构     所有模型,都直接从BussenessBase(这个类不在应用层,而是在OpenExpressApp框架中使用的CSLA框架中)继承下来,然后添加各自特殊的业务属性。...而对应每一个模型的计算过程,都有一个独立的类。我在图中写仅画出其中一个类ProjectIndicatorEntity_Calc。其实,模型类中的重复代码勉强还是可以忍受的。...但是,在这些Calc计算过程里面的代码,80%都是相同的,真的是让人无法忍受。而且计算过程作为业务逻辑的核心,修改一下逻辑是很正常的。...而ProjectQuantityIndicator是一种“量”的指标,所以继承指标。...并不是开发人员不想使用这样的结构进行编程,而是由于文章开头提到的固有原因,所以才导致图1中的继承层次。

    71070

    揭示不为人知的CSS

    经过计算,这些值可能与我们样式表中所写的值不同。例如:像auto 这样的相对单位的关键字被赋予了真正的值,并会应用继承的值。...继承是应用于元素的值可以由其子元素传递(或继承)的过程。 您可能很熟悉字体属性(当应用于body或另一个容器元素时)也由该容器内的每个元素继承的事实。这就是继承。 并非所有属性都默认继承。...了解继承是编写更加优雅和简洁CSS的关键。 使用inherit关键字强制继承是非常有用的。 注意事项: 某些属性如border-color 具有默认值currentcolor。...这意味着他们将使用color属性上设置的值。 这个默认值与继承不一样。 虽然颜色属性本身通常是继承的,所以我倾向于认为这是一种事实上的继承。...CSS的top, bottom, left 和 right 属性用来计算“盒容器的偏移量”。这些属性不是二维偏移,而是每个边缘相对于其容器的内容盒子进行定位。

    1.6K30

    CSS Layout API初探:瀑布流布局实现

    initialValue: 4, // 默认值 inherits: false // 是否从父元素继承});不仅可以在JavaScript中使用该接口,浏览器也提供了自定义属性值的...倘若不这么做,浏览器将会返回一个携带原始css属性值的CSSUnparsedValue对象。...开始实现瀑布流使用CSS Layout API实现瀑布流的基本逻辑其实和其他实现方式基本是一致的。我们先来定义两个自定义属性,方便之后进行属性值的格式化。...不过好在所有相对单位和绝对单位在传入时都会自动转换成px,所以实际上我们只需要处理百分比和calc函数,css里边的calc函数是支持嵌套的,所以我们这里使用递归来完成计算,同时将百分比转换为像素值。...let gap = styleMap.get('--masonry-gap');// 将计算属性和百分比处理成像素值gap = calc(gap, availableInlineSize);我们需要根据列数和间隔计算出子元素的宽度

    90030

    CSS进阶知识

    重绘:当页面中的一些元素需要更新属性,而这些属性只是影响元素的外观,风格,而不会影响布局的时候,比如background-color。则称为重绘。 回流必将引起重绘,而重绘不一定会引起回流。...css可继承与不可继承的属性 无继承性的属性 display:规定元素的显示类型 文本属性: vertical-align:垂直文本对齐 text-decoration:规定添加到文本的装饰 text-shadow...元素可见性:visibility 光标属性:cursor 内联元素可以继承的属性 字体系列属性 除text-indent、text-align之外的文本系列属性 块级元素可以继承的属性 text-indent...、text-align 浏览器默认属性值问题   由于各浏览器对于HTML标签都存在预设值,所以为了让我们设计的页面在不同的浏览器上显示效果相同,就需要用resetcss。   ...:not(:empty) //非空 calc() //不同单位计算 left: calc(100% - 200px) /

    21910
    领券