当前位置: 首页 > 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系统复习【转载】
  • 【140天】尚学堂高淇Java300集视频精华笔记(86-87)
  • android 一些 utils
  • canvas绘制圆角头像
  • Js基础——数据类型之Null和Undefined
  • Node项目之评分系统(二)- 数据库设计
  • Python十分钟制作属于你自己的个性logo
  • vuex 笔记整理
  • 搞机器学习要哪些技能
  • 基于Volley网络库实现加载多种网络图片(包括GIF动态图片、圆形图片、普通图片)...
  • 模型微调
  • 译自由幺半群
  • elasticsearch-head插件安装
  • PostgreSQL之连接数修改
  • #QT项目实战(天气预报)
  • #免费 苹果M系芯片Macbook电脑MacOS使用Bash脚本写入(读写)NTFS硬盘教程
  • (1) caustics\
  • (Matalb时序预测)PSO-BP粒子群算法优化BP神经网络的多维时序回归预测
  • (附源码)ssm高校实验室 毕业设计 800008
  • (转)VC++中ondraw在什么时候调用的
  • (转)从零实现3D图像引擎:(8)参数化直线与3D平面函数库
  • .apk 成为历史!
  • .dat文件写入byte类型数组_用Python从Abaqus导出txt、dat数据
  • .NET 中 GetHashCode 的哈希值有多大概率会相同(哈希碰撞)
  • .net知识和学习方法系列(二十一)CLR-枚举
  • /var/log/cvslog 太大
  • @vue/cli脚手架
  • [20171106]配置客户端连接注意.txt
  • [AI]ChatGPT4 与 ChatGPT3.5 区别有多大
  • [Asp.net mvc]国际化
  • [AutoSar]状态管理(五)Dcm与BswM、EcuM的复位实现
  • [BUUCTF NewStarCTF 2023 公开赛道] week3 crypto/pwn
  • [CISCN2021 Quals]upload(PNG-IDAT块嵌入马)
  • [go] 迭代器模式
  • [IE编程] WebBrowser控件中设置页面的缩放
  • [Linux] Linux入门必备的基本指令(不全你打我)
  • [Manacher]【学习笔记】
  • [Oh My C++ Diary]Main函数参数argc,argv如何传入
  • [Qt]设置窗口图标和EXE应用程序图标
  • [SpringBoot]接口的多实现:选择性注入SpringBoot接口的实现类
  • [vue-router]vue-router 路由传参问题