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 ...
随机推荐
- 设置Eclipse中的字符集为UTF-8
Eclipse 修改字符集 默认情况下 Eclipse 字符集为 GBK,但现在很多项目采用的是 UTF-8,这是我们就需要设置我们的 Eclipse 开发环境字符集为 UTF-8, 设置步骤如下: ...
- wget安装nginx
#下载: wget http://nginx.org/download/nginx-1.8.0.tar.gz #解压: tar -zxvf nginx-1.8.0.tar.gz #安装依赖插件 yum ...
- C/C++ Windows API——获取系统指定目录(转)
原文地址:C/C++ Windows API——获取系统指定目录 经测试,在win10 VS2017中用wprintf()输出正常,SHGetSpecialFolderPath函数也正常运行 但是用M ...
- mysql的优化(经典必看)
1.选取最适用的字段属性 MySQL可以很好的支持大数据量的存取,但是一般说来,数据库中的表越小,在它上面执行的查询也就会越快.因此,在创建表的时候,为了获得更好的性能,我们可以将表中字段的宽度设得尽 ...
- 巨杉Tech | 十分钟快速搭建 Wordpress 博客系统
介绍 很多互联网应用程序开发人员第一个接触到的网站项目就是博客系统.而全球使用最广的Wordpress常常被用户用来快速搭建个人博客网站.默认情况下,Wordpress一般在后台使用MySQL关系型数 ...
- 简述python(threading)多线程
一.概述 import threading 调用 t1 = threading.Thread(target=function , args=(,)) Thread类的实例方法 # join():在子线 ...
- 整理收集的一些常用java工具类
1.json转换工具 package com.taotao.utils; import java.util.List; import com.fasterxml.jackson.core.JsonPr ...
- echarts 如何去掉折线上的小圆点
series:[{ symbol:none; //去掉折线上的小圆点 type:line; name:seriesName; data:seriesData }]
- Centos7 安装 GitLab 代码管理服务器
一.安装依赖 yum -y install policycoreutils openssh-server openssh-clients postfix 二.启动postfix,并设置开机自启动 sy ...
- Java+Selenium+Testng自动化测试学习(三)— 断言
1.修改Login类加入断言: 断言:检查我们操作页面后得到的结果与我们预期的结果是否一致. 2.使用xml文件运行所有的测试类: Login类写入两个测试用例: package com.test; ...