「Web 標準を学ぶ 10 日間 (div+css)」学習ノート_html/css_WEB-ITnose

XHTML CSS基礎知識 1日目 http://www.aa25.cn/div_css/902.shtml

1. ページ内のボックスモデル全体の幅は、左ボーダー+左ボーダー+左パディングで構成されます。 +コンテンツ+右パディング+右ボーダー+右ボーダーとなり、CSSスタイルのwidthで定義される幅はコンテンツ部分の幅のみとなります。

翌日の 1 列レイアウト http://www.aa25.cn/div_css/903.shtml

1 CSS マニュアルには、ブロックレベル要素の垂直方向に隣接するマージンがインライン中にマージされると記載されています。要素は実際には、上部は上下のマージンを占めません。インライン要素の左右のマージンはマージされません。同様に、フローティング要素のマージンはマージされません。負のマージン値を指定することはできますが、使用するときは注意してください (ブロックレベル要素とインライン要素の概念については、次のセクションで説明します)。

したがって、上部と下部の div が両方とも margin:5px を指定した場合、ブロックレベル要素の垂直方向に隣接するマージンがマージされるため、2 つの div の間隔は 10 ピクセルではなく 5 ピクセルになります。

2. inline (display:inline;) 要素の幅と高さを設定することはできません。これは、inline は行レイアウトに属し、その特性が 1 行にレイアウトされるためです。そのため、幅と高さを設定できません。 http://www.jb51.net/article/21829.htm

3 日目の 2 列と 3 列のレイアウト http://www.aa25.cn/div_css/904.shtml

CSS で、任意の要素をフロート化できます。フローティング要素は、要素の種類に関係なく、ブロックレベルのボックスを生成します。また、幅を指定する必要があります。そうでない場合、フローティングに使用できるスペースがフローティング要素よりも小さい場合は、さらに幅が狭くなります。要素を配置するのに十分なスペースが確保されるまで、次の行まで実行されます。

2.IE 3 ピクセルのバグ

2.1 現象: 3 ピクセルのバグは、浮動要素が非浮動要素に隣接している場合に発生する有名なバグです。つまり、2 つの間には 3 ピクセルのギャップが存在します。

2.2 解決策: #side に _margin-right:-3px を追加します。このスタイルが IE6 専用に有効になるように、必ず先頭にアンダースコアを追加してください。 IE7やFFでも正常に表示されます。

2.3 提案: 2 つの列の幅が固定されている場合、IE6 の 3 ピクセルのバグを避けるために、#main を修正して右にフローティングするのが最善です。

4 日目 垂直ナビゲーション メニューと 2 番目のポップアップ メニュー

1.position:relative; 要素が相対的に配置されている場合、最初にその位置に表示されます。次に、垂直または水平位置を設定して、元の開始点を「基準にして」要素を移動します。 (もう 1 点、相対配置の場合、要素が移動されるかどうかに関係なく、要素は元のスペースを占有します。したがって、要素を移動すると、他のボックスが覆われてしまいます。)

2.position:absolute; は絶対配置を意味し、位置はブラウザの左上隅に基づいて計算が開始されます。 絶対配置では要素をドキュメント フローから取り出すため、スペースを占有しません。通常のドキュメント フロー内の要素は、絶対配置された要素が存在しないかのようにレイアウトされます。 (絶対に配置されたボックスはドキュメント フローとは関係がないため、ページ上の他の要素をカバーでき、その階層順序は Z インデックスによって制御できます。Z インデックスの値が大きいほど、より高い位置に表示されます。)

3 . 親コンテナーが相対配置を使用し、子要素が絶対配置を使用する場合、子要素の位置はブラウザーの左上隅を基準とするのではなく、親コンテナーの左上隅を基準とするようになります

4。相対位置と絶対位置は、上、右、下、左と調整する必要があります。これらの 4 つの属性は、要素が配置された後にのみ有効になり、その他の場合は無効になります。また、これら 4 つの属性は同時に使用できるのは隣接する 2 つだけです。上下を同時に使用したり、左右を同時に使用したりすることはできません。