开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

为什么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的继承与可变性

鱼头注：有很多人会认为 !important 也参与了优先级的排列，但 !important 是在优先级的规则之外的，如果参与了优先级的排列，意思就是 !important 是可以被覆盖的，但事实显然不是。

02

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

视频地址：https://www.bilibili.com/video/BV1D5411H7Tc

01

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

没错，这个效果中的核心气泡效果，其实借助 CSS 中的滤镜，能够比较轻松的实现，就是所需的元素可能多点。参考我们之前的：

03

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

在很多时候都需要处理文字的溢出，尤其是对单行网格处理时，需要避免文字过长导致容器撑坏的情况。一般会固定文字最大宽度和 overflow: hidden; text-overflow: ellipsis 让溢出的文字显示成 ...。但是现在可以用 CSS 的 mark 属性，让溢出的文字边缘羽化。

03

CSS3盒模型：border-box

box-sizing可以声明计算元素高宽的 CSS 盒模型。它有content-box、border-box和inherit三种取值。其中border-box是 css3 新增，也是主流 UI 框架的全局默认属性。

03

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

如果一定要使用 CSS，勉强也能做，这就涉及了不规则图形边框效果，我们有一些方式可以实现，可以参考一下这几篇文章：

01

灵动岛前端Ui

当用户收到信息后，iPhone 14 Pro显示屏上方的灵动岛可以展开显示信息。此外灵动岛还可以显示音乐播放、Siri等组件，让用户在首页直接完成各种功能控制和信息阅读。iPhone 14 Pro 拥有6.1英寸屏幕，还将推出6.7英寸的iPhone 14 Pro MAX [2]

02

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

单身的程序猿或准备脱单的程序猿怎么办，常规操作是const girl = new Object()，没对象就自己创建一个对象过节呗。可是笔者今天想用纯CSS为单调的七夕做一些点缀呢。

02

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

书写页面样式与布局是前端工程师Coding 中必不可少的一项工作，在定义页面元素的样式时，padding 属性也是经常被使用到的。

01

动手练一练，用纯 CSS 制作一款侧滑显示留言面板的网页组件

大家好，不知道你们是否和我一样存在这样的困惑呢，虽然css入门容易，但是其内容太多，好多属性看了似是而非，觉得自己看懂了，到自己用的时候又很犯难了，看到漂亮的效果还是无从下手，这主要还是自己对新属性实践太少了，不能进行灵活应用，CSS总让一些人找不到感觉。其实学好CSS真的没有太多捷径，和JS编程一样，要重视对待，要多看和多练，因为现在的CSS不再是以前的CSS啦。

00

动手练一练，用纯 CSS 制作一款侧滑显示留言面板的网页组件

大家好，不知道你们是否和我一样存在这样的困惑呢，虽然 CSS 入门容易，但是其内容太多，好多属性看了似是而非，觉得自己看懂了，到自己用的时候又犯难了，看到漂亮的效果还是无从下手，这主要还是自己对新属性亲自动手实践的练习太少啦，因此不能进行灵活应用。不可否认 CSS 总让一些人找不到感觉，其实学好 CSS 真的没有太多的捷径，和JS 编程一样，要同等重视对待，不要因为简单而忽视，要多看和多练，因为现在的 CSS 不再是以前的 CSS 啦。

01

常用的 CSS 技巧

你不需要分别添加 line-height 到每个p,h标记等。只要添加到 body 即可：

00

20个常用的CSS技巧，收藏就是捡到

你不需要分别添加 line-height 到每个p,h标记等。只要添加到 body 即可：

03

B2实现带轮播背景的搜索

B2实现带轮播背景的搜索效果站从界面我们可以分析出，这是个轮播+搜索的组合形成的，也就是我们可以用B2的轮播+B2的搜索也行成这个样式。那想要达到这个效果需要做些什么呢? 往下看首先你就要在后后台

03

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

使用一个或多个图像相关的CSS属性（background-blend-mode, mix-blend-mode, or filter）可以实现许多特殊的图片显示效果。本文转载自Bennett Feely的个人网站，文中共列举了20种图片显示效果。

00

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

华丽炫酷的动画特效总能够让人心旷神怡，不能自已。艳羡之余，如果还能够探究其华丽外表下的实现逻辑，那就是百尺竿头，更上一步了。本次我们使用图片、SCSS样式以及SVG图片动画来实现“点赞”按钮的动画特效，并比较不同之处。

01

原生JS实现软件卸载对话框（超有趣）

今天给大家分享一个特别有意思的软件卸载对话框，鼠标在整个对话框里移动时，中间的人脸会作出不同的变化，当鼠标悬停到“保留”按钮上时，人脸的表情会变得开心，当鼠标悬停到“卸载”按钮上面时，人脸的表情会变得不开心。

02

写了这么多年 CSS，initial 和 inherit 以及 unset 和 revert 还傻傻分不清楚？

通常的回答是 static、relative、absolute 和 fixed 。当然，还有一个稍微生僻的 sticky 。其实，除此之外， CSS 属性通常还可以设置下面几个值：

02

盒模型

盒模型的默认行为,当给一个元素设置宽或高的时候，指定的是内容的宽或高，所有内边距、边框、外边距都是追加到该宽度上的。

02

CSS3过渡与动画

增强页面渲染性能，提前通知浏览器元素将要做什么动画，让浏览器提前准备合适的优化设置

02

没人告诉你关于 CSS 变量的那些事

在这种情况下，!important 并不是 color 的一部分，而是增加了 --color 变量的特性。规范中指明：

02

《JavaScript 模式》读书笔记（6）— 代码复用模式2

上一篇讲了最简单的代码复用模式，也是最基础的，我们普遍知道的继承模式，但是这种继承模式却有不少缺点，我们下面再看看其它可以实现继承的模式。

01

CSS3 基础知识[转载minsong的博客]

CSS3 基础知识 1.边框 1.1 圆角 border-radius:5px 0 0 5px; 1.2 阴影 box-shadow:2px 3px 4px 5px rgba(0,0,0,0.5);(水平、垂直、模糊、扩展) box-shadow:inset 1px 2px 3px 4px #fff;(inset 内阴影) 1.3 边框图像 border-image 2.背景 2.1 background-size background-size:30px 30px;(背景图像宽度，背景图像高度) 2.2 background-image:linear-gradient(45deg,rgba(0,0,0,0.5) 25%,transparent 25%,transparent 50%,rgba(0,0,0,0.5) 50%,rgba(0,0,0,0.5) 75%,transparent 75%,transparent);(线性渐变，和background-size一起用) 2.3 background-attachment:(fixed|scroll|local) fixed：背景图像相对于窗体固定。 scroll：背景图像相对于元素固定，也就是说当元素内容滚动时背景图像不会跟着滚动，因为背景图像总是要跟着元素本身。但会随元素的祖先元素或窗体一起滚动。 local：背景图像相对于元素内容固定，也就是说当元素随元素滚动时背景图像也会跟着滚动，因为背景图像总是要跟着内容。 2.4 background-position:30px 20px;(横坐标，纵坐标；是图片在动) 2.5 background-origin:(padding-box|border-box|content-box) padding-box：从padding区域（含padding）开始显示背景图像。 border-box：从border区域（含border）开始显示背景图像。 content-box：从content区域开始显示背景图像。 3.文本 3.1 文字阴影 text-shadow:5px 5px 4px #000;(水平，垂直，模糊) 3.2 换行 word-wrap:(normal|break-word) normal：允许内容顶开或溢出指定的容器边界。 break-word：内容将在边界内换行。如果需要，单词内部允许断行。 white-space:(normal|pre|nowrap|pre-wrap|pre-line) normal：默认处理方式。 pre：用等宽字体显示预先格式化的文本，不合并文字间的空白距离，当文字超出边界时不换行。可查阅pre对象 nowrap：强制在同一行内显示所有文本，直到文本结束或者遭遇br对象。 pre-wrap：用等宽字体显示预先格式化的文本，不合并文字间的空白距离，当文字碰到边界时发生换行。 pre-line：保持文本的换行，不保留文字间的空白距离，当文字碰到边界时发生换行。 3.3 省略号 width:200px; overflow:hidden; text-overflow:hidden; white-space:nowrap; 4.2D变换 4.1 旋转 transform:rotate(45deg); 4.2 移动 transform:translate(45px,45px);(水平，垂直) 4.3 缩放 transform:scale(2,2);(水平，垂直) 4.4 翻转 transform:skew(20deg,40deg);(沿X轴翻转，沿Y轴翻转) 4.5 将以上四个组合在一起 matrix(),需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。暂放 5.过渡 5.1 transition : [ transition-property ] || [ transition-duration ] || [ transition-timing-function ] || [ transition-delay ] [ transition-property ]：检索或设

06

谈谈一些有趣的CSS题目（十五）-- 谈谈 CSS 关键字 initial、inherit 和 unset

开本系列，谈谈一些有趣的 CSS 题目，题目类型天马行空，想到什么说什么，不仅为了拓宽一下解决问题的思路，更涉及一些容易忽视的 CSS 细节。解题不考虑兼容性，题目天马行空，想到什么说什么，如果解题中有你感觉到生僻的 CSS 属性，赶紧去补习一下吧。不断更新，不断更新，不断更新，重要的事情说三遍。谈谈一些有趣的CSS题目（一）-- 左边竖条的实现方法谈谈一些有趣的CSS题目（二）-- 从条纹边框的实现谈盒子模型谈谈一些有趣的CSS题目（三）-- 层叠顺序与堆栈上下文知多少谈谈一些有趣的CSS题目

05

轻松使用纯css3打造有点意思的故障艺术(附React加强组件版)

很早之前就看到国外很多酷炫的网站在实践"故障艺术", 或者错位动画", 感觉非常有意思, 现在APP端的抖音启动界面有着这种设计的影子, 作为一名用于探索未知的前端工程师, 有必要好好实践一下这一设计.

01

首页置顶公告栏轮播

在\themes\butterfly\layout\includes\page目录下新建notice.pug模板：

02

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

在wordpress中使用markdown语法来进行写作，是很多wordpress博主都要想到的一点。虽然说现在wordpress已经“原生”支持wordpress语法，但是还是有很多的瑕疵，也并不实用，当然也有众多的markdown的插件：

09

CSS 渐变锯齿消失术

有意思的是，锯齿现象在 DPR 为 1 的屏幕下特别明显，而在一些高清屏（dpr > 1）的屏幕下，感受不会那么明显。

03

typecho 博客程序底部添加跳动的鱼特效

03

css视口单位vw,vh的妙用(embed篇)

https://www.bilibili.com/video/av22230745/?spm_id_from=888.80997.embed_other.whitelist 视频demo 如上视频[a

03

CSS笔记(21)

CSS可通过box-sizing来指定盒子模型,有2个值:即可指定为content-box,border-box,这样我们计算盒子大小的方式就发生了改变.

01

scss\sass calc 的mixin&include 处理方法

目前主流的浏览器对于calc属性已经支持得非常好了.所以,我准备在我们的新项目中全面启用这个属性,省得在布局方面还得用js去实现.经过详细的布局测试,总算做出来了一个demo页面.在各个pc浏览器上没有任何问题,甚至IE9都没有问题.

01

CSS 浮动布局和网格系统

浮动能将一个元素（通常是一张图片）拉到其容器的一侧，这样文档流就能够包围它。这种布局在报纸和杂志中很常见，因此 CSS 增加了浮动来实现这种效果。（CSS 是一种排版约定）

01

CSS 计算属性 calc()的完整指南（下）

从之前的文章：CSS 计算属性 calc()的完整指南(一），我们可以学习到几个方面：

02

css常用的样式总结

word-break 换行 word-break:break-all 所有的都换行 word-wrap:break-word 如果一行文字有可以换行的点，如空格，或CJK之类的，就让这些换行点换行，不关心对不对齐，好不好看。容易出现一片一片的空白 css3中自动调整大小 div{ width: 300px; height: 300px; padding: 10px; border: 2px solid green;

01

Form表单问题多多（中）

HTML5学堂 - 刘国利：在上一篇的博文当中，主要讲解了表单的嵌套规则与书写习惯。在本篇博文当中，我主要就具体的样式实现进行一下讲解，并提一下表单相关的浏览器兼容问题。今天主要提到的标签有；label、文本框和密码框input、文本域。本文最早的版本也是在2013年8月时书写的，随着行业的变化，针对本篇文章也进行了内容的调整，调整时间2015年08月05日。本篇博文当中主要内容 1、label的作用 2、如何处理input文本框|密码框的样式 3、多行文本域textarea样式的处理 label的作用

05

🤔听说这个动效可以玩一天？

闲来无事左手冰棍右手抖音消磨时间，突然一条内容文案为这个丝滑的UI交互我能玩一天的一个前端动效映入眼帘。

01

兼容iphone x * 刘海的正确姿势

9月13日凌晨终于等来了万众瞩目的苹果新品发布会，相信很多小伙伴们都期待新 iphone 可以剪掉刘海胡子，但万万没想到的是等来了三款不同的尺寸的 iphone x ，我的天，等了这么久你给我看这个？码农慌得一批满地找新 iphone 的逻辑像素，然后想着怎么兼容这刘海和胡子。

03

CSS深入理解学习笔记之overflow

1、Overflow基本属性　　overflow:visible(默认)/hidden/scroll/auto/inherit; 　　visible：超出部分可见。　　hidden：超出部分隐藏。　　scroll：超出可滚动。　　auto：若超出才出现滚动条。　　inherit：继承。（IE8+）　　注：overflow-x与overflow-y值不同，其中一个属性值被赋予visible，而另一个被赋值为hidden/scroll/auto，则visible会被重置为auto。兼容性：

05

CSS 自定义属性进阶使用（二）

通常，为了实现可复用可定制的模块，我希望将某个实现抽象化。例如，下面这段CSS代码：

02

CSS calc() 使用指南

你听说过或使用过 CSS 的 calc() 函数吗？也许你听说过它，但从未尝试过，或者尝试过使用它，但在使用过程中遇到了一些问题。这篇指南可以帮助你。

04

Web真相: CSS不是真正的编程

每隔几个月就会出现一篇文章表明：CSS并不是真正的编程语言。以编程语言的标准来说，CSS过于困难。使用这门语言会很有创造性：

01

现代 CSS 解决方案：CSS 数学函数

本文，将具体介绍其中的 CSS 数学函数（Math functions）中，已经被浏览器大规模支持的 4 个：

01

Hexo修改友链界面

之前看到友链界面的修改需要动大量源码，就没有弄。后来逐渐开始摸索、修改。自己表示很满意，按照各路大神的教程来操作也并不难。效果展示可以点击我的友链页面查看。

03

H5移动端开发学习总结

对于移动端开发而言，为了做到页面高清的效果，视觉稿的规范往往会遵循以下两点： 1.首先，选取一款手机的屏幕宽高作为基准(现在一般选取iphone6的375×667)。之前项目中也用到过iphone5的320×568。 2.对于retina屏幕(如: dpr=2)，为了达到高清效果，视觉稿的画布大小会是基准的2倍，也就是说像素点个数是原来的4倍（对iphone6而言：原先的375×667，就会变成750×1334）。

02

CSS3 calc()详细介绍及使用

calc()对很多同学来说，或许很陌生。看其外表像个函数，既然是函数为什么又出现在CSS中呢？这一点也让我百思不得其解。

01

使用CSS完成元素居中的七种方法

在网页上使 HTML 元素居中看似一件很简单的事情. 至少在某些情况下是这样的，但是复杂的布局往往使一些解决方案不能很好的发挥作用。在网页布局中元素水平居中比元素垂直居中要简单不少，同时实现水平居中和垂直居中往往是最难的。现在是响应式设计的时代，我们很难确切的知道元素的准确高度和宽度，所以一些方案不大适用。据我所知, 在CSS中至少有六种实现居中的方法。我将使用下面的HTML结构从简单到复杂开始讲解:

<img src="jimmy-choo-shoe.jp

04

兼容iPhone X* 刘海的正确姿势

本文由 IMWeb 团队成员 zzbo 首发于 IMWeb 社区网站 imweb.io。点击阅读原文查看 IMWeb 社区更多精彩文章。 9月13日凌晨终于等来了万众瞩目的苹果新品发布会，相信很多小伙伴们都期待新 iphone 可以剪掉刘海胡子，但万万没想到的是等来了三款不同的尺寸的 iphone x ，我的天，等了这么久你给我看这个？码农慌得一批满地找新 iphone 的逻辑像素，然后想着怎么兼容这刘海和胡子。以往的做法其实对于 web 前端来说，刘海在绝大多数的场景下是可以不用处理的，因为 safa

01

wordpress后台登录界面美化

@font-face { font-family:fzz; src: url('https://img.zuanmang.net/ttf/fzz.ttf'); } 模板从吾爱破解论坛搬的，原作者分享出来的图片都丢失了，样式也有点问题。写了个圆角样式及添加阴影，以及透明显示。（本想用高斯模糊奈何这个结构全都都会变成毛玻璃效果。）用PHP随机显示图片做背景，实现后台登录背景随机刷新。

02

20个 CSS 快速提升技巧

css重置库如normalize.css已经被使用很多年了，它们可以为你的网站样式提供一个比较清晰的标准，来确保跨浏览器之间的一致性。

02

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭