当前位置: 首页 > news >正文

css属性的继承、初识值、计算值、当前值、应用值

css属性

我觉得大部分学习前端的人应该都没有按照教科书一般的来学习css,可能是类似搭积木一样,需要什么拿什么,所以可能最对一些基本的概念没有很好的理解,这里列出的是一些css属性的关键概念:

  • css属性初始值
  • css属性计算值
  • css属性应用值
  • css属性当前值
  • css属性继承

大部分css属性都可以有这个值:inherit 继承父级值 :initial 初始值,
inherit 继承父级值

  1. 对于可继承属性而言,直接继承父级的属性,直接父级元素没有设置的话会一级级往上继承,如果都没有就是默认值;
  2. 对于非继承属性而已,这个还是要慎用,当然也可以用,可以继承父级元素的属性,但是父级元素可能没有这个属性,所以避免这种情况考虑使用initial初始值比较合理

初始值

在 每个CSS属性 定义的概述中已经给出的 初始值 针对不同的 继承或非继承属性 有着不同的含义.

对于继承属性, 初始值 只能 被用于没有指定值的根元素上【因为不是根元素都会继承其他的父元素指定值】.

对于非继承属性 ,初始值可以被用于 任意 没有指定值的元素上.

在CSS3中允许作者使用 initial 关键词明确的设定初始值.

计算值

一个CSS属性的 计算值 (computed value) 通过以下方式从指定的值计算而来:

处理特殊的值 inherit 和 initial,以及
进行计算,以达到属性摘要中“计算值”行中描述的值。
计算属性的"计算值"通常包括将相对值转换成绝对值(如 em 单位或百分比)。

例如,如一个元素的属性值为 font-size:16px 和 padding-top:2em, 则 padding-top 的计算值为 32px (字体大小的2倍).

然而,有些属性的百分比值会转换成百分比的计算值(这些元素的百分比相对于需要布局后才能知道的值,如 width, margin-right, text-indent, 和 top)。另外,line-height 属性值如是没有单位的数字,则该值就是其计算值。这些计算值中的相对值会在 应用值 确定后转换成绝对值。

计算值的最主要用处是 继承 , 包括 inherit 关键字。

getComputedStyle() DOM API 返回的 解析值, 可能是 计算值或 应用值。

应用值

CSS 属性的应用值(used value)是完成所有计算后最终使用的值,可以由 window.getComputedStyle 获取。尺寸 (例如 width, line-height) 单位为像素, 简写属性 (例如 background) 与组成属性相符 (例如 background-color,display) 与 position 、float相符,每个 CSS 属性都有值。

详情

计算出CSS属性的最终值有三个步骤。首先,指定值specified value 取自样式层叠 (选取样式表里权重最高的规则), 继承 (如果属性可以继承则取父元素的值),或者默认值。然后,按规范算出 计算值computed value (例如, span 指定 position: absolute 后display 变为 block)。最后,计算布局(尺寸比如 auto 或 百分数 换算为像素值 ), 结果即 应用值used value。这些步骤是在内部完成的,脚本只能使用 window.getComputedStyle 获得最终的应用值。

举例

没有明确的宽度。指定的宽度: auto (默认). 计算的宽度: auto. 应用的宽度: 998px (举例而言)。
明确的宽度: 50%. 指定的宽度: 50%. 计算的宽度: 50%. 应用的宽度: 447px
明确的宽度: inherit. 指定的宽度: 50%. 计算的宽度: 50%. 应用的宽度: 221px .

与计算值的区别

CSS 2.0 只定义了 计算值 computed value 作为属性计算的最后一步。 CSS 2.1 引进了定义明显不同的的应用值,这样当父元素的计算值为百分数时子元素可以显式地继承其高宽。 对于不依赖于布局的 CSS 属性 (例如 display, font-size, line-height)计算值与应用值一样,否则就会不一样 (引自 CSS 2.1 Changes: Specified, computed, and actual values):

实际值

一个CSS属性的实际值(actual value)是应用值(used value)被应用后的近似值。例如,一个用户代理可能只能渲染一个整数像素值的边框(实际值),并且该值可能被强制近似于边框的计算宽度值。

继承与非继承

每个 CSS 属性定义 的概述都指出了这个属性是默认继承的 ("Inherited: Yes") 还是默认不继承的 ("Inherited: no")。这决定了当你没有为元素的属性指定值时该如何计算值。

继承
当元素的一个 继承属性 (inherited property )没有指定值时,则取父元素的同属性的 计算值 computed value 。只有文档根元素取该属性的概述中给定的初始值(initial value)(这里的意思应该是在该属性本身的定义中的默认值)。以下是继承的一些属性

azimuth, border-collapse, border-spacing,
caption-side, color, cursor, direction, elevation,
empty-cells, font-family, font-size, font-style,
font-variant, font-weight, font, letter-spacing,
line-height, list-style-image, list-style-position,
list-style-type, list-style, orphans, pitch-range,
pitch, quotes, richness, speak-header, speaknumeral,
speak-punctuation, speak, speechrate,
stress, text-align, text-indent, texttransform,
visibility, voice-family, volume, whitespace,
widows, word-spacing

非继承
当元素的一个 非继承属性 (在Mozilla code 里有时称之为 reset property ) 没有指定值时,则取属性的 初始值initial value (该值在该属性的概述里被指定)。
以下列出均为非继承

display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、page-bread-before和unicode-bidi。

参考:http://www.w3.org/TR/CSS21/pr...
https://developer.mozilla.org...
http://www.cnphp.info/css-sty...

相关文章:

  • redis以及php的redis扩展安装部署
  • Gartner表示安全分析可能是安全风险检测的关键
  • 掌众金融:业务主体变更掌众金服
  • 营造平安 信息化使公交事业更加人性化
  • 减少二次开发成本 无缝融入当前流程
  • 前瞻WCTF世界黑客大师赛10大看点
  • VMware在VMworld大会将会推出什么新东西?
  • 梭子鱼公布“三管齐下”战略
  • 企业客户应该对安全厂商提出的三个问题
  • IT运营是IT运维的下一个出口?
  • 南方周末:阿里巴巴的大数据梦
  • java异常—检查异常(checked exception)和未检查异常(unchecked exception)
  • 《影响中国大数据产业进程100人》张华平:如何应用网络搜索挖掘内容价值
  • Linux文件的三个时间属性(Atime,Mtime,Ctime)
  • EIGRP系统复习【转载】
  • 【知识碎片】第三方登录弹窗效果
  • angular2 简述
  • CSS盒模型深入
  • Druid 在有赞的实践
  • JavaScript新鲜事·第5期
  • Netty 4.1 源代码学习:线程模型
  • Spring Security中异常上抛机制及对于转型处理的一些感悟
  • vue数据传递--我有特殊的实现技巧
  • Xmanager 远程桌面 CentOS 7
  • 浮动相关
  • 前端临床手札——文件上传
  • 正则与JS中的正则
  • Java总结 - String - 这篇请使劲喷我
  • Redis4.x新特性 -- 萌萌的MEMORY DOCTOR
  • 阿里云ACE认证学习知识点梳理
  • # 日期待t_最值得等的SUV奥迪Q9:空间比MPV还大,或搭4.0T,香
  • #我与Java虚拟机的故事#连载14:挑战高薪面试必看
  • #我与Java虚拟机的故事#连载15:完整阅读的第一本技术书籍
  • (六)什么是Vite——热更新时vite、webpack做了什么
  • (区间dp) (经典例题) 石子合并
  • (三)Hyperledger Fabric 1.1安装部署-chaincode测试
  • (转)母版页和相对路径
  • (转载)虚函数剖析
  • *++p:p先自+,然后*p,最终为3 ++*p:先*p,即arr[0]=1,然后再++,最终为2 *p++:值为arr[0],即1,该语句执行完毕后,p指向arr[1]
  • ./configure,make,make install的作用
  • .md即markdown文件的基本常用编写语法
  • .NET 2.0中新增的一些TryGet,TryParse等方法
  • .Net core 6.0 升8.0
  • .NET Windows:删除文件夹后立即判断,有可能依然存在
  • .NET(C#) Internals: as a developer, .net framework in my eyes
  • .Net6使用WebSocket与前端进行通信
  • .Net的C#语言取月份数值对应的MonthName值
  • .net流程开发平台的一些难点(1)
  • .NET上SQLite的连接
  • @ConfigurationProperties注解对数据的自动封装
  • [ IOS ] iOS-控制器View的创建和生命周期
  • [20171113]修改表结构删除列相关问题4.txt
  • [Asp.net MVC]Asp.net MVC5系列——Razor语法
  • [bzoj4010][HNOI2015]菜肴制作_贪心_拓扑排序
  • [CTO札记]如何测试用户接受度?