「CSS をマスターする」読書メモ_html/css_WEB-ITnose

最近読んだ『Mastering CSS: Advanced Web Standard Solutions』の内容は初心者にとっても優れており、経験者でもリークをチェックして穴埋めするのに役立ちます。ブラウザの互換性と一般的なバグについては、この解決策を参照する価値があります。

セレクターのカスケードと特殊性

ルール間の競合を解決するために、CSS は カスケード を使用して各ルールに重要性を割り当てます。

1 でマークされたユーザー スタイル。 !重要
2、!重要 のマークが付いた作成者スタイル
3、作成者スタイル
4、ユーザー スタイル
5、ブラウザ/ユーザー エージェントによって適用されたスタイル

カスケード優先度は順番に低くなり、同じ優先度ルールを持つものは、後で定義されたルールが優先されます。ルールの特異性を計算するには、各セレクターに数値を割り当て、ルールの各セレクターの値を加算して、ルールの特異性を計算します。

セレクターの場合、その特異性は 4 つのコンポーネント レベル: a、b、c、d に分割されます

1。スタイルがインライン スタイルの場合、a=1

2 は ID セレクターの数です
3。 . c は、クラス、疑似クラス、および属性セレクターの数です
4. d は、タイプ/タグ セレクターおよび疑似要素セレクターの数です

ワイルドカードと継承された CSS プロパティは、特異性に影響しません。デモを見てください: セレクター ルールの最終色

h2 は、ルールの詳細度 (左から右へ、abcd の値) から分析します

10 に基づくセレクターの詳細度 #content div#main-content h20,2,0,2202#content #main-content>h20,2,0,1201 body #content div[id='main-content'] h20,1,1,3113#main-content div.news-story h20,1,1,2 112#main-content [class='news-story'] h20,1,1,1111div#main-content div.news-story h2.first-child 0,1,2,3123

上記の表からわかるように、最初のセレクターの特異性が最も高いため、h2 の色は最終的に灰色になります。

記事: CSS の仕様の仕組み

マージン オーバーレイ

ブロック要素の上部と下部のマージンが接すると、単一のマージンが形成されます。結合されたマージンの高さは、結合された 2 つのマージンの高さの大きい方と等しくなります。これをマージン コラプスと呼びます。

マージン折りたたみは 3 つの状況に基づいています:

1. 上下の隣接するブロック要素
マージンが設定されている場合、前のブロック要素が別のブロック要素の上に表示される場合、マージンの下とマージンの上はオーバーラップ:

Demo

2. 親要素と最初または最後の子要素 ​​
親ブロック要素と最初の子要素の間にボーダー、パディング、またはインライン コンテンツがない場合 スペースから分離します。マージンが設定されている場合、2 つのマージンの上部が重なり合います。または、親ブロック要素と最後の子要素の間に境界線、パディング、インライン コンテンツおよび高さの設定 (高さ/最小高さ/最大高さ) がありません。マージンが設定されている場合、2 つのマージンの下の部分が重なり合います。

デモ

親要素にボーダーを追加したり、パディングを設定したり、コンテンツを埋めたりすることで解決できます。また、overflow:hidden:

<div>    /**填充内容**/  <p>margin-top</p></div>div{    overflow:hidden;    //padding:10px;    //border:1px solid transparent;}

3 の空のブロック要素でも解決できます。 border, inner マージン、インラインコンテンツ、および高さ設定 (高さ/最小高さ) を持つ空のブロック要素の場合、マージンが設定されている場合、上下のマージンが重なり合います:

このマージンが別の空の要素に触れると、マージンも重なります重ね合わせて 1 つのマージンに統合します。ただし、

マージンコラプスは、フローティング要素と絶対配置要素では発生しません。

2 つの記事:

BFC と Margin Collapse についての深い理解

マージン折りたたみのマスター

位置決め

CSS での位置決めは主にposition 属性に関連します。 MDN での位置の構文は次のとおりです。

/* Keyword values */position: static;position: relative;position: absolute;position: fixed;position: sticky;/* Global values */position: inherit;position: initial;position: unset;

(1) static

静的配置、position のデフォルト値、各要素の位置は HTML 内の要素の位置によって決定されます(2)relative

相対的に配置された要素は要素ベースの相対的に静的になります上、左、下、右の値により、位置決め（通常の原稿流し）時の位置がオフセットされます。

相対的に配置された要素は依然として元のスペースを占有するため、要素のオフセットは他のボックスをカバーします。

(3) 絶対

絶対的に配置された要素はドキュメント フローから切り離され、それに最も近い配置された (非静的) 祖先要素に対して相対的に決定されます。配置された祖先要素がない場合は、相対的になります。最初の包含ブロックの位置に合わせます。

絶対的に配置された要素はマージンの崩壊を引き起こしません。
元の包含ブロックを基準としたオフセット

配置された祖先要素を基準に配置

絶対的に配置された要素はドキュメントフローとは何の関係もないため、ページの他の要素をカバーし、z を通じて制御できます-index 属性 重なり順で、値が大きいほど上位の要素となります。 z-index は、静的に配置されていない要素でのみ有効です。

また、絶対配置のインライン要素は表示形式が変更されて「ブロック要素」となり、幅や高さ、マージンや枠線などの属性を設定することができます。

span には「ブロック要素」があります

(4) 固定

固定配置は絶対配置の一種であり、変更された要素が常にビューポートになる点が異なります。ウィンドウ内の同じ場所に表示されます。

(5) Sticky これは、position:relative と Position:fixed の組み合わせのように動作します。ページがターゲット領域を超えてスクロールすると、position:fixed のように動作し、ターゲット位置に固定されます。互換性は次のとおりです。

Firefox または Safari でスティッキー デモを表示します
記事: CSS の位​​置

Float

float に関連するプロパティは float です。絶対配置要素と同様に、フローティング要素もドキュメント フローから分離され、スペースを占有しません。

<div class='news'>  <img  src='http://ww3.sinaimg.cn/bmiddle/8d522661gw1ey1rotf8t6j205k03hjr9.jpg' / alt="「CSS をマスターする」読書メモ_html/css_WEB-ITnose" >  <p>some text</p><div>//css.news{  border:1px solid red;}img{  float: left;}p{  float: right;}

Demo

画像もテキストもスペースを占有しないため、次のように div は引き伸ばされません。図の効果。では、周囲の要素が浮動要素を視覚的に囲むようにするにはどうすればよいでしょうか?

1. 空の行を追加してフロートをクリアします

<p>some text</p><br class='clear' />//css.clear{    clear: both;}

Demo1

このメソッドは子要素のサイズによって制限されませんが、追加のタグとコードを追加します。

2. 疑似要素を使用する

.news:after{ display: block; height: 125px; content: '';}

Demo2

この方法では追加のタグやコードを追加する必要はありませんが、子要素のサイズによって制限されます。

3. 含まれる要素に float を追加します

.news{ float: left;}

Demo3

このメソッドは追加のタグやコードを追加しません。また、サブ要素のサイズによって制限されませんが、次の要素は float の影響を受けます。この要素の

4. オーバーフローを使用する

.news{ border:1px solid red; overflow: hidden;}

Demo4

このメソッドは、含まれる浮動要素を自動的にクリーンアップしますが、場合によっては、ボックスの表示に影響を与え、スクロール バーやステージ コンテンツが生成されることがあります。

記事: CSS float プロパティの詳しい説明

背景画像の配置

スプライト (CSS Sprite) はウェブサイトを最適化する方法の 1 つで、複数の背景画像を 1 つの大きな画像に結合し、それによって HTTP リクエストの数を減らします。スプライト画像の配置に関連するプロパティは、background-position です。

背景画像は要素の背景配置領域に配置されます。配置領域は背景画像が配置される領域を指定し、位置を制御するために一連の座標系が使用されます。デフォルトの配置領域は塗りつぶされたボックス内にあるため、デフォルトでは、配置領域の座標原点は塗りつぶされたボックスの左上隅にあります。これは、要素に背景画像を適用すると、ブラウザによって最初と後続の画像がパディング ボックスの左上隅から配置されることを意味します。

background-position には 2 つの値があります。最初の値は水平位置を表し、2 番目の値は垂直位置を表します。位置の値は、キーワード (上/左/右/下/中央)、パーセンテージ、ピクセル、または混合で表すことができますが、これは仕様では推奨されていません。

キーワードを使用する場合、値を 1 つだけ指定すると、他の値はデフォルトで中央に配置されます。
ピクセルを使用して背景の位置を設定する場合、それは画像の左上隅から背景配置領域の左上隅までの距離です。
パーセンテージを使用して背景の位置を設定する場合は、相対的に配置されます。画像上の固定点。

ピクセルを使用すると、画像は配置領域の左上隅から 20 ピクセル下と 20 ピクセル左に表示されます。パーセンテージを使用すると、画像上の固定点は画像の左上隅の 20% を基準にして配置されます。配置領域の左上隅の 20% まで。

2 つの記事:
CSS のパーセンテージ
CSS の背景の位置

一般的なバグの処理

主に IE6 および IE7 との互換性を維持したい場合は、やめたほうがよいでしょう。辞めたくない場合は、この記事を読んでください: http://www.dengzhr.com/frontend/css/296