CSSのレイアウト方法にはどのようなものがあるのでしょうか？-フロントエンドQ&A-php.cn

CSSのレイアウト方法にはどのようなものがあるのでしょうか？

醉折花枝作酒筹

リリース： 2023-01-06 11:15:59

オリジナル

7241 人が閲覧しました

css レイアウト方法には次のものが含まれます: 1. 1 列レイアウト、通常は幅と高さが固定; 2. 2 列レイアウト、float を使用して実装; 3. 3 列レイアウト、両側の幅が固定され、アダプティブミドル; 4. 1 列レイアウトをベースとし、上部と足元部分を保持する混合レイアウト; 5. その他のレイアウトなど

CSSのレイアウト方法にはどのようなものがあるのでしょうか？

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

Web ページの本質はブロック間の位置です。ブロックはブロックの隣にあり、ブロックはブロック内にネストされており、ブロックはブロックの上に積み重ねられています。

3 種類の関係: 隣接、入れ子、重複。

以下では、Web ページレイアウトの一般的な方法をいくつか紹介します

1. 1 列レイアウト:

一般に、幅と高さはmargin: 0 auto (水平方向の中央揃え、インターフェイス上で目立つタイトルを表示する場合などに使用);

        .main{
            width: 200px;
            height: 100px;
            background-color: grey;
            margin: 0 auto;
        }

ログイン後にコピー

<p class="main"></p>

ログイン後にコピー

2. 2 列レイアウト:

2 列レイアウトと言えば、最も一般的なのは float を使用することです。フロートレイアウトの欠点は、フローティング後にテキストの折り返しやその他の効果が発生し、時間内にフロートをクリアする必要があることです。

左右フローティングを設定するか、左右フローティングを設定します (これには親要素の幅を決定する必要があります)

親要素が高さを設定しない場合は、オーバーフローを設定する必要があります:hidden でフローティング生成をクリアします。

の影響隣接する要素のクリアとフローティングの影響については、clear: Both;

    <p class="main">
        <p class="left">left</p>
        <p class="right">right</p>
    </p>

ログイン後にコピー

        .main{
            width: 400px;
            background: red;
            overflow: hidden;
        }

        .left{
            background: yellow;
            float: left;
        }

        .right{
            background: green;
            float: left;
        }

ログイン後にコピー

3 を使用します。 3 列レイアウト:

両側は固定幅、中央は適応型

最初に親要素の幅を設定し、左右にフローティングを設定できます。次に、中央に余白を設定して間隔を調整します。また、左にフロートするように設定したり、マージンを設定したり、間隔を調整したりすることもできます。フロートクリアの効果にも注目！

    <p class="main">
        <p class="left">left</p>
        <p class="middle">middle</p>
        <p class="right">right</p>
    </p>

ログイン後にコピー

        .main{
            width: 100%;
            background: red;
            overflow: hidden;
        }
        .left{
            background: yellow;
            float: left;
            width: 100px;
        }
        .middle{
             background: rosybrown;
             float: left;
             width: cacl(100%-200px);
         }
        .right{
            background: green;
            float: right;
            width: 100px%;
        }

ログイン後にコピー

または、親要素の相対属性を設定し、次に子要素の絶対属性を設定してから、個別に位置と間隔を調整します。

<p class="parent" style="">
    <p class="left" style="">
        <p>left</p>
    </p>    
    <p class="center" style="">
        <p>center</p>
        <p>center</p>
    </p>                
    <p class="right"  style="">
        <p>right</p>
    </p>            
</p>

ログイン後にコピー

<style>
p{margin: 0;}
.parent{position: relative;height:40px;}
.left,.right,.center{position: absolute;}
.left{left: 0;width:100px;}
.right{right: 0;width: 100px;}
.center{left: 120px; right: 120px;}
</style>

ログイン後にコピー

4. 混合レイアウト:

1 列レイアウトをベースに、上部と足元部分を保持し、中央のメイン部分を変形します。 2 列に分割するか、3 列レイアウトで、小さなモジュールを同じ方法でレベルごとに分割できます。

    
    <p class="main">
        <p class="left">left</p>
        <p class="right">right</p>
    </p>

ログイン後にコピー

        .top{
            height: 100px;
            background: teal;
        }
        .footer{
            height: 100px;
            background: wheat;
        }
        .main{
            width: 100%;
            background: red;
            overflow: hidden;
        }
        .left{
            background: yellow;
            float: left;
            width: 50%;
        }
        .right{
            background: green;
            float: right;
            width: 50%;
        }

ログイン後にコピー

5. 拡張 (均等配分など)

    <p class="parent">
        <p class="child"></p>
        <p class="child"></p>
        <p class="child"></p>
        <p class="child"></p>
    </p>

ログイン後にコピー

        body{margin: 0;}
        .parent{
            border: 1px solid red;
            overflow: hidden;
            margin-right: -10px;
        }
        .child {
            width: calc(25% - 10px);
            height: 100px;
            background: green;
            float: left;
            margin-right: 10px;
        }

ログイン後にコピー

推奨学習: CSS ビデオチュートリアル

以上がCSSのレイアウト方法にはどのようなものがあるのでしょうか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。