ホームページ > 記事 > ウェブフロントエンド > 5 つの一般的な CSS レイアウトフレームワークについての深い理解

5 つの一般的な CSS レイアウトフレームワークについての深い理解

WBOYオリジナル: 2024-01-16 08:41:061003ブラウズ

CSS レイアウトフレームワークを理解する: 5 つの一般的なレイアウトの分析

Web デザインと開発において、CSS レイアウトは非常に重要な側面です。優れたレイアウトは、Web ページをより美しく、より機能的にすることができます。 CSS レイアウトフレームワークを理解することは、Web ページのレイアウトスキルをより良く習得するのに役立ちます。この記事では、5 つの一般的な CSS レイアウトを紹介し、具体的なコード例を示します。

1. 流体レイアウト (流体配置)

流体レイアウトは、画面サイズに適応したレイアウト方法です。さまざまな画面サイズに合わせて要素の幅または高さを設定するには、主にパーセンテージを使用します。以下は簡単なフローレイアウトの例です:

<!DOCTYPE html>
<html>
  <head>
    <style>
      .container {
        width: 100%;
      }
      .left-panel {
        width: 25%;
        background-color: yellow;
        float: left;
      }
      .right-panel {
        width: 75%;
        background-color: lightblue;
        float: right;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="left-panel">
        <p>This is left panel.</p>
      </div>
      <div class="right-panel">
        <p>This is right panel.</p>
      </div>
    </div>
  </body>
</html>

2. グリッドレイアウト (Grid)

グリッドレイアウトは、複雑なグリッド構造を簡単に作成できる 2 次元のレイアウト方法です。グリッドレイアウトを使用して、コンテナー内に行と列を作成し、指定した場所に要素を配置します。以下は単純なグリッドレイアウトの例です:

<!DOCTYPE html>
<html>
  <head>
    <style>
      .container {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-gap: 10px;
      }
      .item {
        background-color: lightblue;
        padding: 20px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">Item 1</div>
      <div class="item">Item 2</div>
      <div class="item">Item 3</div>
      <div class="item">Item 4</div>
      <div class="item">Item 5</div>
      <div class="item">Item 6</div>
    </div>
  </body>
</html>

3. フレキシブルレイアウト (フレックスボックス)

フレキシブルレイアウトは、コンテナー内の要素のサイズとサイズを自動的に調整できる柔軟なレイアウト方法です。位置。柔軟なレイアウトにより、さまざまなレイアウトニーズを簡単に実現できます。以下は簡単な柔軟なレイアウトの例です:

<!DOCTYPE html>
<html>
  <head>
    <style>
      .container {
        display: flex;
        justify-content: space-between;
      }
      .item {
        background-color: lightblue;
        padding: 20px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">Item 1</div>
      <div class="item">Item 2</div>
      <div class="item">Item 3</div>
    </div>
  </body>
</html>

4. フローティングレイアウト (Float)

フローティングレイアウトは、複数列のレイアウトを実装するために使用されるテクノロジです。要素を指定した位置にフローティングすることにより、複数の列の効果を得ることができます。以下は、単純なフローティングレイアウトの例です。

<!DOCTYPE html>
<html>
  <head>
    <style>
      .container {
        overflow: hidden;
      }
      .item {
        width: 30%;
        background-color: lightblue;
        float: left;
        margin-right: 10px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">Item 1</div>
      <div class="item">Item 2</div>
      <div class="item">Item 3</div>
    </div>
  </body>
</html>

5. 配置レイアウト (位置)

配置レイアウトは、ドキュメントフロー内での位置を指定して要素を配置する方法です。要素のpositionプロパティを設定することにより、親要素またはドキュメントウィンドウを基準にして要素を配置できます。以下は簡単な位置決めレイアウトの例です:

<!DOCTYPE html>
<html>
  <head>
    <style>
      .container {
        position: relative;
        height: 200px;
        background-color: lightblue;
      }
      .item {
        width: 100px;
        height: 100px;
        background-color: yellow;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item"></div>
    </div>
  </body>
</html>

概要:

この記事では、5 つの一般的な CSS レイアウトフレームワーク、つまり流体レイアウト、グリッドレイアウト、エラスティックレイアウト、フローティングレイアウトと位置決めレイアウトを紹介します。これらのレイアウトフレームワークを学ぶことで、Web ページレイアウトのスキルをよりよく習得し、実際のニーズに応じて適切なレイアウト方法を選択できるようになります。この記事が皆さんのお役に立てば幸いです!

以上が5 つの一般的な CSS レイアウトフレームワークについての深い理解の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

css Float position

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：CSS フレームワークツールを探索する: 開発効率を向上させる次の記事：CSS フレームワークツールを探索する: 開発効率を向上させる

続きを見る

5 つの一般的な CSS レイアウト フレームワークについての深い理解

関連記事

5 つの一般的な CSS レイアウトフレームワークについての深い理解