360前端星計劃-深入css（2）

liusGG發表於2018-06-05
前端CSS

課程ppt

一、繼承

某些元素會自動繼承其父元素的計算值

舉例：

<p>
  This is a <em>test</em> of <strong>inherit</strong>.
</p>
<style>
  p { color: #666; }
</style>
複製程式碼

上述程式碼，em標籤裡的color就會繼承父元素的color，為color: #666。

顯示繼承

* {
  /* 給box-sizing設定顯示繼承 */
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
}

.some-widget {
  box-sizing: content-box;
}
複製程式碼

html根元素下所有元素（除獨自設定：如.some-widget）的box-sizing都是border-box。

二、初始值

當向上繼承到頂點還是沒找到值的話，就需要初始值了。

  1. CSS 中，每個屬性都有一個初始值
  2. background-color 的初始值為 transparent 透明
  3. margin-left 的初始值為 0
  4. 可以顯式重置為初始值，比如 background-color: initial

三、CSS求值過程

  1. filtering：通過樣式規則為dom樹種的各個元素進行選擇器匹配，匹配有效的屬性值，匹配當前媒體查詢media等等,比如當使用者列印時，載入media是列印樣式的css樣式，生成的宣告值可能會有一個或多個，比如一個p標籤匹配到了兩個選擇器 p{ font-size: 16px },p.text{ font-size: 1.2em }
  2. cascading：用過對比選擇器的特異性，選出優先順序最高的一個選擇器，生成層疊值，比如1.2em
  3. defaulting：判斷層疊值是否為空，如果為空，使用繼承或者初始值，生成指定值，保證指定值一定不為空。
  4. resolving：將相對值計算成絕對值，比如em轉化成px，相對路徑轉化成絕對路徑等，生成計算值( computed value ：在瀏覽器不進行實際佈局時，得到的具體的值)
  5. formatting: 有些值不能靜態計算出來的，比如有些值需要渲染之後才能獲得，如vh，vw，百分比這種，得到使用值
  6. 將小數畫素值轉為整數，比如width：400.2px,轉化成width: 400px,生成實際值，css求值完畢

3.1 舉個栗子?

求strong標籤裡的font-size值?

<article>
  <p>卡爾斯巴德洞窟（Carlsbad Caverns）是美國的一座國家公園，
  位於新墨西哥州東南部。遊客可以通過天然入口徒步進入，也可以
  通過電梯直接到達<strong>230米</strong>的洞穴深處。</p>
</article>

<style>
body {
  margin: 0;
}
article {
  font-size: 14px;
  line-height: 1.6;
}
p {
  font-size: 1.1em;
}
</style>
複製程式碼

匹配strong標籤的選擇器，沒有，則使用繼承值或者初始值，strong標籤的父級是p標籤，相對值為font-size: 1.1em，因為font-size: 1.1em是相對值，不能直接渲染到頁面裡，找到p的父級article的font-size: 14px，然後將相對值轉化為絕對值font-size:15.4px，在將絕對值轉化成整數值font-size:15px，求出strong標籤裡font-size: 15px。

3.2 再來一個栗子?

下面這坨程式碼有沒有什麼問題？

<article>
  <h1>卡爾斯巴德洞窟</h1>
  <p>卡爾斯巴德洞窟（Carlsbad Caverns）是美國的一座國家公園，
  位於新墨西哥州東南部。遊客可以通過天然入口徒步進入，也可以
  通過電梯直接到達230米的洞穴深處。</p>
</article>

<style>
body {
  margin: 0;
}
article {
  line-height: 150%;
}
h1 {
  font-size: 40px;
}
p {
  font-size: 14px;
}
</style>
複製程式碼

演示：

演示

bug：h1中的文字會重疊

由於h1中沒有line-height這個屬性，他會繼承向上找父級<article>的line-height:150%，是個相對值，所以要乘<article>的line-height計算值，在向上繼承<html>的line-height:16px(瀏覽器預設),所以最後的實際值是24px，本身字型是40px，所以折行時會重疊。

如何解決這個問題呢？

把150%改成1.5

對於百分數，會在resolving中轉換，把150%轉化成24px，但是設定行高為1.5，他會在resloing找到article的line-height為1.5，然後在formatting中將1.5乘以自己ling-height得到60px。

相關文章