後端碼農談前端（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