CSS (グラフィックとテキスト) のグリッドレイアウトについて話します。-CSSチュートリアル-php.cn

CSS (グラフィックとテキスト) のグリッドレイアウトについて話します。

青灯夜游

リリース： 2021-01-13 18:53:06

転載

2582 人が閲覧しました

CSS (グラフィックとテキスト) のグリッドレイアウトについて話します。

グリッドレイアウトでは、Web ページを単純な属性の行と列に分割できます。CSS ページレイアウトテクノロジを使用すると、Web ページ内の要素を選択し、通常のレイアウトフロー、周囲の要素、親コンテナ、またはメインビューポート/ウィンドウに対するそれらの位置を制御できます。

聖杯レイアウト

聖杯レイアウトは、両側が固定幅で中央が適応型の 3 列レイアウトです:

css:

* {
        box-sizing: border-box;
    }
    html, body{
        width: 100%;
        height: 100%;
        margin: 0;
    }
    .container{
        width:100%;
    }
    .container:after{
        display: table;
        content:".";
        clear:both;
    }
    
    .container .cl{
        float:left;
        border: 1px solid red;
        height: 200px;
    }
    
    .main{
        width:100%;
        padding 0 290px 0 320px;
        background-color: blue;
    }
    .sub{
        width: 320px;
        margin-left:-100%;
        background-color: white;
    }
    .extra{
        width: 290px;
        margin-left:-290px;
        background-color: yellow;
    }

CSS

ログイン後にコピー

HTML：

<body>
<div class="container">
    <div class="cl main">
    </div>
    <div class="cl sub"></div>
    <div class="cl extra"></div>
</div>
</body>

ログイン後にコピー

CSS (グラフィックとテキスト) のグリッドレイアウトについて話します。

聖杯レイアウトの原則は、子要素がフローティング状態にある場合、負の値を設定することです。 margin を指定すると、子要素はその要素の上の兄弟要素と重なり合います。

ということで、青い部分をまた3つに分けたい場合は、いろいろな方法があると思います。しかし、それはネストによって実現できるでしょうか?試してみましょう:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<meta http-equiv="window-target" content="_top">
<title>Writing to Same Doc</title>
<style type="text/css">
    * {
        box-sizing: border-box;
    }
    html, body{
        width: 100%;
        height: 100%;
        margin: 0;
    }
    .container{
        width:100%;
    }
    .container:after{
        display: table;
        content:".";
        clear:both;
    }
    
    .container .cl{
        float:left;
        border: 1px solid red;
        height: 200px;
    }
    
    .main{
        width:100%;
        padding: 0 290px 0 320px;
        background-color: blue;
    }
    .sub{
        width: 320px;
        margin-left:-100%;
        background-color: white;
    }
    .extra{
        width: 290px;
        margin-left:-290px;
        background-color: yellow;
    }
</style>
</head>
<body>
<div class="container">
    <div class="cl main">
        <div class="container">
            <div class="cl main"></div>
            <div class="cl sub"></div>
            <div class="cl extra"></div>
        </div>
    </div>
    <div class="cl sub"></div>
    <div class="cl extra"></div>
</div>

</body>
</html>

ログイン後にコピー

CSS (グラフィックとテキスト) のグリッドレイアウトについて話します。

グリッドシステムの原理

CSS (グラフィックとテキスト) のグリッドレイアウトについて話します。

仮定: フローラインの幅は W、列の幅は c、Gutter の幅は g、Margin の幅は m、グリッドの列数は N

W = c*N g*(N -1) 2m; g の幅は通常 m の 2 倍なので、:

W = (c g) * N; c g を C として記録すると、次のようになります:

W = C * N;

ほとんどのグリッドシステムは、この公式のバリエーションです。

Bootstrap のグリッドシステム

一般的なグリッドレイアウト設計とブートストラップでの設計実装を見てみましょう。 BootStrap でグリッドレイアウトを適切に使用するには、列を行に配置し、行をコンテナーに配置する必要があります。コンテナクラスには、レイアウトに 2 つの主な機能があります。

さまざまな幅間隔で幅制限を提供します (応答性ブレークポイント)。幅が変わる場合は、別の幅を取ります。
内部コンテンツがブラウザの境界に触れないようにパディングを提供します。

ブートストラップでは、上記のマージンの代わりにパディングが使用されます。下の図に示すように、サイズは 15px で、ピンク色がパディングサイズです。

CSS (グラフィックとテキスト) のグリッドレイアウトについて話します。

行は列のコンテナです。各行の列の合計は 12 でなければなりませんが、ネストすることで拡張できます。 Row の左右のマージンは -15px で、以下の図の青い部分に示すように、コンテナ内のパディングをオフセットするために使用されます。 row は主にネストの便宜のためのものであり、後述します。

列はグリッドシステムの主役です。各列の左右のパディングは 15 ピクセルです。上の行の負のマージンはコンテナのパディングをオフセットするため、各列のパディングを設定することで、コンテンツが境界線に直接触れないようにし、異なる列の間には 30 ピクセルのカードスロット (ガター) があります。以下の図の黄色の部分に示すように: CSS (グラフィックとテキスト) のグリッドレイアウトについて話します。

次に、上記の式について考えてみましょう: W = C * N;

上記の行ネガティブマージンデザインは主にネスト用です。列内に列をネストする場合は、まずネストされた列を行に配置し、コンテナを配置せずに、その行をコンテナとして列に配置する必要があります。下図の青で示したように、列に配置された行のマイナスマージン領域です。 CSS (グラフィックとテキスト) のグリッドレイアウトについて話します。