cssのスタイルが多く、異なる効果の表示の下で、異なるブラウザで多くの属性があり、連続的な要約の操作で実際にする必要があり、より多くの注意事項。良いCSSでより多くの想像力を使用する必要があり、合理的な思考を使用しないでください。
cssとは？
cssとはスタイル・カスケード・シートのことで、カスケードとはスタイル、セレクタ、ファイル・カスケードのことです。cssのバージョンは2.1が最も広く使われているもので、css3が最新のものです。
ブラウザ互換機能
実際の開発では、Webページを表示するために多くのブラウザで行われ、CSSは、いくつかのブラウザで多くの機能が間違った方法で表示されますので、ブラウザの互換性をデバッグする必要があり、caniuse.comのウェブサイトへの迅速かつ簡単な方法があり、スタイルを入力すると、状況をサポートするためにブラウザのほとんどを見ることができます。
自分のコードをデバッグするには？
全能のボーダー・デバッグ・メソッドを使って、ボーダーを追加し、要素に問題があると思われるときに、境界線が期待通りであるかどうかを確認します。
css
- ドキュメントフローの英語名は「Normal Flow」；
- 文書フローでは、インライン要素は左から右へ揃えられ、改行は行末で行われます；
- 文書フローでは、ブロック-レベル要素は上から下へ並べられ、1行に1つのブロック-レベル要素しかありません。
HTML 5 インライン要素 "の概念は廃止され、すべての要素はCSSを通してインラインにすることができる。
インライン要素は幅と高さの設定を受け付けない。
インライン要素の幅は、その中の要素の幅の合計で決まる。
インライン要素は一般的にブロックレベル要素を含むことができない。
インライン要素の高さは line-height 間接的な決定
レイアウトは？
レイアウトとは、ページを塊に分割し、左、中央、右、上、下などに配置する作業のことです。
レイアウトの分類：固定幅、可変幅、レスポンシブ
レイアウトに関する2つの考え方：大きなものから小さなものへ、小さなものから大きなものへ
float アプリケーション：低バージョンのIEに対応できる； キーポイント：子要素プラスfloat:leftと幅は、親要素を追加する必要がある.clearfix; flex アプリケーション：すべてのニーズを満たすために、最新のブラウザと互換性がある。 ポイント：主なポイントコンテナとアイテム、一般的に次のスタイルで使用される： 1. display:flex; 2. flex-direction:row/column; 3. flex-wrap:wrap; 4. justify-content:center/space-between; 5. align-items:center; grid 応用：二次元レイアウト、特に不規則なレイアウトに適しており、非常に強力だが、現在は普及していない； ポイント：また、コンテナとアイテムに分かれて、多くのスタイルは、CSSのトリックでアクセスすることができる；
ブラウザレンダリングの原則
ブラウザのレンダリングプロセスは、主に以下の6つの部分で構成されています：
- HTMLからHTMLツリーを構築
- cssからcssツリーを構築
- 2つのツリーを1つのレンダリングツリーに結合
- layout
- paint
- composite
CSSアニメーションへの2つのアプローチ
- transform
- 4つの共通機能
1. 変位トランスレート絶対位置決めは、中央で行うことができる
2. ズームスケールを簡単にぼかす
3. rotate回転は、一般的に作成するために使用されるloading
4. チルトスキューはあまり使わない
一般的には、トランジション・オーバーアニメーションと組み合わせて使用します。
- transition
- これは中間フレームを補完する役割を果たします。
- 例えば、display:none;からblockは遷移できず、visibility:hidden;=>visible;に変更されます。
- トランジションには開始点が必要で、中間点がある場合は、トランスフォームまたはアニメーションを2回使用します。
3. アニメーション
- 完全な@keyframes構文を使用し、1つの書き方はfrom toで、もう1つの書き方はパーセンテージです：
- 属性値 animation:duration|トランジションモード|delay|times|direction|fill mode|pauseの有無|アニメーション名; 具体的な値と検索キーワード例＋MDN
結論：CSSは非常に強力で複雑であり、実践し、常に経験し、常に総括する必要があります。
