再構築_html/css_WEB-ITnose にある不完全なチュートリアル コレクションの 1 つ

「この上なく深遠で微妙な法は、何億もの災難の中で遭遇しました。私は今それを見聞きし、支持しています。私は如来の真の意味を理解するつもりです。」 - 「オープニング バース」

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 はウィンドウ サイズに基づいて計算されます

rem 詳細説明
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」で確認でき、さまざまなブラウザー用のハックを作成するには、ブラウザーハックを使用できます