为什么CSS width: calc( inherit )要做一些不同于width: inherit的事情？

CSS中的width属性用于设置元素的宽度。width: inherit表示元素的宽度应该继承自其父元素的宽度。而width: calc( inherit )则是在继承父元素宽度的基础上进行一些计算操作。

calc()函数是CSS中用于进行数学计算的函数，可以在其中使用加减乘除等运算符。通过在calc()函数中使用inherit关键字，可以将父元素的宽度作为计算表达式的一部分。

使用width: calc( inherit )可以实现一些动态计算的效果，例如：

响应式布局：通过将父元素的宽度继承给子元素，并在calc()函数中进行百分比计算，可以实现根据父元素宽度自适应调整子元素的宽度。
边距计算：通过将父元素的宽度继承给子元素，并在calc()函数中减去一定的边距值，可以实现子元素宽度减去边距后的自适应布局。
复杂布局计算：在一些复杂的布局场景中，可能需要根据父元素的宽度进行多个计算操作，width: calc( inherit )可以方便地实现这种需求。

腾讯云相关产品和产品介绍链接地址：

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

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

接下来我们谈谈 CSS中的继承。特殊的通用属性值 CSS为处理继承提供了四种特殊的通用属性值，其值如下：值意义 initial 属性初始值。 inherit 继承的值。...all 的值可以如下： /* Global values */ all: initial all: inherit all: unset /* CSS Cascading and...属性引用（获取引用的属性）：attr()。以上功能属性，在之前的章节中也提到过，目前能用的就只有 calc() 跟 attr()，但是即便如此，这两个函数已经却也已经发挥出了很强大的功能。...我们知道，CSS目前还没有条件判断的功能，但是我们藉由数学表达式函数 calc() 也可以实现很多有趣的功能。...后记本文主要简单分享了 CSS 的继承与可变性，同时也再次地回顾了之前系列中所分享过的层级，函数等内容，一方面是想做个整理归纳，如果 CSS 属性分配得恰当，不仅可以减轻我们很多的工作量，也可以轻松实现一些比较有趣的效果

4452 1

CSS3盒模型：border-box

box-sizing可以声明计算元素高宽的 CSS 盒模型。它有content-box、border-box和inherit三种取值。...在计算width和height时候，不计算border、padding和margin。高度、宽度都只是内容高度。 border-box css3新增。...它的计算公式是： width = border + padding + 内容宽度 height = border + padding + 内容高度 为什么不计算margin 从上面可以知道，即时是border-box...中的四则运算符calc来使用，来实现对 margin 的控制。...的 calc */ width: calc(100vw - 2 * 10px); height: calc(100vh - 2 * 10px

3.4K3 1

灵动岛前端Ui

而在用户使用一些应用App并将其切换到后台时（如音乐），灵动岛也能以另一种形态来显示这些软件，还可以轻点这个区域进行更复杂一点的操作，比如切换歌曲。...spm=1019.2139.3001.5343/", :width => "1200"} tips:但是该代码的缺点是目前该跳转链接和灵动岛的大小以及Ui不匹配二、效果展示1 三、编码实现1 html...spm=1019.2139.3001.5343/", :width => "1200"} css部分 body { display: flex; justify-content: center;...(var(--border-width) * -1); border-width: inherit; border-style: inherit; opacity: var(--border-opacity...: inherit; height: var(--t-caret); width: var(--t-caret); background: inherit; border: inherit

8722 0

文字溢出边缘羽化 CSS Mask 实现

但是现在可以用 CSS 的 mark 属性，让溢出的文字边缘羽化。如图 Chrome 的 tab。边缘羽化首先看看 mark-image 的兼容性。...css 1.tab-wrap .tab { 2 width: 100%; 3 overflow: hidden; 4 -webkit-mask-image: linear-gradient( 5...to right, 6 rgba(0, 0, 0, 1) calc(100% - 2em), 7 transparent 8 ); 9 mask-image: linear-gradient...css 1.tab-wrap .tab { 2 width: 100%; 3 overflow: hidden; 4 text-overflow: ellipsis; 5} 6@supports...(-webkit-mask-image: inherit) or (mask-image: inherit) { 7 .tab-wrap .tab { 8 text-overflow: clip

1.1K3 0

英雄联盟比赛选手的六芒星能力图动画是如何制作的？

最近，在看 LPL 比赛的时候，看到这样一个有意思的六芒星能力图动画：今天，我们就来使用纯 CSS 实现这样一个动画效果！...如果一定要使用 CSS，勉强也能做，这就涉及了不规则图形边框效果，我们有一些方式可以实现，可以参考一下这几篇文章：现代 CSS 高阶技巧，不规则边框解决方案有意思！...style 传递进 CSS 中，这样，就可以展示不同基于的六芒星的图案。...这里，我们需要借助 CSS @property 实现。关于 CSS @property，还不太了解的同学，可以参考：CSS @property，让不可能变可能。...关于 mask，还不太了解的同学，可以参考：奇妙的 CSS MASK。

8401 0

七夕，当然少不了纯CSS的点缀啦

可是笔者今天想用纯CSS为单调的七夕做一些点缀呢。 ? pig 以下全程纯玩CSS，没有一段JS，简单的CSS也能点缀出在七夕里你对心仪妹纸的心意。...miss CSS变量怎样玩，可回顾笔者曾经的文章《妙用CSS变量，让你的CSS变得更心动》。 Marry You 当你娶到心仪妹纸后，在你眼里整个世界都是她。...: 0; top: 0; z-index: -1; border-radius: inherit; width: 100%;...若你很喜欢CSS，请关注「IQ前端」，一个专注于CSS/JS开发技巧的前端公众号，笔者会带你玩转所有CSS特性。...最后，祝天下有情人终成眷属，也祝未脱单的兄弟们在未来会遇到那个对的她，也恳请单身姑娘们多给一些机会追你的男生，相信也能找到一个疼爱你一辈子的男生。 ? love

3892 0

【震惊】padding-top的百分比值参考对象竟是父级元素的宽度

padding 属性用于设置元素的内边距，其值可以是length、inherit，当然也可以是百分比。...今天为什么会聊到padding-top设置百分比时的参考对象这个话题呢，这还要从一道不那么正经的面试题说起~ 一道不那么正经的css布局面试题在对面，一本正经的面试官和蔼可亲的说道：我们来道简单的面试题...了解的一些的同学，实现1和2都是非常简单的，而且方式也是多种多样的。...*/ width: 100vw; /* calc方法动态计算：height的值为宽度的1/2，所以是 (100vw - 20px) / 2 */ height: calc...，实际宽度会受到弹性盒子的影响 */ width: 100%; height: 0; /* calc方法动态计算：padding-top的值为父级容器宽度的1/2，所以是

1.6K1 0

在WordPress中使用Markdown进行写作的正确姿势

实现目的 为什么要用markdown，我个人认为markdown很好地诠释了写博客的核心，那就是便捷，专注，使大家能够专注于写作而不用考虑其他没用的东西，现在大部分的热点平台都在使用markdown的编辑器...相比于传统的编辑器，markdown能够让使用者上手一段时间然后就可以轻松地写任何你想要表达的内容了，而不用为插入一些插入图片，或者公式，或者调整文字格式而进行的一些多余的操作。...代码高亮通过上面步骤的复制粘贴，在wordpress文章中可以正常显示，但是可能会出现一些问题，那就是代码不能够高亮。原因很简单，是因为我们没有相应的css文件。 ?...需要注意的是：1、这些代码中有可能与你主题的一些元素发生冲突，如果发生了冲突，我们需要做的就是修改这些代码的作用域即可（css代码的作用域）。...公式显示在决定使用粘贴html源码的时候，曾以为公式的显示应该也是只要css文件就可以，但实际上公式的渲染稍微复杂一些，需要js文件和css文件的配合以及一些基础文件。

14.5K9 2

用CSS新属性实现特殊的图片显示效果

1 概述 1.1 前言使用一个或多个图像相关的CSS属性（background-blend-mode, mix-blend-mode, or filter）可以实现许多特殊的图片显示效果。...本文转载自Bennett Feely的个人网站，文中共列举了20种图片显示效果。详细代码及英文原文请访问Bennett Feely的主页。...saturate(2); } 查看示例程序 2.16 夜视效果效果示例 [夜视效果] SCSS代码 .night-vision-effect { $url : url(photo.jpg); $line-width..., #000 ), repeating-linear-gradient( transparent 0, rgba(0,0,0,0.1) $line-width...本文转载自Bennett Feely的个人网站，只做学习和交流使用。

1.2K0 0

CSS3 - 说说 CSS 上的第一个变量 currentColor, 及扯扯 inherit

介绍 currentColor – 这货说是CSS3的一个特性，但是用变量来说会更好理解；兼容性[IE9+ 及主流的FF,chrome ]。...,background-color等） currentColor会向上遍历，自身color不设置则取父类，父类不设置则取:root根元素的，啥都没就浏览器默认值 inherit – 这个存在已久，这里扯扯关于这货的一些技巧...使用inherit 表明要继承于父元素的样式属性，会使子元素继承了那些不会被自动继承的属性． inherit还能作用于伪类元素，继承主体的一些特性，比如做一个角标，下拉箭头等等只要用的好，我们写出的代码可以更加简洁...; /* 继承父类的大小及边框形状但有自身的颜色值 */ border-width: inherit; border-style: inherit;...CSS体现，，CSS-NEXT看过一些，还是只有一些小改动

1671 0

CSS中height:100%和height:inherit的异同

难道没有使用height:inherit的理由吗？当然有，记住，江湖上所发生的一切事情，都绝非偶然！ 3....绝对定位大不同当子元素为绝对定位元素，同时，父容器的position值为static的时候，呵呵呵，height:100%和height:inherit的差异就可以明显体现出来了！...CSS如下： .outer { display: inline-block; height: 200px; width: 40%; border: 5px solid #cd0000...; } .height-inherit { position: absolute; height: inherit; width: 200px; background-color..."> 结果，height:100%的冲破云霄，哦，不对，是深入地域地狱：而height:inherit却完美高度自适应没有定位特性的父级元素：对绝对定位有所了解的应该都知道原因

8911 0

css速查手册

最近发现一个不错的英文版css速查手册，整理出来与小伙伴们分享下。...不多说了，上代码~参考地址详情见附录~ 语法（Syntax）基础 Comments CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。...CSS 框模型的相关属性 Boxes Boxes 参数详情 margin margin-top margin-right margin-bottom margin-left padding padding-top...border-top-width border-right-width border-bottom-width border-left-width Size and colors Size and...inherit max-width none | int | % | inherit min-height int | % | inherit min-width int | % | inherit width

1.3K3 0

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() 函数用于插入自定义的属性值，如果一个属性值在多处被使用，可以使用该方法...|border-box|inherit: 值说明 content-box 这是 CSS2.1 指定的宽度和高度的行为。...inherit 指定 box-sizing 属性的值，应该从父元素继承 2.5 CSS3 filter(滤镜) 属性 filter 属性定义了元素(通常是)的可视效果(例如：模糊与饱和度)。

2.2K1 0

修改openssl库名

*/ code.language-css, .language-css .token.function { color: #0086b3; } /* YAML */ .language-yaml...:914px){html body[for="html-export"]:not([data-presentation-mode]) .markdown-preview{padding:2em calc...:calc(100% - 300px);padding:2em calc(50% - 457px - 150px);margin:0;box-sizing:border-box}@media screen.../util/libmy_crypto.num 将mkdef.pl文件中用到的libssl.num和libcrypto.num修改为我们变更后的名字：打开文件并修改：vim ..../config 这时候如果你打开生成的Makefile会看到库的名字已经全部换成libmy开头了编译项目，执行命令：make -j 可以看到编译出来库的库名已经变更：前言步骤 ≡

8743 0

CSS 浮动布局和网格系统

# 浮动布局的设计初衷浮动能将一个元素（通常是一张图片）拉到其容器的一侧，这样文档流就能够包围它。这种布局在报纸和杂志中很常见，因此 CSS 增加了浮动来实现这种效果。...此外，要实现将图片移动到网页一侧，并且让文字围绕图片的效果，浮动仍然是唯一的方法。 # 容器折叠和清除浮动 # 理解容器折叠浮动元素不同于普通文档流的元素，它们的高度不会加到父元素上。...这种方法的确能实现预期的行为，但是不雅。要在 HTML 里添加不必要的标记，才能实现本应该由 CSS 实现的效果。...在清除浮动时使用 display: table 能够包含外边距，是因为利用了 CSS 的一些特性。创建一个 display:table 元素（或伪元素），也就在元素内隐式创建了一个表格行和一个单元格。...虽然 BFC 本身是环绕文档流的一部分，但它将内部的内容与外部的上下文隔离开。这种隔离为创建 BFC 的元素做出了以下 3 件事情: 包含了内部所有元素的上下外边距。

8811 0

B2实现带轮播背景的搜索

B2实现带轮播背景的搜索效果站从界面我们可以分析出，这是个轮播+搜索的组合形成的，也就是我们可以用B2的轮播+B2的搜索也行成这个样式。那想要达到这个效果需要做些什么呢?...这一步完成了，接下来的事情就是css样式的收尾工作了、幻灯片样式注意把zmlb改成你的轮播id .slider-height{ width: 100%!...position: relative; left: 15px; opacity: .7; } /*//符号*/ .home_row.module-search { background-image: inherit...; position: absolute; /* top: -700px; */ text-align: center; width: calc(50% - 0%); margin-top: -500px...如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

6073 0

涨姿势了，有意思的气泡 Loading 效果

今日，群友提问，如何实现这么一个 Loading 效果：这个确实有点意思，但是这是 CSS 能够完成的？...没错，这个效果中的核心气泡效果，其实借助 CSS 中的滤镜，能够比较轻松的实现，就是所需的元素可能多点。...参考我们之前的：使用纯 CSS 实现超酷炫的粘性气泡效果巧用 CSS 实现酷炫的充电动画圆弧的实现首先，我们可能需要实现这样一段圆弧：这里需要用到的技术是：角向渐变 conic-gradient...因此，接下来我们要做的事情：我们需要多一组元素，将其绝对定位到上述圆环的头部或者尾部给每个子元素随机设置多个大小不一的圆，颜色保持一致给每个子元素随机设置不同方向的，向外扩散的位移动画给每个子元素随机设置负的...)} * 1deg); --dis: calc(#{random(100)} * 1px); --width: calc(3px + #{random(25)} * 1px

6193 0

程序员最优的做笔记或写博客工具

*/ code.language-css, .language-css .token.function { color: #0086b3; } /* YAML */ .language-yaml...:914px){html body[for="html-export"]:not([data-presentation-mode]) .markdown-preview{padding:2em calc...:calc(100% - 300px);padding:2em calc(50% - 457px - 150px);margin:0;box-sizing:border-box}@media screen...below for more information: */ /* https://shd101wyy.github.io/markdown-preview-enhanced/#/customize-css...; } lua -- 正常（带有key，value） a = {x=10, y=20} print("a.x: ", a.x, "; b.x: ", b.x) 能编写数学公式（因为我平时有阅读一些算法和密码学相关的书籍

3885 0

一颗红心,三手准备,分别基于图片(img)SCSS(样式)SVG动画实现动态拉轰的点赞按钮特效

纯SCSS(样式)实现使用纯CSS样式也可以完成这样的特效，但CSS3原生语法太过复杂，这里我们使用SCSS语法，SCSS是 CSS3的超集，在保证兼容性的前提下，允许使用变量、嵌套、混合...、导入等特性，在编写逻辑复杂的CSS代码时，可以简化逻辑，提高CSS的代码可读性。 ...animation: heart 1s cubic-bezier(.17, .89, .32, 1.49); &:before, &:after { animation: inherit...SVG实现 SVG是矢量图形，不受像素的影响，从而使得它在不同的平台或者媒体下表现出的兼容性更好，与此同时，SVG对动画的支持较好，其DOM结构可以被其特定语法或者CSS控制，从而轻松的实现动画效果...(var(--size) * (var(--frames) * -1 + 2)); background-position-y: calc(var(--size) * 0.02); width:

1.3K1 0

如何用自己喜欢的 CSS 风格重置网站的样式

一些人喜欢在 Normalize.css 中添加一些自己偏好的样式，我也一样。在本文中，我会与你分享我自己的 CSS reset 项（除了 Normalize.css 之外我还使用它们）。...它会改变计算 width、 height、 padding、 border 和 margin 的方式。 box-sizing 的默认设置是 content-box。...1input, 2textarea, 3select, 4button { 5 color: inherit; 6 font: inherit; 7 letter-spacing: inherit...我经常将 hidden 添加到用类设置的其他元素中。类的特异性高于属性，并且 display: none 属性不起作用。这就是为什么我选择用 !important 提高[hidden]的特异性。...这个链接是我在 Github 的 CSS Resets 仓库（https://github.com/zellwk/css-reset）。

1.4K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云