360フロントエンドスター計画-cssに深く入り込む(2)

レッスンppt
一、継承
一部の要素では、親要素の計算値が自動的に継承されます.
例:

<p>
  This is a <em>testem> of <strong>inheritstrong>.
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です.
二、初期値
頂点まで上に継承しても値が見つからない場合は、初期値が必要です.

CSSでは、各属性に初期値

がある.

background-colorの初期値はtransparent透明

である.

margin-leftの初期値は0

である.

は、初期値、例えばbackground-color: initial

に明示的にリセットすることができる.
三、CSS評価プロセス

filtering:domツリーの各要素をスタイルルールでセレクタマッチングし、有効な属性値をマッチングし、現在のメディアクエリーmediaにマッチングするなど、ユーザーが印刷するときにmediaをロードするのは印刷スタイルのcssスタイルであり、生成された宣言値は1つ以上、例えばpラベルが2つのセレクタp{ font-size: 16px }にマッチングする可能性があります. p.text{ font-size: 1.2em }

cascading:セレクタの特異性を比較する、最も優先度の高いセレクタを選択し、1.2 em

のような積層値を生成する.

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を求めます.
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:h 1の文字が重なる
h 1にはline-heightという属性がないため、上を向いて親を探すのline-height:150%を継承し、相対値であるため、 のline-heightに乗じて値を計算し、上を向いて line-height:16px(ブラウザデフォルト)を するので、 の の は24 pxで、 のフォントは40 pxなので、 り げ に なる.
どうやってこの を しますか?
150%を1.5に
パーセンテージについては、resolvingで され、150%を24 pxに しますが、 の さを1.5に すると、resloingでarticleのline-heightを1.5に つけ、formattingで1.5に のling-heightを じて60 pxを ることができます.