1.三角形を実現する
三角形の実現の原則：幅は0、高さは0、（1）水平方向と垂直方向の側面（上、下、左、右）が境界線方向に設定されています。他のエッジには境界線方向を使用します：長さは完全に透明です。（2）上下左右（上下左右）の設定があり、斜辺が三角形の右側にある場合は、上下の線と右側の斜線を設定します。斜辺が三角形の左側にある場合は、上部または下部の線と左側の斜線を設定します。
2.水平方向の中央揃えを実現する
（1）インライン要素は水平方向に中央揃えされます
text-align：center を使用して、ブロックレベル要素内のインライン要素の水平方向の中央揃えを実現します。このメソッドは、インライン要素（インライン）、インラインブロック（インラインブロック）、インラインテーブル（インラインテーブル）、およびインラインフレックス要素に有効です。
（2）インラインブロックレベル要素は水平方向に中央揃えされます
固定幅のブロックレベル要素のmargin-left およびmargin-rightをautoに設定することで、ブロックレベル要素を水平方向に中央揃えにすることができます。
（3）マルチレベルブロック要素は水平方向に中央揃えされます
インラインブロックを使用：行に2つ以上のブロックレベル要素がある場合、ブロックレベル要素型ディスプレイ提供することにより、（ディスプレイ）ブロック、インラインとしてテキストALIGN =左属性および親コンテナの中心へ。複数ようレベル要素は水平方向に中央揃えされます。
ディスプレイの使用：flex：フレキシブルレイアウト（flex ）を使用して水平方向の中央揃えを実現します。ここでは、ジャスティファイコンテンツを使用して、フレキシブルボックス要素の主軸（水平軸）方向の配置を設定します。この例では、子要素を水平方向中央に配置します。
3.垂直方向に中央揃え
（1）単一行のインライン要素は垂直方向に中央揃えになります
インライン要素の高さ（height ）と行の高さ（line-height）を等しく設定すると、要素は垂直方向に中央揃えになります。
（2）マルチライン要素は垂直方向に中央揃えされます
テーブルレイアウトを使用する：親要素の表示タイプをテーブルに設定します。子要素の表示タイプ（display）はtable-sellです。子要素の垂直方向の中央揃えを実現するには、テーブルレイアウトの中央にvertical-alignを使用します。
フレックスレイアウトを使用：フレックスレイアウトを使用して垂直方向の中央揃えを実現し、表示タイプ（ディスプレイ）をフレックスに設定します。これらの中で、フレックス方向：列は主軸の方向を縦に定義します。フレックスレイアウトはCSS3で定義されているため、古いブラウザには互換性の問題があります。
「スプライトエレメントゴーストエレメント」を使用します。つまり、高さ100％の疑似エレメントを親コンテナーに配置して、テキストと疑似エレメントを垂直方向に揃え、垂直方向の中央揃えの目的を達成します。
（3）ブロックレベルの要素は垂直方向に中央揃えになります
高さが固定のブロックレベル要素：親要素の位置は相対に設定され、子要素の位置は絶対に設定されます。絶対位置決め要素による上部からの距離（トップ）50％、及び素子高さのマージン上半分が上方にオフセットし、垂直センタリングを達成することができます。
高さが不明なブロックレベルの要素：垂直方向に中央揃えされた要素の高さと幅が不明な場合、CSS3の変換プロパティを使用してY軸を50％オフセットし、垂直方向の中央揃えを実現できます。ただし、一部のブラウザには互換性の問題があります。
4.水平および垂直に中央揃え
固定された幅と高さの要素を水平および垂直方向に中央揃え：要素の全幅の半分を余白シフトすることにより（パディングなどを含む）、要素は水平方向および垂直方向に中央揃えになります。
不明な幅と高さの要素が水平方向と垂直方向の中央に配置されます。2D変換を使用して、幅と高さの半分が水平方向と垂直方向に逆方向にシフトされ、要素が水平方向と垂直方向の中央に配置されます。変換：変換（-50％、-50％）;
フレックスレイアウトを使用する（表示：フレックス）： 主軸（水平軸）（中央）の方向でフレキシブルボックス要素の配置を設定または取得するためにjustify-contentが使用され、align-items属性はフレックスコンテナー内の現在のフレックスアイテムを定義します行（中央）の横軸（縦軸）方向の配置。
グリッドレイアウトを使用（表示：グリッド）：互換性が低く、推奨されません
画面の水平方向と垂直方向の中央に配置します。通常のログインページと登録ページの両方を使用する必要があります。互換性を高めるために、テーブルレイアウトも使用する必要があります。
5. CSS3の新機能
（1）変形変形
要素の翻訳（翻訳）、回転（回転）、スケーリング（尺度）、傾き（スキュー）
変換は他の要素のレイアウトには影響しません
（2）移行
ある状態から別の状態に遷移する方法を指定します
（3）アニメーション複合アニメーション
より複雑なスタイルの変更を実現できます
用法：キーフレームのパターンを定義し、アニメーションが素子に印加されます
6.ボックスモデル
外側から内側へ：マージン（マージン）、ボーダー（ボーダー）、パディング（マージン）、コンテンツ（コンテンツ）
7.フロートを取り除く
フローティングエレメントの親エレメントに高さを追加：エレメントがフローティングする場合、その親エレメントには高さが必要です。ボックスの高さはフロートするように閉じることができます。渡すことができ、親要素の高さを設定するために直接通じ、我々だけでなく、面倒な、高さを追加する可能性は低いと急速に変化するページに適応することはできませんすべての箱の実用化などの（親コンテナのコンテンツ気晴らしの高さによって、別のものをimg picture）、このメソッドは実際に使用されます。
clear：both; 最後の冗長要素を最後の子要素に追加し、それをclear：bothに設定すると、フロートをクリアできます。なお、ここでストレス要素が親要素の最後に追加されたブロックレベルの要素でなければならない、または親要素の高さを保持することができません。
疑似要素のクリアフロート：結合：疑似要素とhasLayoutの後 現在の主流のブラウザと完全に互換性があります
オーバーフローを使用：親要素に対して非表示にします。 このソリューションでは、親コンテナーがBFC（ブロックレベルのフォーマットコンテキスト）を形成でき、BFCに浮動小数点を含めることができます。これは通常、浮動親要素の高さの縮小の問題を解決するために使用されます。
brタグfloats ：brタグには、clearという1つの属性があります。この属性は、フロートをクリアし、brタグで属性をクリアに設定し、値allを割り当てることができる武器です。フロートをクリアできます。
8. CSSセレクター
1.タグセレクターdiv h1 p
2. idセレクター#id
3.クラスセレクタ。
4.子セレクターul> li
5.子孫セレクターdiv p
6.ワイルドカードセレクタ*
7.属性セレクターdiv [高さ= 100px]
8.擬似クラスセレクターa：ホバー（リンク、訪問済み、ホバー、アクティブ）
継承可能なスタイル：font-size、font-family、color
継承できないスタイル：ボーダー、パディング、マージン、高さ、幅
9.スタイルの優先順位
近くの優先選択：同じ重みの下で、最も近いスタイル定義が優先されます。
同じ重み：インラインスタイル（ラベル内）>埋め込みスタイルシート（現在のファイル）>外部スタイル（外部ファイル）
\ 1.によって宣言されたルール！重要が使用されます。
\ 2. HTML要素のスタイル属性に埋め込まれた宣言。
\ 3. IDセレクタールールが使用されます。
\ 4.クラスセレクター、属性セレクター、疑似要素、疑似クラスセレクターのルールが使用されます。
\ 5.要素セレクタールールが使用されます。
\ 6.ユニバーサルセレクターを1つだけ含むルール。
10. CSS3は疑似クラスを追加します
p ：最初のタイプは、その親要素に属する最初の要素を選択します
p：last-of-typeは、親要素に属する最後の要素を選択します
p：タイプのみ、親要素に属する要素のみを選択
p：only-childは、親要素に属する子要素のみを選択します
p：nth-child（2）は、親要素に属する2番目の子要素を選択します
：有効：無効フォームコントロールの無効状態。
：オンラジオボックスまたはチェックボックスがオンです。
11.再描画および再配置
再描画と再配置を減らす方法は次のとおりです。
・レイアウト情報が変更されたときにDOMをクエリしないでください。
・csstext、classNameを使用して、属性を一度に変更します
・フラグメントを使用
・アニメーションなど、何度も再配置された要素の場合。絶対配置を使用してドキュメントフローを離れ、他の要素に影響を与えないようにします
