360前端星學習筆記-深刻css(2)

時間 2019-12-10

標籤前端學習筆記深刻 css 欄目 CSS 简体版

原文原文鏈接

1、css繼承

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

舉例：html

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

上述代碼，em標籤裏的color就會繼承父元素的color，爲color: #666。瀏覽器

1.2 顯示繼承

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

html {
  box-sizing: border-box;
}

.some-widget {
  box-sizing: content-box;
}

html根元素下全部元素（除獨自設置：如.some-widget）的box-sizing都是border-box。dom

2、初始值

當向上繼承到頂點仍是沒找到值的話，就須要初始值了。佈局

CSS 中，每一個屬性都有一個初始值
background-color 的初始值爲 transparent 透明
margin-left 的初始值爲 0
能夠顯式重置爲初始值，好比 background-color: initial

3、CSS求值過程

filtering：經過樣式規則爲dom樹種的各個元素進行選擇器匹配，匹配有效的屬性值，匹配當前媒體查詢media等等,好比當用戶打印時，加載media是打印樣式的css樣式，生成的聲明值可能會有一個或多個，好比一個p標籤匹配到了兩個選擇器 p{ font-size: 16px },p.text{ font-size: 1.2em }
cascading：用過對比選擇器的特異性，選出優先級最高的一個選擇器，生成層疊值，好比1.2em
defaulting：判斷層疊值是否爲空，若是爲空，使用繼承或者初始值，生成指定值，保證指定值必定不爲空。
resolving：將相對值計算成絕對值，好比em轉化成px，相對路徑轉化成絕對路徑等，生成計算值( computed value ：在瀏覽器不進行實際佈局時，獲得的具體的值)
formatting: 有些值不能靜態計算出來的，好比有些值須要渲染以後才能得到，如vh，vw，百分比這種，獲得使用值
將小數像素值轉爲整數，好比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。spa

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，因此折行時會重疊。code