【関連記事] CSSの簡易版
（1）CSSボックスモデル
CSSボックスモデル
トピック：CSSボックスモデルのご理解についての講演
1）基本概念：標準モデルモデル+ IE
そして、標準モデル2モデルIEとの違い）
異なる幅と高さを計算します
3）二つのモデルCSSを設定する方法
4）幅と高さに対応するセットボックスモデルを取得する方法JS？
幅と高さに対応するボックスモデル、それを得るために書くためにどのようにJS？
5）質問の例（オーバーラップマージンモデルインタプリタカートリッジ）
6）BFC（重ね代溶液）またはIFC
詳細な解釈：
1）基本概念：標準モデルモデル+ IE
そして、標準モデル2モデルIEとの違い）
コンテンツの標準モデルの幅が幅を意味し、パディングボーダーが含まれていません。
IEは、パディングとボーダーのアスペクトモデル計算です。200pxの幅場合、IEモデルのために、その200pxのは、パディングとボーダーを備えます。
3）どのようにCSSにこれらの二つのモデルを設定するには？
ボックスのサイズ変更：コンテンツボックス。
4）幅と高さに対応するセットボックスモデルを取得する方法JS？
dom.style.width /高さ
dom.currentStyle.width /身長（このプロパティはIEのみサポートされています）
window.getComputedStyleが（DOM）.width /身長（この属性は、すべてのブラウザがサポート）
dom.getBoundingClientRect（）。幅/高さ（計算された絶対位置）
5）質問の例（オーバーラップマージンモデルインタプリタカートリッジ）
6）BFC（重ね代溶液）またはIFC
6-1）BFCの基本的な考え方
ブロックレベルのフォーマットコンテキスト
6-2）BFC原則
オーバーラップの垂直方向のマージンはBFCを発生します
BFC領域がクリアフローティング領域と重なりません
BFCの高さを計算する場合、フロートは計算に関与することになります。
BFCは、フロートと重なりません
BFCのサブ要素であってもフロートもの高さの計算に参加します
6-3）BFCを作成する方法
オーバーフロー：隠されました;
フロートの値はどれもないではありません
位置の値は静的ではありません
テーブルを表示
6-4）BFCの使用シナリオ
* BFCは何ですか
BFC（ブロックフォーマットコンテキスト）形式のコンテキストは、WebページのCSSボックスモデルのレンダリングモードでは、レイアウトは、別個の描画領域を意味し、または単離された別個の容器です。
BFCを形成するための条件*
*フロートのnone以外のfloat値
*位置のエレメント、位置（絶対、固定）
インラインブロック*それらのいずれかの値を表示し、テーブルのセル、テーブルのキャプション
可視*オーバーフロー値（隠された、自動車、スクロール）に加え
* BFCの機能
後に垂直方向に配置された*インサイドボックス1。
*垂直方向の距離はマージンによって決定されます
* BFC領域は、フロート要素の領域と重なりません。
* BFCフローティング要素の高さを計算するときにも、計算に関与しています
コンテナは要素の外側の子要素には影響を与えないの内側* BFCは、ページ上の別の容器です。
（2）面接要約記事] [CSS - CSSセレクタ、および優先順位
優先順位（優先順位）:!重要>インラインスタイル> #ID>の.class>タグ> *>継承>デフォルト。
ときセレクタながら、重い相の重量は、それは近接の原理を適用します。
重量計算：
-------------------------------------------------- ---
出典：MDNのウェブドキュメント
CSSセレクタの種類：
セレクタは、次のカテゴリに分けることができます。
- 単純セレクタ（単純セレクタ）：要素のタイプ、クラス、またはIDによっては、一つ以上の要素に一致します。
- 属性セレクタ（セレクタ属性）：属性/属性値によって一つ以上の要素に一致します。
- 擬似クラス（擬似クラス）：整合状態の1つ以上の要素は、例えば、マウスポインタ要素をホバリング、または現在選択されているかどうかチェックボックスを選択したことなどによって、決定されます
または要素は、DOMツリーの親ノードの最初の子ノードです。
- 擬似要素（擬似要素）：マッチは、例えば、決定された位置、各セグメント、またはコンテンツの前に生成された要素の最初のワードに関連する1つの以上の元素です。
- コンバイナ（コンビネータ）だけでなく、選択自体、ならびにための2つの以上の選択肢の組み合わせを選択する効率的な方法が非常に具体的な方法です。
たとえば、あなたが唯一のdivを選択するか、または直接の段落の見出しの後ろにできる直接の子ノードをパラグラフ。
- マルチセレクター（複数のセレクタ）：これらは別々の選択ではない。このアイデアは、以下CSSルールでカンマ区切りの複数のセレクタであり、
これは、これらすべての要素のセレクタにより選択されたステートメントのセットに適用されます。
-------------------------------------------------- ---
セレクター属性：
（1）存在と値（存在と値）属性セレクタ
選択した属性値の正確な性質に合わせて、これらの試み：
- [ATTR]：このセレクタは、属性に関係なく、すべての要素を含むATTR選択何ATTRの値。
- [ATTR =ヴァル]：セレクタは、すべての要素がヴァルATTR属性が割り当てられている選択します。
- [ATTR〜=ヴァル]：セレクタは、属性ATTRを有する要素のみを選択ヴァル値およびattRいずれかの値に含まれる値のスペースで区切られたリストを必要とします。
具体的な例を見てみましょう、次はそのHTMLコードです：
私のレシピの成分：<I LANG = "FR-FR">プーレのbasquaise </ I>
<UL>
<LIのデータ量=「1キロ」データ・野菜>トマト</ LI>
<LIのデータ量= "3" データ・野菜>タマネギ</ LI>
<LIのデータ量= "3" データ・野菜>ニンニク</ LI>
<LIデータ量=「700グラム」データ・野菜=「唐辛子などのスパイシーではない」>赤唐辛子ます。</ li>
<LIのデータ量=「2キロ」データ肉>ニワトリ</ LI>
<LIのデータ量=「オプション150グラム」データ肉>ベーコンビット</ LI>
<LIのデータ量=「オプション10ミリリットル」データ野菜=「液体」>オリーブオイル</ LI>
<LIデータ量= "25cl" データ野菜= "液体">白ワイン</ LI>
</ UL>
そして、シンプルなスタイルシート：
/ *「データ・野菜」を有するすべての要素は、テキストの緑の色に適用される属性* /
[データ野菜] {
色：緑;
}
/ *すべて*「液体」の要素が黄金背景色を適用されるとおりに、「データ・野菜」属性と属性値を持っています/
[データ野菜=「液体」] {
背景色：チソウ。
}
/ *すべての「データ・野菜」属性と属性値が「スパイシー」の要素が含まれてい、
偶数要素のさらなる属性は、他の属性値を含む、テキストの色が赤になります* /
[データ・野菜〜= "スパイシー"] {
赤色;
}
結果は以下の通りであります：
（2）サブ文字列値（サブストリング値）属性セレクタ
この状況は、彼らが正規表現と同様の方法と一致する（しかし、これらのセレクタが本当に正規表現ではないことに注意してください）するための柔軟性を提供するため、また、「擬似定期セレクタ」と呼ばれる属性セレクタ：
- [ATTR | =ヴァル]：attrの選択値や属性値は最初Val-でvalの要素（「 - 」言語コードを処理するために使用されるエラー、ありませんが、ここであることに注意してください）です。
- [ATTR ^ =ヴァル]：Valに開始するATTR属性選択値（valは含む）の要素。
- [ATTR $ =ヴァル]：属性の選択値は、ATTR（valを含む）のValの要素で終わります。
- [ATTR * =ヴァル]：ヴァルの属性ATTRサブストリングに含まれる要素値を選択（文字列の部分文字列を、それの一部である、例えば、「猫」は、文字列「キャタピラ」サブストリングです） 。
私たちの前の例を続けると、次のCSSルールを追加してみましょう：
古典の/ * *使用言語の選択/
[ラング| = "FR"] {
フォント重量：太字;
}
/ *「は、データ・野菜」属性は「スパイシーではない」値が含まれているが、持つすべての要素が緑に戻って変更されました* /
[データ野菜* =「スパイシーではありません」] {
色：緑;
}
/ * * /の「キログラム」で終わるすべての要素の「データ量」の属性値を持ちます
[データ量$ = "キログラム"] {
フォント重量：太字;
}
/ * *に「オプション」で始まるすべての要素の属性「データ量」を有します/
[データ量^ = "オプション"] {
不透明度：0.5;
}
-------------------------------------------------- ---
擬似クラス（擬似クラス）
CSSの擬似クラス（擬似クラス）はコロンです（:)接頭語がキーワードの最後に追加されるような選択だ、あなたが指定した要素にスタイルは、特定の状態で提示されたたいとき、
あなたは、対応する擬似クラス（擬似クラス）と結合されたセレクタ要素の後ろに行くことができます。あなたは、このようなマウスが要素の上に置いたときのように、特定の状態で別のスタイルの要素をレンダリングする場合があり、
チェックボックスをチェックまたは無効、あるいは場合や要素が時にDOMツリー内の親要素の最初の子であるとき。
：アクティブ：不定：のみ-の型
：任意：イン範囲：任意
：確認：無効：範囲外の
：デフォルト：LANG（）：読み取り専用
：DIR（）：最後の子：読み書き
：無効：最後の型：必要
：空：左：右を
：有効：リンク：ルート
：最初：いない（）：スコープ
：第一子：n番目の子（）：ターゲット
：第一の型：n番目の-最後の子（）：有効
：フルスクリーン：n番目の-最後の型（）：訪問
：フォーカス：n番目の型（）
：ホバー：のみ、子
擬似クラス（擬似クラス）例：
<a href="#"ののtarget="_blank">百度一下する</a>
いくつかのスタイル：
/ *これらのスタイルは、どのような状況下、当社のリンクに適用されます* /
{
青色;
フォント重量：太字;
}
/ * * /私たちは、訪問することにしたいと未訪問リンクのリンクは同じように見えます
A：{訪問
青色;
}
カーソルがリンクの上に置く、またはリンクをアクティブにするために、キーボードをロックすると/ *、我々は* /リンクが強調表示させます
A：ホバー、アクティブ、：フォーカス{
色：darkred。
テキスト装飾：なし;
}
-------------------------------------------------- ---
コンバイナとセレクタ群
セレクタの最初の使用が有用であることができるが、しかしある場合には非効率的であってもよいです。CSSセレクタは、あなたが選択する際にきめ細かなそれらの組み合わせを使用して開始し、より多くの価値になります。ベース要素間の相互関係は、CSSは、要素を選択するには、いくつかの方法が用意されています。これらの関係を次の表は、（任意に選択され、Bは、前述正面を表す）を使用してコネクタを示しています。