CSS学习(7)继承、属性值的计算过程
子元素会继承父元素的某些css属性
通常跟字体相关的属性都能被继承,具体的可以在mdn里查询是否是可继承属性
属性值的计算过程(渲染过程)
按照页面文档的树形目录结构进行依次渲染
前提条件:渲染的元素的所有CSS属性必须有值
一个元素从所有属性都没有值到所有属性都有值,这个计算过程,叫做属性值计算过程

(以下四步,每一步可能会确定一些属性值,没有确定的,继续下一步确定)
①确定声明值:参考样式表中没有冲突的声明,作为CSS属性值(比如作者样式表中没有,浏览器默认有值,则使用浏览器的)
②层叠冲突:对样式表中有冲突的声明使用层叠规则,确定CSS属性值
③使用继承:对仍然没有值的属性,若可以继承,则继承父元素的值
④使用默认值:最后还没有确定的值,使用默认值(不是浏览器设置的值)
小技巧:强制继承 color:inherit; 继承父元素的值,一些不能继承的属性,也可以用这种方法。
使用默认值:color:initial;当不知道默认值是什么的时候,使用这种办法。
CSS学习(7)继承、属性值的计算过程的更多相关文章
- 【CSS学习】--- position属性
一.前言 1.HTML中的三种布局方式: 标准流(普通流):网页中默认的布局方式,即顺序布局 浮动:float 定位:position 2.position属性的作用方式: 给position属性设置 ...
- css的五种属性值----在路上(21)
在CSS中,每个属性的属性值都有一定的范围,并且不同类型的属性值有不同的值.对于一个属性,必须取得正确的属性值,才能被浏览器正确地解释,因此一定要弄清每种类型的属性值范围.在CSS中属性一般有以下几种 ...
- 【CSS学习】--- z-index属性
一.前言 网页显示实际上是三维的,我们直观看到的有x轴和y轴,但在网页布局上还有一个z轴. 对于定位元素,我们使用top.right.left.bottom来实现元素在x-y平面上的定位,但为了表示布 ...
- 【CSS学习】--- overflow属性
一.前言 在网页布局中,未处理的溢出元素绝对算得上是个“毒瘤”.因为如果一个“盒子”周围还有其它元素,而从这个盒子中溢出的元素会和盒子周围的元素发生层叠,并脱离了整个HTML元素,所以我们应当合理使用 ...
- [TimLinux] JavaScript 获取设置在CSS类中的属性值
1. 设置属性值 // 常用方式 var myEl = document.getElementById('idMyEl'); myEl.style.display = "none" ...
- javascript之复习(css属性值的计算)
js取div的宽高咋办,css有content-box,border-box,padding-box,表现又不一样.好在有个offsetWidth, <style type="text ...
- css中的position属性值的探究
css的position属性指定了元素的定位类型,然后通过top,botton,left,right来具体定位. 在具体定位之前必须使用position属性,否则所有的具体定位属性都无法生效. pos ...
- CSS3学习笔记之属性值
font-family 设置文本的字体名称. font-style 设置文本样式. 取值 normal不使用斜体. italic使用斜体. oblique使用倾斜体. inherit从父元素继承. f ...
- css学习_css常见属性用法
1.元素的显示模式 a.被动转换:浮动.绝对定位.固定定位(转换为行内块元素特性的模式---不设置宽度时,模式换行为行内块模式后宽度是内容宽度.) b.主动转换:display:block / in ...
随机推荐
- [CF546C] Soldier and Cards - 模拟
两个人玩牌,首先两个人都拿出自己手牌的最上面的进行拼点,两张拼点牌将都给拼点赢得人,这两张牌放入手牌的顺序是:先放对方的牌再放自己的.若最后有一个人没有手牌了,那么他就输了,求输出拼点的次数和赢得人的 ...
- mybatis-plus - MybatisPlusAutoConfiguration
mybatis 的通用maper, 其实有很多, mybatis-plus 算是其中做的比较好的一款了. 这里就来看一下 mybatis-plus 是怎么实现这个通用mapper功能的. 一. Bas ...
- 16day 路径信息系列
../ 上一级目录 ./ 当前路径 ~ 返回到家目录 - 两个目录之间进行快速切换 An argument of - is equivalent to $OLDPWD(环境变量) 补充说明: [roo ...
- 汉语诗词 LaTeX 排版样式
清世何须忧庙廊——汉语诗词 LaTeX 排版样式 作者想一些中国古典诗歌,发现大多数早期的例子都是为了英文诗而创作的环境. 下面是作者给出唐诗选集的布局实例. 它不是一般解决方案,而只是一个特定的例子 ...
- python多线程返回值的实现与处理
题目: # 编写一个python程序,创建两个子线程,分别到下面的网址获取文本内容# http://mirrors.163.com/centos/6/isos/x86_64/README.txt# h ...
- 2018-2019-20175334实验四《Android程序设计》实验报告
2018-2019-20175334实验四<Android程序设计>实验报告 一.实验内容及步骤 实验四 Android程序设计-1 Android Stuidio的安装测试: 参考< ...
- 《Java程序设计》第十一周学习总结
20175334 <Java程序设计>第十一周学习总结 教材学习内容总结 第十三章 URL类 一个URL对象通常包含最基本的三部分信息:协议.地址.资源. URL对象调用 InputStr ...
- OmniGraffle原型案例 | 某APP产品原型PDF文件分享之二
1.从 App 首页进入商城 App底部 Tab有社区.商城,我们点击「商城」进入「乐宠商城」,下面简称商城.商城采用的是经典的宫格式导航设计(还有普通列表式.和瀑布流列表式.或两者皆有等),主要有搜 ...
- 记manjaro图形驱动删除后的一次补救
#一.前言 众所周知,NVIDIA的闭源驱动在Linux上的兼容性不是很好,再加上我不玩游戏,于是我就想卸载独显只留核显.我以为我装了独显和核显两种驱动,原本想直接删除独显驱动,没想到删除的是bumb ...
- C++-HDU2196-Computer-[树的直径]
直径定义:树上的最长路径,不妨设端点分别为s,t 可以证明(感觉):每个点到其最远点必定为s or t,反之亦然 首先,第一次dfs找到s 然后,第二次dfs以s为根找到t 最后,第三次dfs以t为根 ...