initial、inherit、unset、revert和all

前面的话

  在CSS中,有4个关键字理论上可以应用于任何的CSS属性,它们是initial(初始)、inherit(继承)、unset(未设置)、revert(还原)。而all的取值只能是以上这4个关键字。本文将介绍initial、inherit、unset、revert和all

 

initial

  表示元素属性的初始默认值(该默认值由官方CSS规范定义)

  兼容性: IE不支持

  [注意]关于各属性的初始默认值移步至此

//display在官方CSS规范中定义的默认值是inline
<style>
.test{display: initial;}
</style>
<div class="box">
<div class="test">测试一</div><span>文字</span>
<br>
<div >测试二</div><span>文字</span>
</div>

style="line-height: 1.5; width: 100%; height: 80px;" src="https://demo.xiaohuochai.site/css/base/b6.html" frameborder="0" width="320" height="240">

inherit

  表示元素的直接父元素对应属性的计算值

  兼容性: IE7-不支持

<style>
.box{
border: 1px solid black;
padding: 10px;
width: 100px;
}
.test{
border: inherit;
height: 30px;
}
</style>
<div class="box">
<div class="test">测试一</div>
</div>
<div class="box">
<div class="in">
<div class="test">测试二</div>        
</div>
</div>

style="width: 100%; height: 130px;" src="https://demo.xiaohuochai.site/css/base/b7.html" frameborder="0" width="320" height="240">

 

unset

  unset相对于initial和inherit而言,相对复杂一点。表示如果该属性默认可继承,则值为inherit;否则值为initial。实际上,设置unset相当于不设置

  兼容性: IE不支持,safari9-不支持,ios9.2-不支持,android4.4.4-不支持

【常用默认可继承样式】

color
cursor
direction
font
letter-spacing
line-height
list-style
text-align
text-indent
text-shadow
text-transform
white-space
word-break
word-spacing
word-wrap
writing-mode
//内容为测试一的元素和内容为测试二的元素的样式是一样的
<style>
.box{
border: 1px solid black;
padding: 10px;
width: 100px;
color: red;
}
.test1{
border: unset;
color: unset;
}
</style>
<div class="box">
<div class="test">测试一</div>
<div>测试二</div>
</div>

style="width: 100%; height: 80px;" src="https://demo.xiaohuochai.site/css/base/b8.html" frameborder="0" width="320" height="240">

 

revert

  表示样式表中定义的元素属性的默认值。若用户定义样式表中显式设置,则按此设置;否则,按照浏览器定义样式表中的样式设置;否则,等价于unset 

  兼容性: 只有safari9.1 和ios9.3 支持

 

all

  表示重设除unicode-bidi和direction之外的所有CSS属性的属性值,取值只能是initial、inherit、unset和revert

  兼容性: IE不支持,safari9-不支持,ios9.2-不支持,android4.4-不支持

<style>
.test{
border: 1px solid black;
padding: 20px;
color: red;
}
.in{
/*  all: initial;
all: inherit;
all: unset;
all: revert; */
}
</style>
<div class="test">
<div class="in">测试文字</div>            
</div>

  【1】当all:initial时,.in的所有属性都取默认值

border:none;padding:0;color:black;

  【2】当all:inherit时,.in的所有属性都取父元素继承值

border:1px solid black;padding:20px;color:red;

  【3】当all:unset时,.in的所有属性都相当于不设置值,默认可继承的继承,不可继承的保持默认值

border:none;padding:0;color:red;

style="width: 100%; height: 220px;" src="https://demo.xiaohuochai.site/css/base/b9.html" frameborder="0" width="320" height="240">


更多专业前端知识,请上 【猿2048】www.mk2048.com

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/362942.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于知识图谱的医疗诊断系统论文

本作品禁止任何人/企业申请专利&#xff0c;禁止任何人使用本作品参加任何比赛或作为毕业设计&#xff0c;如使用本作品源码进行商业用途务必联系作者。 一.科学性 1.研究意义 信息科技经过 60 余年的发展&#xff0c;已经普及到社会生活的每一个角落。随着信息技术在国家治理、…

SpringBoot:SpringBoot简介

SpringBoot ...如今&#xff0c;有关SpringBoot的话题很多。 那么&#xff0c;SpringBoot是什么&#xff1f; SpringBoot是一个新的Spring产品组合项目&#xff0c;它通过大幅度减少所需的配置量来构建可立即投入生产的Spring应用程序。 Spring Boot通过基于运行时可用的类路径…

华为云(ECS)-linux服务器中-Ubuntu图形界面安装-解决root登录受限-VNCviwer/Teamviwer远程访问教程...

安装ubuntu-desktop 1.更新软件库 apt-get update2.升级软件 apt-get upgrade3.安装桌面 apt-get install ubuntu-desktop 解决root登录受限 华为云登录进去是guest用户&#xff0c;不能选择登录用户且不需要密码就即可登录。 登录进去会如下警告信息&#xff1a; 首先下载…

两列自适应布局的4种思路

前面的话 前面已经介绍过单列定宽单列自适应的两列布局&#xff0c;而两列自适应布局是指一列由内容撑开&#xff0c;另一列撑满剩余宽度的布局方式。本文将从float、table、flex和grid来介绍两列自适应布局的4种思路 float 【思路一】float 在单列定宽单列自适应的两列布局中…

机器学习中为什么使用one-hot编码

one-hot编码把分类数据转化为二进制格式&#xff0c;供机器学习使用。 转载于:https://www.cnblogs.com/xin-qing3/p/11447489.html

Java EE并发API教程

这是一个示例章节&#xff0c;摘自Francesco Marchioni编辑的WildFly上的实用Java EE 7开发 。 本章讨论了新的Java EE并发API&#xff08;JSR 236&#xff09; &#xff0c;它概述了使用一组托管资源在Java EE容器上并行执行任务的标准方法。 为了描述如何在您的应用程序中使…

经桥科技与湖南文化艺术产业集团合力打造“网乐潇湘”

签约仪式现场 签约仪式现场 签约仪式现场 经网1月7日讯(记者 陈飞 曹亮) 湖南经桥网络科技有限公司与湖南文化艺术产业集团“网乐潇湘”项目签约仪式隆重举行。经桥科技董事长姜志强、湖南文化艺术产业集团总经理陈介辉等领导出席此次签约仪式。 经桥科技与湖南文化艺术产业集…

文本溢出text-overflow和文本阴影text-shadow

前面的话 CSS3新增了一些关于文本的样式&#xff0c;其中text-overflow文本溢出和text-shadow文本阴影有些特别。因为它们有对应的overflow溢出属性和box-shadow盒子阴影属性。本文将详细介绍这两个作用在文本上的溢出和阴影属性 文本溢出 一般地&#xff0c;人们一提到文本溢出…

python第十三天,函数的嵌套定义,global,nonlocal关键字的使用,闭包及闭包的运算场景,装饰器...

今日内容 1. 函数的嵌套定义 2.global&#xff0c;nonlocal关键字 3.闭包及闭包的运用场景 4.装饰器 函数的嵌套定义 1. 概念&#xff1a;在一个函数内部定义另一个函数 2 .为什么要有函数的嵌套定义&#xff1a; 1) 函数fn2想要直接使用fn1函数的局部变量&#xff0c;可以将fn…

glup打包代码不更新

一开始以为是缓存问题&#xff0c;清完缓存依旧不行。找到打包文件找到自己改的代码是否生效了。发现修改过的代码生效了&#xff0c;but 相同方法存在两个。方法一中是修改后的内容&#xff0c;方法二是未修改的内容。原因&#xff1a;在打包前将原文件复制了一个副本&#xf…

.net反射简介

目录 [隐藏] 1 概述 2 一些在反射中经常使用的类 3 其它 4 示例 .net反射简介-概述 反射就是动态发现类型信息的能力。它帮助程序设计人员在程序运行时利用一些信息去动态地使用类型&#xff0c;这些信息在设计时是未知的&#xff0c;这种能力类型于后期绑定。反射还支持的更高…

带有Angular JS的Java EE 7 –第1部分

今天的帖子将向您展示如何使用Java EE 7和Angular JS构建非常简单的应用程序。 在去那里之前&#xff0c;让我告诉您一个简短的故事&#xff1a; 我不得不承认&#xff0c;我从来都不是Java语言的忠实拥护者&#xff0c;但是我仍然记得我第一次使用它。 我不记得确切的年份&am…

深入理解CSS定位中的堆叠z-index

前面的话 对于所有定位&#xff0c;最后都不免遇到两个元素试图放在同一位置上的情况。显然&#xff0c;其中一个必须盖住另一个。但&#xff0c;如何控制哪个元素放在上层&#xff0c;这就引入了属性z-index 定义 利用z-index&#xff0c;可以改变元素相互覆盖的顺序。这个属性…

初识服务发现及Consul框架的简单使用

初识服务发现及Consul框架的简单使用 1.什么是服务发现&#xff1f; 服务发现组件记录了&#xff08;大规模&#xff09;分布式系统中所有服务的信息&#xff0c;人们或者其它服务可以据此找到这些服务。 DNS 就是一个简单的例子。 当然&#xff0c;复杂系统的服务发现组件要提…

进程间的通信方式

5&#xff0c;进程间通信方式____ &#xff0c;____ &#xff0c;____ &#xff0c;____ &#xff0c;____ &#xff0c;_____。 管道 消息队列 共享内存 信号 信号量 套接字 管道通信&#xff1a;实质是管道文件操作&#xff0c;分为有名管道和 无名管道两种。 无名管…

JavaFX技巧4:总结

在为JavaFX开发自定义控件时&#xff0c;我强烈建议您遵循JavaFX核心控件的脚步&#xff0c;并使控件的API尽可能最终化&#xff0c;并在所有方法声明的前面放置“ final”关键字。 例 在FlexGanttFX中&#xff0c;我有很多看起来像这样的代码&#xff1a; public final Acti…

CSS光标cursor

前面的话 在浏览器中&#xff0c;光标对于提供交互反馈很有用。通过在不同的场景中改变光标&#xff0c;就能赋予其不同的含义 定义 cursor光标 值: [<uri>,]*[auto | default | pointer | crosshair | move | e-resize | ne-resize | nw-resize | n-resize | se-resize …

jquery获取value值时将数字型字符串前面的0自动截取处理方法

<li class"cwhite" value"02" id"02" οnclick"getQuestionList(02,this);">数学</li> var subjectCode $(obj).find(".bd.subject li[classcwhite active]").val(); 这种方法会把02前面的0自动截取 var subje…

《Effective C#》Item 21:用委托实现回调

委托属于C#中的新名词&#xff0c;它的应用也非常广泛&#xff0c;例如事件就是委托最简单而又直接的例子。 那么首先说说什么是委托&#xff0c;其实委托在用过C或者C的人看来就是函数指针&#xff0c;不过使用C#的大多数人都没有用过这两门语言&#xff0c;因此对委托的理解不…

人生建议

1、不要在最幸福的时候许诺。 2、不要在暴怒的时候回信息。 3、不要在悲伤的时候做决定。 4、不要在迷茫的时候选择轻松的道路。 5、不要在自己做决定后怪别人。 6、不要把现在的幸福当作理所当然。 转载于:https://www.cnblogs.com/tarenacode/p/11460619.html