一般的な知識とツールのウェブサイト

cssカスケーディングスタイルシート：

• 同じセレクタに対して複数のスタイル宣言を行うことができます。
• 同じ要素に対して異なるセレクタでスタイルを宣言することができます。
• 複数のファイルを重ねることが可能

• css2.1は世界で最も広く使われているバージョンです。
• caiuse.comは、ブラウザがサポートしている機能を確認できます。
• css spec css最も権威のあるドキュメント
• cssをmdnで検索, cssのトリック, Xinxu Zhangのブログ
• psdデザインドキュメントやデザイン画は、Freepickや365psd、dribbble.comのトップデザイナーコミュニティにあります！
• よく使われるスケッチツールは、balsamiq、figma、inkblade、adobe xdです。
• http//csstriggers.com// 、各属性のレンダリングプロセスを確認するために使用することができ、ページ上の最適化を行いたい場合に使用することができ、ブラウザの最適化もdevelopers.google.comを参照することができます。

ボックスモデル

標準的なボックス・モデルのコンテンツ・ボックスでは、幅と高さはコンテンツ領域の幅と高さを指します。内側の余白、境界線、外側の余白を追加しても、内容領域の大きさには影響しませんが、要素ボックスの合計サイズは大きくなります。

単位と色

単位: px, em, パーセント, 整数, rem, vw, vh 色: #000000 16進数, 透明度を設定する最後の2ビットをサポート; rgb(x,x,x); rgba(x,x,x,x) 0~1の透明度を設定する最後のビット; hsl(x,x,x)パラメーターはそれぞれ色相、彩度、明度

css

分類：

• 固定幅レイアウト、通常は960/1000/1024px
• 固定幅のレイアウトはなく、主にドキュメントフローレイアウトの原則に依存しています。
• レスポンシブレイアウト、PCでは固定幅、モバイルでは固定幅ではなく、ほとんどがミックスレイアウト
• レイアウトは現在、float、grid、flex の 3 つの方法で一般的に使用されています。

float

レイアウト

• 子要素にフロートを追加します。:leftと幅
• 親要素プラス.clearfix

.clearfix:after{
content:'';
display:block;
clear:both;
}

• 最後の要素のためにスペースを確保
• vertical-align-top は余分な背景色を取り除きます。
• border代わりにアウトラインを使用することができます。
• 水平方向のセンタリング：

margin-left:auto;
margin-right:auto;

flex

display:flex または inline-flex で要素をフレックスコンテナにします。

flex-direction:column|row|column-reverse|row-reverse;
flex-wrap:wrap|nowrap; //改行するかどうか
justify-content:flex-start|flex-end|center|space-between
align-items:center|flex-end|flex-start|stretch

また、orderを使用して要素に順序を追加することで、要素の順序を変更することもできます。

grid

二次元レイアウトに適し、display:grid|inline-grid親要素がグリッドコンテナになるように、ドキュメントの特定の使用は、現在使用されていません。

css

• 平面に垂直に配置されたレイアウト
• border-box内の背景の範囲は、borderの外縁で囲まれた領域です。

position:static|relative|absolute|fixed|sticky

デフォルトのコンテキストはhtmlですが、z-indexがautoでなく、z-indexが数値である限り、カスケードコンテキストが作成されます。 詳細はmdnのカスケードコンテキストを参照してください。

css

レンダリングの原則：

1. htmlからhtmlツリーを構築
2. htmlに従ってhtmlのツリーを構築
3. CSSに従ってCSSツリーを構築
4. レイアウト
5. layout
6. paint

• setTimeoutまたはsetIntervalの代わりにrequestAnimationFrameを使用したjsの最適化
• will change または translate を使った css の最適化

transform

変位トランスレート、ズームスケール、回転、傾きスキューは、遷移の遷移と組み合わせて使用することができ、自動的にフレームを補完します、インライン要素が変換をサポートしていないことに注意してください、あなたが最初にブロックする必要があります！

animation

animation: |トランジション| | |方向|塗りつぶしモード|一時停止するかどうか| 
animation:xxx 1.5s;
@keyframes xxx{
 0%{
 xxx
 }
 100%{
 xxx
 }
}