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

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

WBOY

リリース： 2016-06-21 08:55:45

オリジナル

1025 人が閲覧しました

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

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 リセットはゼロリセットと修正に分割されますリセット

手間を省きたい場合は、normalize.css を直接導入して、部分的なゼロリセットを実行します。詳しく調べる場合は、2 つを組み合わせることができます。サンダルリセットを参照してください

属性の詳細な説明

属性は大きく分けて以下のとおりです。

使い方としては大きく 2 つのカテゴリに分けられ、1 つはリジッド (例: 、色を使用してテキストの色を設定することのみが可能です）、もう 1 つは柔軟です（たとえば、左列の固定レイアウトを実装するには、使用できるテクノロジーが多数あります）。比較的柔軟に使用できるものは、さまざまな実装ソリューションの長所と短所を理解する必要があります

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 があります

レイアウト

フレックスが登場する前は、レイアウトはフロート、位置、および少量のインラインブロックとテーブルにすぎませんでしたが、フレックスとグリッドにより、さらに強力になりました。