Heim > Web-Frontend > HTML-Tutorial > initial、inherit、unset、revert和all_html/css_WEB-ITnose

initial、inherit、unset、revert和all_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:18:51
Original
1377 Leute haben es durchsucht

× 目录 [1]initial [2]inherit [3]unset [4]revert [5]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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

unset

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

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

【常用默认可继承样式】

colorcursordirectionfontletter-spacingline-heightlist-styletext-aligntext-indenttext-shadowtext-transformwhite-spaceword-breakword-spacingword-wrapwriting-mode
Nach dem Login kopieren

//内容为测试一的元素和内容为测试二的元素的样式是一样的<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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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

border:none;padding:0;color:black;
Nach dem Login kopieren

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

border:1px solid black;padding:20px;color:red;
Nach dem Login kopieren

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

border:none;padding:0;color:red;
Nach dem Login kopieren

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage