DIV+CSS クラシックレイアウト [幅適応] [自動画面中央揃え]_html/css

ヘッダー

分析:

最も外側のラッパーは内部にすべてのコンテンツをネストしており、全体的な配置は相対的です。 max min はすでに最も狭い値と最も広い値をうまく制御していますが、IE には影響しません。他のレイアウトが散在していない場合、この層は実際に本体内に記述することができ、ネスト層が 1 つなくなります。

#wrapper{ 幅:自動; 境界線:1px; 最大幅:1000px; マージン-右:自動; }

ラッパー下位レベルの外側のヘッダーフッター

ヘッダーは絶対配置され、フッターは相対的に配置されます。これは、非 IE との互換性の鍵となります。

#outer{ margin-left:130px; margin-right:130px; border-left:1px ソリッド #000; }
#header{ 位置:absolute; 上:0; 幅:100%; 境界線:1px; 背景:#0ff;フォントサイズ:xx-large}
#フッター { 幅:100%; ライン高さ:50px; 背景:#ffc; center;position:relative;}

outer lower-level clearheader externalwrap right clearer

clearheader は、ヘッダーの空白を埋めるために使用されます。 Clearer は、一般的に使用される埋め込みハックです。
アウターラップの幅が 100% ではなく 99% なのはなぜですか?
その上部の外側のレイヤーには境界線があるため、100% の幅と 2 つの境界ピクセルを追加すると拡張され、FF には明らかな効果があります。
右側の処理は非常に古典的で、IE では位置決めとして、FF ではフローティングとして解決されます。ネガティブマージンの処理でも、上部の外側によって残されたスペースのみが使用されます。

#clearheader{ height:72px;}
.outerwrap { float:left; width:99%;}
#right {
position:relative;
width:130px;
margin-right :-129px;
}
* html #right { margin-right:-130px; margin-left:-3px}
.clearer{ オーバーフロー: 隠し:-1px; }

アウターラップでセンターコンテンツをより明確に残すというアイデアは、上記と似ています。

IE5.0以降のブラウザが有効であることを明記

IE5.0以降の幅条件を式メソッドで制御し、幅と中央を自動調整します。ここで auto を使用すると、ウィンドウのサイズ変更プロセス中に div コンテンツが表示されなくなるため、幅の値を修正しました。

body {
width:expression( documentElement.clientWidth }
#wrapper {
width:expression( documentElement.clientWidth }

この例は、DIV+CSS の多くの古典的な使用法と定義を組み合わせたもので、非常に伝統的であると同時に実用的です。

フッター

コード
1
2
3
4
5<頭>
6
7
8
9テスト
10
11頭>
12
13
186
187
188
189
190
191

192
193
194
195

196
197

198
199

201

分析:

202

最も外側のラッパーにはすべてのコンテンツが内部にネストされており、全体が相対的に配置されます。 max min はすでに最も狭い値と最も広い値をうまく制御していますが、IE には影響しません。他のレイアウトが散在していない場合、この層は実際に本体内に記述することができ、ネスト層が 1 つなくなります。

204
205

#wrapper; 最小幅:1px; 最大幅:1000px;マージン左:自動; マージン右: 相対;}

206
207

下位レベルの外側ヘッダーフッター

210
211

ヘッダーは絶対位置にあり、フッターは外側にそれぞれ 130 ピクセルの余白があります。非 IE との互換性の鍵。

212
213

#outer{ margin-left:130px; margin-left:1px ソリッド #000; 000; 色: #000;
215#header{ 位置: 絶対; 幅: 100%;ボトム:1px ソリッド #000; 背景:#0ff; フォントサイズ:xx-large}
幅:100%;両方; line-height:50px; ボーダートップ:1px 背景:#ffc; 位置:相対;
219

outer 下位レベルのクリアヘッダーのアウターラップ右クリアー

220
221

clearheader は、ヘッダーの空白を埋めるために使用されます。充填ハック。

222
223outerwrap 幅が 100% ではなく 99% なのはなぜですか?

224
225 上部の外側のレイヤーには境界線があるため、100% の幅と 2 つの境界ピクセルを追加すると大きくなり、FF の効果は明らかです。

226
227right の処理は、IE では位置決めとして、FF ではフローティングとして解決されます。ネガティブマージンの処理でも、上部の外側によって残されたスペースのみが使用されます。

228
229

#clearheader{ height:72px;}

230
231.outerwrap { float:left; }
232
233#right {

235position:relative;

237width:1px;
238
239margin-right:-129px;

240
241}

242
243* html #right { margin-right:-130px}< ;br />
244
245.clearer{ height:1px; margin-top:-1px; clear:both;}

246
247

考え方は上記と同様です。

IE5.0以降のバージョンの幅条件制御を実現し、幅とセンタリングの自動調整を実現しました。ここで auto を使用すると、ウィンドウのサイズ変更プロセス中に div コンテンツが表示されなくなるため、幅の値を修正しました。 & lt;/p & gt;
252
253 & lt; p クラス = コード & gt;
255width: 式 (DOCUMENTELEMENT.ClientWidth & LT; = 800) == 0 ? 258
259#ラッパー {< br />
260
261width:expression( documentElement.clientWidth 262
263}

264
265

この例は、DIV+CSS の多くの古典的な使用法と定義を組み合わせており、非常に伝統的であると同時に実用的です。＆lt;/p＆gt; 267＆lt; div＆lt; 272
273
274
275

276
277

278
279