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

WBOY
リリース: 2016-06-21 08:55:45
オリジナル
1036 人が閲覧しました

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

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

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート