CSSの計算｜CSSルールの収集
npm install cssCSSルールの収集
- スタイルタグに遭遇したときにCSSルールを保存します。
- ここでは、CSSパーサーがCSSルールを分析するために呼び出されます。
- CSSルールを分析するためのこのライブラリの形式は、ここで注意深く調べる必要があります。
CSS計算｜コールの追加
- 要素が作成されるとすぐに、CSSが計算されます。
- 理論的には、要素を分析するとき、すべてのCSSルールが収集されています。
- 実際のブラウザでは、本文中にスタイルタグが記述されている場合があり、CSSを再計算する必要があります。
CSSの計算｜親要素の順序を取得
- computeCSS関数では、要素がルール
- 前のステップのスタックから、この要素のすべての親を取得できます。
- 現在の要素」が最初にフェッチされるので、親のマッチが取得され計算される順番は内側から外側へとなります。
var elements = stack.slice().reverse();
1、スタックは、現在の要素のすべての親要素のストレージ内のスタック全体の過程でDOMツリーを構築するために使用されます2、スライススタックは、その後の解析で、スタック内の要素が変更され、汚染される可能性があり、常に変化している3、配列のデフォルトのコピーにパラメータを渡さないでください4、現在の要素から外側に一致するタグのマッチングを逆に、現在の要素を取得する最初の5、セレクタかどうかをチェックするためにセレクタが現在の要素に一致するかどうかをチェックするには、見つけるために親要素に1つのレベルに移動する必要があります6、セレクタはまた、現在の要素から外側に配置する必要があります7、複雑なセレクタは、親要素のキューに一致するようにループで、単一の要素のセレクタに分割されます。
CSSの計算｜セレクタを要素に合わせる
- セレクタは、現在の要素から外側に向かって並べられます。
- 複雑なセレクタは、親要素のキューにマッチするループを使用して、個々の要素をターゲットとするセレクタに分割されます。
CSS Calculate｜セレクタの計算と要素のマッチング
- セレクタの型と要素の属性に基づいて、現在の要素にマッチするかどうかを計算します。
CSS計算｜計算プロパティの生成
- 選択範囲が一致すると、セレクタが要素に適用され、computedStyleが形成されます。
CSS計算｜特異度計算ロジック
- CSSルールは特定性と後の優先ルールに従って上書きされます。
- 特異性は四元数であり、四元数の左側に高い重みがあります。
- CSSルールの特異性は、それが含む単純なセレクタの合計に基づいています。
inline、id、class、タグ名
[0, 0, 0, 0]
div div .div[0, 0, 1, 2] < div div .div[0, 0, 1, 3].
CSS三世代タイポグラフィ
- ポジション表示 フロート ノーマルフロー
- flexはFlexible Boxの略で、「柔軟なレイアウト」を意味し、箱型モデルに最大限の柔軟性を提供するために使用されます。
- grid
どんなコンテナでもFlexレイアウトとして指定できますが、子要素のfloat、clear、vertical-align属性が設定されると無効になります。.box{ display: flex; }.
インライン要素.box{ display: flex; }
- コンテナのプロパティ
.box{ display:inline-flex; }flex-directionは主軸の方向を決定します；- row
- row-reverse
- column
- column-reverse ダウンロード
flex-wrap: 1つの軸が収まらない場合に行を折り返す方法。
row | row-reverse | column | column-reverse- nowrap: ラップなし。
- wrap折り返し、最初の行を上に。
- wrap-reverse wrap: 最初の行を下にします。
justify-contentは、項目が主軸上でどのように整列されるかを定義します。
nowrap | wrap | wrap-reverse;- flex-start :
- flex-end :
- centerを無視します。
- space-between: 両端が等しい間隔で並びます。
- space-around: 各アイテムの両側に等しい間隔。つまり、アイテム間の間隔は、アイテムとボーダーの間隔の 2 倍になります。
align-items: アイテムがどのように十字に並ぶかを定義します。
flex-start | flex-end | center | space-between | space-around;- flex-start: 十字軸の始点を揃えます。
- flex-end :
- center: 十字軸の中点。
- baseline: 項目のテキストの最初の行のベースライン。
- stretch: アイテムの高さが設定されていない場合、または auto に設定されている場合、コンテナの高さ全体を使用します。
align-content は、複数の軸の整列を定義します。このプロパティは、アイテムの軸が 1 つだけの場合は機能しません。
flex-start | flex-end | center | baseline | stretch;- flex-start: 横軸の開始位置に揃えます。
- flex-end: 横軸の終端に揃えます。
- center: 交差軸の中央に揃えます。
- space-between: 交差する軸の両端に揃えます。
- space-around: 各軸の間隔は左右均等。したがって、軸と軸の間隔は、軸と境界の間隔の2倍になります。
- stretch：軸が交差軸全体を占めます。
次のレイアウトはフレックスです。
レイアウト
- スピンドルのサイズによって、エレメントは次のように分けられます。
- no-wrapが設定されている場合、強制的に最初の行に代入されます。
植字｜スピンドルの計算
- すべてのフレックス要素を検索
- 主軸方向の残りの寸法を、これらの要素に比例して割り当てます。
- 残りのスペースが負の場合、すべてのフレックス要素は0となり、残りの要素は等角的に圧縮されます。
レイアウト｜クロス軸の計算
- 各行の最大の要素のサイズに基づいて行の高さを計算します。
- 行の高さflex-alignとtem-alignに応じて、以下のようにします。
- 固定要素の特定位置
レンダリング｜各要素の描画
- 描画はグラフィック環境に依存
- ここでは npm パッケージの images を使用します。
- 描画はビューポート上で行われます。
flex-start | flex-end | center | space-between | space-around | stretch;描画に関するプロパティ：その他
レンダリング｜DOMツリーの描画
- 子要素の draw メソッドを再帰的に呼び出して DOM ツリーを完成させます。
- 描画する必要のないノードを無視します。
- 実際のブラウザでは、テキストの描画は難しい部分です。
- 実際のブラウザーは、いくつかのレイヤーを合成し、それを無視します。
