1.htmlレンダリングプロセス
ドキュメントディレクトリのツリー構造に従って、ルートノードから始まり、親要素から子要素へ、そして次の親要素から子要素へと続きます。
2.CSSプロパティ値の計算プロセス
属性値をゼロから計算するプロセス。注：各html要素をレンダリングするための前提条件は、要素のすべてのcssスタイルが価値があることです。（設定後は存在しません。通常、設定しない場合はブラウザがデフォルト値を表示します）
a。最初に宣言値を決定します。スタイルシート（デフォルト値を含むCSSスタイルなど）で赤ではない属性宣言をcssの属性値として参照します。
b。カスケード競合：カスケードルール（後述）を使用して、競合している宣言値を判別します。
例：次の2つはカスケード競合です
h1{
color: red }
.head h1{
color: red }
c。継承を使用する：aとbを介してCSSプロパティ値を設定した後、残りのプロパティには値がありません。プロパティを継承できる場合は、親要素の値が継承されます。
d。デフォルト値を使用する：a、b、cを渡した後、残りの値は再びブラウザーのデフォルトスタイルを使用します。
3.カスケードルール
a。重要性
！重要>作成者スタイル（自分で作成したスタイル）>ブラウザーのデフォルトスタイル
b。特殊性（
CSSセレクターの優先順位） CSSセレクターの計算方法は、4桁の数
千を比較することです。インラインスタイルがあるかどうかを判断するために、インラインスタイルがある場合は1、それ以外の場合は0です。
百の場所：CSSセレクター内のすべてのIDセレクターの数。
10：CSSセレクターのクラスセレクター、属性セレクター、および疑似クラスセレクターの総数。
単位：CSSセレクターの要素セレクターと疑似要素セレクターの総数。
注：キャリーシステムは10進数ではなく、225キャリーです。
c。ソースの順序
コード書き込みの優先度が低いほど高い
4.CSSの継承
主に、子要素は親要素のテキストコンテンツ属性のほとんどを継承します
5.ボックス構成
内容、パディング、ボーダー、マージン
6.行ボックスの機能
a。コンテンツに沿って延長します。コンテンツが折り返されると、ラインボックスは次の行に切り捨てられ、ラインボックスの幅と高さは設定できません。（ブロックボックスはコンテンツ全体をラップし、改行の影響を受けません）
b。ラインボックスの幅と高さを調整するためのフォントサイズ、フォントタイプ、および行の高さ
c。行ボックスのパディング境界マージンは水平方向に有効であり、実際にはスペースを占有しません。
d。空白の折り目は、ラインボックスの内側または間に発生します。
e。行ボックスは、配置時にフローティングボックスを回避します
特別：
ほとんどの要素で、ページに表示される結果は、「交換不可能な要素」と呼ばれる要素のコンテンツによって異なります。少数の要素の場合、ページに表示される結果は、img、videoなどの「変更可能な要素」と呼ばれる要素の属性によって異なります。ほとんどの交換可能な要素はラインボックスですが、ラインブロックボックスと同様に、ボックスモデルのサイズはすべて有効です。
7.ファストボックスの特徴
ラインブロックボックスの表示インラインブロックは1行を占めません。すべてのサイズが有効です
。空白の折り畳みは、ラインブロックボックス内またはラインブロックボックス間で発生します。
8.ブロックボックスの機能
a。水平方向
ブロックボックスの全幅は、それを含むブロック（親要素のコンテンツボックス）の幅と同じです。
自動の値は残りのスペースを吸収し、幅の吸収能力はマージンよりも大きくなります。幅、境界線、パディング、およびマージンが計算され、まだスペースが残っている場合、スペースはmargin-rightによって吸収されます。
マージン：0自動;中央揃え
b。垂直方向
各ブロックボックスの垂直方向の高さ：コンテンツの高さに自動的に適応します。マージン：自動は0を表します
c。2つの通常のフロー（フローティングや位置決めなどがない）ブロックボックスの上下のマージンは、隣接している場合にマージされます。2つのマージンは最大値を取ります。境界などのマージンが分離されていない限り、兄弟要素と親要素と子要素の両方が適用されます。待つ。
9.パーセンテージ値
パディング、マージン、幅のパーセンテージ値は、親要素の幅に基づいています。親要素は値を設定する必要があることに注意してください。そうしないと、パーセンテージが無効になります。
10.エレメントフローティング
a。要素が浮いた後は、ブロックボックスである必要があります
b。フローティング後、幅と高さ：自動;コンテンツの幅と高さに適応します。マージン：自動;値は0です。境界線、パディング、およびパーセンテージの値は、通常のストリームのものと同じです（第8条）。
c。フローティングボックスは、収容ブロック内の通常のフローボックスを回避し、通常のフローブロックボックスが配置されている場合、フローティングボックスは無視されます。例：通常のフローボックスはフローティングボックスの前にあり、フローティングボックスは通常のフローの下に一列に配置されます。従来のフローボックスはフローティングボックスの後ろにあり、フローティングボックスは従来のフローボックスを覆います。
d。テキストコンテンツがラインボックスでラップされていない場合、ブラウザはデフォルトでラインボックスラップされたテキストコンテンツを生成します。これは、テキストコンテンツをラップするp要素と同等であり、ブラウザはp要素でスパンを生成します（これは、と同等であることに注意してください）。ただし、スパンを追加しないでください）
e。高さの折りたたみ：フローティングボックスを計算するときに、従来のフローボックスの自動高さは考慮されないため、親要素の高さはフローティングボックスをラップしません。
解決策：clearを使用します（divを作成するか、直後に）
11.ポジショニング
a。配置要素は、ドキュメントフローを離れます（相対配置を除く）。
b。ポジショニングの際、左右に矛盾がある場合は、左が優先され、上記の矛盾が優先されます。
c。絶対に配置された包含ブロック（領域）、内側から外側への位置を設定する祖先要素の最初の要素を見つけます。この要素の塗りつぶされたボックスは包含ブロック（領域）です。見つからない場合は、Webページ全体が包含ブロックです。
d。固定位置にある包含ブロックは、ブラウザビューウィンドウ全体です。
e。コンテンツに適応するための、絶対配置と相対配置、幅と高さの自動。
f。位置決めステータスの中央揃え：
1. 定宽高
2. 将左右（上下）距离设为0
3. 将左右（上下）margin设为auto。
注意：在绝对定位和固定定位状态下，margin：auto会自动吸收剩空间。一般居中的广告就是这么显示
g。絶対配置と固定配置：ブロックボックスである必要があり、フローティングであってはならず、マージンマージはありません。