Webデザインコードまとめ-レイアウト(1)_html/css_WEB-ITnose

長い間文章を書いていなかったので、言葉の整理の仕方を忘れてしまったので、このブログアカウントを登録しました。まず、日々のプログラミングで遭遇する「落とし穴」を要約し、次に、将来見直すためにプログラミングのキャリアを記録します。この概要の出典は、私が担当した最近のクラウド プラットフォーム プロジェクトです。今回は最初の記事、レイアウトについてです。

従来のレイアウト方法は一般的にボックスモデルであり、表示、位置、またはフロートに依存します。ただし、position には内部の高さに適応できず、固定のコンテナーの高さが必要であるという欠点があります。float は親要素を折りたたむため、同時に float をクリアする必要があります。垂直方向の中央揃えなどの特定のレイアウト方法。従来のボックス モデル方法が使用される場合、コードは一般的に次のようになります。

rrree

この方法は保守が容易ではなく、親要素の高さを固定する必要があるため、この問題を解決するにはフレックスボックス (柔軟なレイアウト) が必要です。が紹介されました。この問題は、.mid の親要素で flex 配置を使用することで簡単に解決できます。もちろん、ブラウザの互換性を確保するには、ブラウザのプライベート プレフィックスを追加する必要があります。

 .mid{position:absolute;left:50%;top:50%;margin-top:-1/2*Height;margin-left:-1/2*Width;}

それだけでなく、トップバナーを書くときに、親要素を次のようにすることもできます:

1 .wrap{display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;-webkit-box-align: center;-webkit-align-items: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-webkit-justify-content: center;-ms-flex-pack: center;justify-content: center;}

Webサイトのロゴ、オプションボックス、ログインボタンのレイアウトをより美しくします。ただし、フレックスレイアウトを使用すると、float、clear、vertical-align 属性が無効になります。

その他の flex 属性: 1. flex-direction: 項目の配置方向を定義します。 2. flex-wrap: 主軸上の要素をラップできるかどうかを定義します。 3. align-items: 主軸に垂直な方向に項目を配置する方法を定義します。 4. align-content: 複数の主軸の位置合わせを定義します。上記の属性はすべて親要素に記述されており、子要素にもいくつかの flex 属性があります:

1. 順序: 項目の順序を定義します。項目が小さいほど高くなります。 2. flex-grow: 項目の拡大率を定義します。0 の場合は拡大されません。 3. フレックスシュリンク: フレックスグローの反対。 4. flex-basis: 主軸上の項目が占めるスペースを設定します。 5. align-self: 特定の子要素にカスタマイズされた配置を提供します。これにより、親要素の align-items 属性がオーバーライドされます。

その他のレイアウト体験談:

1. 高さの崩れを避けるために、float を使用したり、レイアウトを任意に配置したりしないでください。

2. コードの再利用を容易にするために、スタイルを記述するときに ID の代わりにクラスを使用することが最善です。

3. レイアウト方法が中期以降に不適切であることが発覚し、プロジェクト全体がひっくり返ることのないように、レイアウト前にページ全体の構成とレイアウト方法を決定します。

4. フッターをページの下部に固定します。本文内の要素の積み重ねの高さがブラウザの高さよりも低いか、ブラウザの高さより高いかに関係なく、ラップ内に他の要素を配置するだけで済みます。 2 つの異なる div にフッター要素を配置し、最初の div の高さを 100% に設定し、margin-bottom をフッターの高さに設定します。

justify-content:space-between;

表面的な言葉を笑うな。