CSS+DIV の概念と詳細 (コピー)_html/css_WEB-ITnose

http://www.cnblogs.com/xiaofu/articles/1614386.html

1. ボックスモデル

1.ボックスの内部構造

(1) ボックスの実際の幅は、「コンテンツ + 内側の余白 + 枠線 + 外側の余白」で構成されます。 CSS では、ボックスのサイズは幅と高さを設定することで制御されます。

2．境界線

） (1) 境界線に作用するルールが複数ある場合、競合が発生し、後ろの設定が前面の設定を覆い隠すのはどの属性でも同様です。

3.パディング

(1) ボックスに背景画像を設定した場合、デフォルトでは背景でカバーされる範囲は「パディング+コンテンツ」で構成される範囲となり、パディングの左上隅を基準点として画像が並べられます。

4.マージン

(1) ボディは特別なポイントであり、その背景色はマージン部分まで拡張されますが、他のボックスの背景色は「パディング + コンテンツ」 (IE ブラウザ) または「パディング + コンテンツ + 境界線」のみをカバーします ( FF ブラウザ) デバイス)。

2. ボックスのフローティングと配置

1. ボックス間の関係

(1) 標準的な流れ

その他の配置や配置に関する特殊な CSS ルールを使用しない場合の、各種要素のルールです。

。

（3）インライン要素

独立した領域を占有するのではなく、他の要素に基づいて特定の範囲を指摘するだけです。

2. 標準フローにおけるボックスの配置

(1) インライン要素間の距離: 最初の要素の右マージンと 2 番目の要素のマージン左の合計。

(2) ブロックレベル要素間の距離: margin-top または margin-bottom の最大値です。

3. フローティングと配置

(1) ブロックレベル要素のスコープは、その内部の標準ストリーム コンテンツによって決定され、サブ要素をフローティングした後は、内部のフローティング コンテンツとは何の関係もありません。これは親ブロックに属さず、標準ストリームにも属さなくなります。注: 2 つのブロックレベル要素のうち、最初のブロックレベル要素がフローティングされている場合、後続のブロックレベル要素のコンテンツがそれを囲みますが、2 番目のブロックレベル要素がフローティングされている場合、最初の要素は変更されません。つまり、2 番目のフローティング ブロック レベル要素は囲まれません。 ！状況は複数のブロックでも同様です。

（2）相対的なポジショニングの結論

& & Lt;!-[if supportfields]-& gt; 相対位置決めボックスの使用はまだ標準ストリームにあり、親ブロックと兄弟ボックスには影響せず、その元の位置は他のブロックによって補完されません。ブロック。

(3) 絶対位置決めの結論

オフセット。配置されている祖先要素がない場合、位置はブラウザ ウィンドウに基づいて決定されます。

以降の兄弟の位置付けには影響しません。ただし、その兄弟ボックスは、存在しないかのように元の場所を埋めます。

4. ブロックの高さの値がサブブロックの高さにマージンの値を加えた値より小さい場合、IE は子要素のマージン-ボトムのスペースと親要素のパディング-ボトムのスペースを維持するために自動的に拡張します。自体。 FF はそうではなく、親要素の高さが完全に一貫していることが保証され、この時点で子要素は親要素の範囲を超えます。

5. z-index 属性は、位置決め中に重なり合うブロックの上下の位置を調整するために使用されます。z-index が大きいページは、小さいものよりも上に配置されます。デフォルト値は 0 です。 2 つのブロックの Z インデックス値が同じである場合、元の高カバレッジと低カバレッジの関係は維持されます。

6. 要素がブロック要素であるかインライン要素であるか、または要素を表示しない (なし) かどうかで表示属性が変わります

3. テキストと画像

1.文字サイズ(font-size)

(1) 長さの単位

1emは親要素の文字mの標準幅の長さを表し、1exは親要素の文字xの標準の高さを表します。親要素が変更されると、これら 2 つの単位を使用する子要素のサイズも比例して変更されます。

2. Line-Height

(1) は、テキストの 2 行間のベースライン間の距離、つまりテキストの各行の高さを示します。

(2) 行の高さの値は、行の高さの単位としてピクセルを使用することも、単位を追加せずに数値のみを記述することもできます。この場合、行の高さはフォントに対する行の高さの比率を表します。サイズ。たとえば、フォント サイズは 12px、

Line-height: 1.5 です。

- ’の実際のサイズはライン高さです：1.5*12px = 18px。

5. テキストの配置と最初の段落のインデント

(1) 段落の水平方向の配置: text-align

(2) 最初の段落のインデント text-indent: 中国語の Web ページの場合は、「2em」に設定します。

6. 段落の垂直方向の配置:vertical-align

(1) 現在のブラウザでは、表のセル内のオブジェクトの垂直方向の配置設定のみを使用できますが、div などの一般的なブロックレベルの要素では使用できません。仕事。

7. 画像のスタイル。

(1)background-position: 属性は背景画像の位置を決定します。2 つの値が設定されている場合、それらはそれぞれ水平位置と垂直位置を決定するために使用されます。値が 1 つだけ設定されている場合、デフォルト値は center.

であり、これはタンクに関連しており、実際にフラット ショップの開始点を指定します。その属性値としては、上、左、下、右、中央のほか、5%、18pxなどの相対値や絶対値も使用されます。

数値は左端からの距離と上端からの距離を表します。

(2) 背景添付: スクロールバーを引くと背景画像を固定できますが、画像は移動しません。

(3) 画像の水平方向の配置 (水平方向の配置): 画像の text-align 属性は直接設定できず、その親ピクセルの属性によって実装されますが、垂直方向の配置は垂直方向の配置によって設定できます。画像のalign属性。これはテキストの配置とはまったく逆です。

4. リンクとナビゲーション

1. 疑似クラス

(1) 疑似クラスの宣言順序

a:hover{text-decoration:underline;}

上記の宣言の順序は変更できません。変更しても効果はありません。

(2) a:link と a は同じに設定されており、通常は両者に違いはありませんが、実際の作業では a, a:visited｛｝; 2. ボタンのハイパーリンク

(1) 設定通常のハイパーリンクとクリックされたリンクの場合は同じであり、境界線のスタイルはボタンの効果をシミュレートするために使用され、マウス ポインターがハイパーリンク上を通過すると、テキストの色、背景色、位置、境界線がそれに応じて変更され、それによって Produce をシミュレートします。 「押し下げる」特殊効果。

3.FF ブラウザは、a 要素の高さ (幅) 属性と幅 (高さ) 属性をサポートしていません。 ！

4. 箇条書き

(1) list-style-type: 属性は、u​​ll または ol マークのシンボル スタイルを設定します。

(2) list-style-image: 属性設定の箇条書きは画像として表示されますが、ブラウザ間の違いにより、この属性は通常は使用されませんが、list-style-type 属性値が none に設定され、その後 liタグはバックグラウンド実装を設定します。

5. シンプルなメニュー ナビゲーション

(1) リンクはブロック レベルの要素として設定されていますが、マウス パス効果はマウスがテキスト (IE6) 上を通過したときにのみトリガーされ、マウスが長方形に入ったときはトリガーされません。エリア。 IE7 はこのエラーを修正しました:

"#Navigation Li A" に CSS ルールを追加します:

1. 固定幅レイアウト

(1 ) Body {テキスト配置: 中央;}

#コンテナ {ポジティブ: 関連: 1 自動; 幅: 760px; テキスト配置: 左 (2) ボディ {マージン: 0px: 0px: 0px: 0px ;}

# コンテナ{位置: relative;left:50%;width:760px;margin-left:-330px;}

2. 左-中-右のレイアウト

(1) 左と右のブロックは絶対配置を使用し、ブロックの幅は中央のブロックは固定ですが、幅が設定されていない場合、幅は自動的に調整されますが、そのpadding-leftとpadding-rightはそれぞれ左と右のブロックの幅に設定する必要があります。

本文の背景色を右側のブロックと同じ色に設定し、同じ幅の画像を作成します。左と左の背景色と同じ色をブロックし、 #container の背景画像を作成し、それを下に繰り返します。

6. 経験

1. 項目リストで、

タグが float: left 属性に設定され、

に幅が指定されている場合、親タグ 幅は自動的に折り返されます。

2. フローティング: 2 つのブロックがあり、最初のブロックが方向に関係なくフローティングに設定されている場合、2 番目のブロックのコンテンツが最初のブロックを囲みますが、2 つのブロックがフローティングに設定されている場合は、最初のブロックがフローティングに設定されます。つまり、最初のブロックの内容が 2 番目のブロックに折り返されません。元の位置に留まります。

3. 差を減らすために、一般的に、

、
• 、
  、

  などのレイアウト ブロック内のマージンとパディングの値を設定するようにしてください。 ; など、必要に応じて値を設定するか、0 に設定します。

  4. ブロック内のタイトル テキストを置き換えるには、まずタイトル テキストを非表示にしてから、ブロックの背景画像として置き換える画像。縦長の画像が必要な場合は、通常は次のように設定します。横長の画像が必要な場合は、通常、タイトルを含むテキストを非表示にしてから、対応する親要素の幅と高さ、および外側と内側の要素を設定します。 margins を設定し、親要素の背景画像を置換画像として設定します。

  幅:170 px;height:60px;margin:0px ;padding:0px;}

  H3{bacground:url(1.jpg) no-repeat;}