「この上なく深遠で微妙な法は、何億もの災難の中で遭遇しました。私は今それを見聞きし、支持しています。私は如来の真の意味を理解するつもりです。」 - 「オープニング バース」
HTML タグ
- HTML5 タグ リスト
- すべての HTML5 タグ
ie8- 新しいタグはサポートされませんhtml5 では、これは js を導入することで実現できます: html5shiv
<!--[if lt IE 9]> <script src="http://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script><![endif]-->
ログイン後にコピー
または、実際の手書きの js と互換性のある document.createElement
<!--[if lt IE 9]><script type="text/javascript"> document.createElement('header'); ...</script><![endif]-->
ログイン後にコピー
最後に、html5 タグの CSS デフォルト スタイルをリセットします。 :
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block;}
ログイン後にコピー
ボックスモデル
ボックスサイジングの詳細説明
ボックスモデルは、box-sizing: border-box で設定できます。 | content-box デフォルト値は content-box であり、ie8+ でサポートされています。
- border-box は、設定された幅/高さにパディングとボーダーが含まれることを示します
- content-box は、パディングとボーダーが含まれないことを示します
- ボーダーかどうか-box または content-box には上記の図に対応する margin
は含まれません。デフォルトの場合、幅は 605px です。border-box の場合は、605+2 4+ になります。 10 3+30=673ピクセル。
特にモバイル デバイスでパーセント単位とともに使用されることがよくあります。たとえば、width:100%;padding:10px; の場合、border-box に設定されていない場合、実際の幅は 100%+40px となり、予想される要件を満たしません。
Selector
CSS セレクターは後ろから前にクエリされるため、レベルが深くなるほど効率が低下します。一般に、最大 4 レベルを超えないようにすることをお勧めします。
CSS セレクターには、ワイルドカード * セレクター、クラス セレクター、ID セレクター、要素セレクター、属性セレクター、疑似クラス セレクター、疑似要素セレクターが含まれ、最後に
css セレクターの重みの原則: !重要 > インライン スタイル > クラス/属性/疑似クラス > 重みはスタイル シートに表示される順序で同じです
CSS スタイルのカスケード ウェイト値の詳細な分析 -
CSS セレクター -
リセット
CSS リセットはゼロ リセットと修正に分割されますリセット
ゼロ リセットは次のように表されます: Eric Meyer の「Reset CSS」 2.0 -
正しいリセットは次のように表されます:normalize.css -
手間を省きたい場合は、normalize.css を直接導入して、部分的なゼロ リセットを実行します。詳しく調べる場合は、2 つを組み合わせることができます。サンダル リセットを参照してください
属性の詳細な説明
属性は大きく分けて以下のとおりです。
表示: 表示、可視性、オーバーフローなど -
位置: 位置、浮動小数点、クリア、z -インデックス、変換など。 -
サイズ: 幅、高さ、マージン、パディング、ボーダー、アウトライン、ボックス サイズなど。 -
テキスト: フォント シリーズ、色、テキスト シリーズなど。 -
背景: 背景シリーズ、グラデーション シリーズなど -
変更: ボーダー半径、ボックスシャドウ、不透明度、外観、フィルター、クリップなど -
レイアウト: フレックス、グリッドなど -
アニメーション: トランジション、アニメーションなど -
使い方としては大きく 2 つのカテゴリに分けられ、1 つはリジッド (例: 、色を使用してテキストの色を設定することのみが可能です)、もう 1 つは柔軟です(たとえば、左列の固定レイアウトを実装するには、使用できるテクノロジーが多数あります)。比較的柔軟に使用できるものは、さまざまな実装ソリューションの長所と短所を理解する必要があります
MDN CSS リファレンス -
codrops CSS リファレンス -
css 101 -
Units
css3 に rem 単位と vw シリーズ単位が追加されました。 rem 単位は html のフォント サイズを基準に計算され、vw はウィンドウ サイズに基づいて計算されます
center
従来の水平方向のセンタリング text-algin:center, margin-left:auto;margin-right:auto と垂直方向のセンタリングvertical-align:middle, line-height: に加えて、水平方向と垂直方向のセンタリングが含まれます。高さ (単一行のテキストの垂直方向の行の高さは高さに等しい)、最初に top:50%;left:50% を設定し、次に margin-left:-width/2;margin-top を渡すという配置方法もあります。 :-height/2、またはcss3のtransform:translate(-50%, -50%)でセンタリングを調整し、最後にレイアウト用のflexメソッドがあります。また: img または video の場合、調整する最新の object-position があります
CSS での中央揃え: 完全ガイド -
object-fit -
レイアウト
フレックスが登場する前は、レイアウトはフロート、位置、および少量のインラインブロックとテーブルにすぎませんでしたが、フレックスとグリッドにより、さらに強力になりました。
- CSS レイアウトを学習します。中国語版は CSS レイアウトを学習します。入門に適したレイアウトをステップバイステップで学習します
- flex についてさらに詳しく
- flex の完全ガイド: 3 つの主要バージョンの比較
- 960 グリッド レイアウト: グリッドのパイオニアレイアウト、原理を理解している 残りのさまざまなグリッド レイアウトは問題ありません
- レイアウト ガラ: 強くお勧めします、フロート レイアウトの本質
z-index
- スタッキング コンテキスト、Z インデックスに影響を与える要素
- CSS におけるスタッキング コンテキストとスタッキング順序についての深い理解
- Z-Index CSS プロパティ: 包括的な外観、この記事は比較的古く、ie7 に関するものです - z-index のいくつかのバグ
line-height
- CSS の行の高さの詳細な理解 - 短縮版
- CSS の行の高さの詳細な理解 - ppt 詳細バージョン
- CSS の行の高さの詳細な理解と応用
BFC
- MDN BFC、新しい BFC を作成するための条件
- CSS でのブロック フォーマット コンテキストの理解、中国語版 CSS でのブロック レベルのフォーマット コンテキストの理解
- ブロック フォーマット コンテキストについて - BFC と IE の hasLayout
- css 101: BFC
- CSS でのマージン折りたたみの問題を再検討する
互換性
ブラウザの互換性は 2 つの部分に分かれています。ブラウザがそれをサポートしていることと、ブラウザ用のハックを作成する方法。サポート状況は「can i use」で確認でき、さまざまなブラウザー用のハックを作成するには、ブラウザーハックを使用できます