后端码农谈前端（CSS篇）第八课：继承与层叠

时间 2019-11-06

标签后端前端 css 第八继承层叠栏目 CSS 繁體版

原文原文链接

1、继承

继承：所谓CSS样式继承，就是子元素应用父元素的规则声明。（由这一特性，可将CSS属性分为可继承属性和非可继承属性。）
可继承属性：属性值可由父元素继承给子元素的属性称之为可继承属性。html

哪些属性是可继承属性？app

一、文本样式属性

text-indent、text-align、word-spacing、letter-spacing、text-transform、text-decoration、direction、white-space字体

二、字体样式属性

font、font-family、font-size、font-style、font-variant、font-weightspa

三、列表样式属性

list-style、list-style-image、list-style-position、list-style-typecode

四、color属性

注：这里特别解释:font-size属性(继承性比较特殊)
不一样于有准确的值被继承,font-size继承的是计算的值。 orm

例如：htm

 
  <!DOCTYPE html>  
   
  <html lang=“utf8”> 
   
      <head> 
   
          <meta charset="utf-8"> 
   
          <title>Demo</title> 
   
      </head> 
   
      <body style="font-size:85%"> 
   
          body字体大小 
   
          <h1 style="font-size:200%">h1字体大小</h1> 
   
          <h2 style="font-size:150%">h2字体大小</h2> 
   
          <p>p字体大小<em>em字体大小</em></p> 
   
      </body> 
   
  </html>

元素	值	计算值
default font-size	16px
<body>	85%	16px × 85% = 13.6px
<h1>	200%	13.6px × 200% = 27.2px
<h2>	150%	13.6px × 150% = 20.4px
<p>	unspecified	13.6px
<em>	unspecified	13.6px

即:除非font-size值被从新赋值,不然就按照上一次的尺寸大小值继续.好比上图中设置body字体为默认字体(一般为16px=1em)的85%(13.6px),那么下面的字体均为13.6px.而不是继续继承85%,让13.6再次乘以85%。继承

2、层叠

层叠：所谓CSS样式层叠就是DOM元素应用样式表中的规则覆盖继承样式的过程。ip