ホームページ > 記事 > ウェブフロントエンド > DIV+CSS クラシック レイアウト [幅適応] [自動画面中央揃え]_html/css_WEB-ITnose
DIV+CSS クラシック レイアウト [幅適応] [自動画面中央揃え]_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 12:29:411429ブラウズ
ヘッダー
分析:
最も外側のラッパーは内部にすべてのコンテンツをネストしており、全体的な配置は相対的です。 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