👍🏼 🐋 👉🏽 HTMLおよびCSSの側面 👩🏿‍🏫 👂🏾 🔞

この資料には、html開発者を知って覚えるのに役立つ側面が含まれています。質問のいくつかはIEに捧げられています-私自身はIE6のサポートを拒否しましたが、IE6の動作の特徴は不要ではないことを知っています。

1.ブラウザモード

標準：
標準モード-ドキュメントに存在するスタイルシートはCSS 2.1仕様に準拠しています（最新バージョン）

カスタムモード（下位互換性モード）：
互換モード-ブラウザーはCSSルールの一部を無視し、古いエンジンの動作をシミュレートします。

標準モードに近い：
ほぼ標準モード-Opera、Firefox、Safari。テーブルセル内の画像の場所が互換モードで表示されます。

2.セレクター、擬似クラス、擬似要素

1）セレクター：

タグセレクター-フォーマットルールが定義されているHTMLタグは、セレクターとして機能できます。
tagName { property1: value1; property2: value2; … }
タグ名-大文字と小文字は区別されません
クラスのセレクター-ドキュメント内のセレクターは任意の数にすることができます。
.className { … }
className-大文字と小文字を区別
IDセレクター-識別子は、要素の一意の名前を識別します。
#idName { … }
idName-大文字と小文字が区別されます
コンテキストセレクター-スペースで区切られたタグセレクター、クラスセレクター、IDセレクターなどで構成されます。
sel1 sel2 … { … }
隣接するセレクターは、コード内で互いに続く場合のドキュメントの要素です。 CSS構文では、値は+に続く要素のプロパティに適用されます
Lorem ipsum dolor <var>sit</var> amet.
b、var-隣接
sel1 + sel2 { … }
子セレクター-親要素内に直接配置されます。 CSS構文では、スタイル値は子にのみ適用されます。

 Lorem ipsum dolor sit amet  、consectetuer adipiscing
エリート、セッド・ディエム、ノミー・ニブ、オイスモス・ティンシダント、ラクリート、ドローレ・マグナ、アリグアム、エラト・ヴォルパット。 
emはpの子です
sel1 > sel2 { … }

sel1-親セレクター
sel2-子セレクター
属性セレクター：
[attribute] { … }
ユニバーサルセレクタ-ドキュメントのすべての要素のスタイルを定義します。
* { … }

2）擬似クラス：

sel：pClass {
...
}

•：link-未訪問のリンク（オプション）
•：訪問済み-訪問済みリンク
•：ホバー-リンクの上にホバー
•：アクティブ-リンクをクリックします
•：focus-要素（a、input、select、textarea）にフォーカスを与えます
•：first-child-セレクターの最初の子に適用されます
•：lang（lang）

3）擬似要素：

擬似要素を使用すると、要素ツリーで定義されていない要素のスタイルを設定したり、ドキュメントテキストのソースコードにないコンテンツを生成したりできます。

•：first-line-最初の行のスタイル
•：first-letter-最初のキャラクターのスタイル
•：{content：“ ...”の後; }-要素の後に割り当てられたコンテンツを挿入するために使用されます
•：{content：“ ...”の前; }-要素の前に割り当てられたコンテンツを挿入するために使用されます

3.カスケードと特異性

カスケードルールは、次の優先順位を決定します。
1）マークされたカスタムスタイル！重要
2）マークの付いた著者スタイル！重要なフラグ
3）著者のスタイル
4）カスタムスタイル
5）ブラウザのデフォルトスタイル

特異性：
計算では、各タイプのセレクターに数値が割り当てられます。特異性は、各セレクタの値を合計することで計算されます。計算は、無限に高いベースを持つシステムで行われます。

abcd

1）スタイルがインラインの場合、a = 1
2）bは、識別子セレクターの総数に等しい
3）cは、クラス、疑似クラス、および属性セレクターの総数に等しい
4）dは、型セレクターと擬似要素の数に等しい

4. hasLayout

hasLayoutは、要素をストリームに配置する方法、サイズ、位置、イベントへの反応、および他の要素への影響を決定するIEプロパティです。基本的に、Internet Explorerの要素は自分自身を整理する責任を負いません。タグは、ソースコードやドキュメントフローのように位置を持っている場合がありますが、そのコンテンツはレイアウトで最も近い祖先を整理します（通常）。このような要素は、祖先に依存して、サイズと測定単位を決定する際に難しい部分をすべて実行します。

デフォルトでhasLayoutを持つ要素：
•html、ボディ
•テーブル、tr、th、td
•img
•hr
•入力、ボタン、選択、テキストエリア、フィールドセット、凡例
•iframe、embed、object、アプレット
•マーキー
リストされたプロパティの次の値は、レイアウト要素（hasLayout = true）を提供します。
•位置：絶対
•float：左または右
•高さ、幅：自動以外の任意の値
•表示：インラインブロック
•ズーム：通常以外の値（無効なプロパティ）
•書き込みモード：tb-rl
•オーバーフロー、オーバーフローx、オーバーフローy：自動|スクロール|非表示（IE7のみ）
•位置：固定（IE7のみ）
•min-width、min-height：任意の値（IE7のみ）
•max-width、max-height：none以外の値（IE7のみ）

hasLayoutをスローするには、上記以外の値を指定する必要があります（例：width：autoまたはfloat：none）。
考えられる問題：
•フローティング要素は、hasLayoutを持つ要素によって自動的にクリアされます
•相対的に配置された要素はhasLayoutを受け取りません
•hasLayoutを持つ隣接要素の外側のマージンはマージされません
•hasLayoutのないブロックハイパーリンクのクリック領域は、テキスト領域に制限されています

5. IEのバグとその解決策

1）条件付きコメント：

<!--[if IE 6]>content for IE 6<![endif]-->
<!--[if gt IE 7]>content for greater than IE 7<![endif]-->
<!--[if gte IE 8]>content for greater or equal than IE 8<![endif]-->
<!--[if lt IE 6]>content for later than IE 6<![endif]-->
<!--[if lte IE 7]>content for later or equal than IE 7<![endif]-->

2）浮動要素の二重マージンのエラー：

問題：IE 6では、フローティング要素が二重マージンを作成します。
解決策：表示を追加：インライン。

3）以下を基準に配置されたコンテナ内の絶対配置：

問題：絶対に配置された要素は、相対的に配置されたコンテナ内にあります。その結果、親コンテナにはhasLayoutがなく、絶対位置に配置されたコンテナはビューポートに対して相対的に配置されます。
解決策：親コンテナーhasLayoutを設定します。例：高さ：1％。

4）絶対的/相対的な位置にある絶対位置のコンテナ：

問題：IEでは、相対的に配置されたコンテナ内に絶対配置されたコンテナは、zインデックスに従って整列されません。
解決策：Zインデックスを親に絶対/相対的に配置された要素に追加します。

HTMLおよびCSSの側面