了解css中的关键字initial、inherit、unset、revert和all属性


当前第2页 返回上一页

【常用默认可继承样式】

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

//内容为测试一的元素和内容为测试二的元素的样式是一样的

<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>

revert

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

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

all

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

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

<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的所有属性都取默认值

1

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

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

1

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

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

1

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

本文转自:https://www.cnblogs.com/xiaohuochai/p/5464456.html

推荐学习:css快速入门

以上就是了解css中的关键字initial、inherit、unset、revert和all属性的详细内容,更多文章请关注木庄网络博客

返回前面的内容

相关阅读 >>

如何使用css设置框架内文本的垂直位置

css border-image-source属性怎么用

css如何使用:indeterminate选择器

css怎么实现禁止点击

为什么要用div+css布局

深入了解css3 border-sizing属性

css层叠性重要么

css中可以实现旋转效果的属性是什么

css实现三角的原理

css如何实现边框长度控制功能

更多相关阅读请进入《css》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...