首页
学习
活动
专区
工具
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() 返回结果。

41521

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.2K10

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 中读取它们。

98621

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

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

1.7K20

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

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

1.3K10

CSS相对单位

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

89320

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

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

2.1K20

【面试题】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.5K40

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

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

86200

引人瞩目的 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 变量能够继承,能够组合使用,具有作用域

76330

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

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

2.5K50

前端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 divwidth赋值用。 3 百分比 这里需要注意是,百分比是继承是父级元素高与宽,如果父级元素没高宽,那么百分比就是无效。百分比也可以用于自适应布局。...有时候在自适应布局下,边框线通常用px来设定,比如1px啥。 6 计算属性calc height: calc(~'100% - 7.4rem - 10px'); 这就是计算属性咯。...可以计算出当前,然后再赋值。

89620

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

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

1.5K30

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

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

69270

揭示不为人知CSS

经过计算,这些可能与我们样式表中所写不同。例如:像auto 这样相对单位关键字被赋予了真正,并会应用继承。...继承是应用于元素可以由其子元素传递(或继承过程。 您可能很熟悉字体属性(当应用于body或另一个容器元素时)也由该容器内每个元素继承事实。这就是继承。 并非所有属性都默认继承。...了解继承是编写更加优雅和简洁CSS关键。 使用inherit关键字强制继承是非常有用。 注意事项: 某些属性如border-color 具有默认currentcolor。...这意味着他们将使用color属性上设置。 这个默认继承不一样。 虽然颜色属性本身通常是继承,所以我倾向于认为这是一种事实上继承。...CSStop, 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);我们需要根据列数和间隔计算出子元素宽度

81030

5个好用 CSS 函数

attr() attr 函数用于获取所选元素属性。 它接受三个参数,属性名称,类型和默认。 语法: attr( attribute-name ?...源码:https://codepen.io/protic_milos/pen/GRpYJKd calc() 这个函数使我们能够计算CSS不是指定确切。通常用于计算元素大小或位置。...源码:https://codepen.io/protic_milos/pen/GRpYJKd var() 通过这个函数,我们可以使用一个自定义属性作为另一个CSS属性。...简单地说,我们可以定义一个颜色,例如,将它放在自定义属性(CSS变量)中,然后通过调用var函数重用该属性。 与CSS变量一起,该函数提高了可维护性并减少了重复。一个用例是为网站创建主题。...每一年我们都可以依靠CSS为我们提供所需设计能力,这很好,JavaScript 应该把注意力放在其他事情上,不是设计上。

49730

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) /

19810

深入了解 CSS 变量,让 CSS 创造更多可能!

基本用法 以两个减号(--)开始,属性则可以是任何有效 CSS :root { --primary-color: blue; } :root 可以保证所有页面和任意标签元素都能使用这个自定义属性...自定义属性继承性 本质上是继承特性 后代元素可以原封不动地继承祖先元素设置 CSS 自定义属性。...Shadow DOM 中元素也能继承 Shadow DOM 中 CSS 样式拥有自己独立作用域。自定义属性是目前为数不多可以直接控制 Shadow DOM 样式入口。...自定义属性细节 CSS 自定义属性可以是任意或表达式 示例:SVG内联背景作为CSS自定义属性使用实例页面 :root { --icon-check: url("data:image/svg...CSS 自定义属性可以互相传递 在定义 CSS 自定义属性时候,可以直接引入 CSS 自定义属性 body { --green: #4caf50; --successColor: var(--green

19930

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

    运营活动

    活动名称
    广告关闭
    领券