検索

ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS (グラフィックとテキスト) のグリッド レイアウトについて話します。

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

青灯夜游
青灯夜游転載
2021-01-13 18:53:062608ブラウズ

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

(学習ビデオ共有: 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 つの主な機能があります。

  1. さまざまな幅間隔で幅制限を提供します (応答性ブレークポイント)。幅が変わる場合は、別の幅を取ります。

  2. 内部コンテンツがブラウザの境界に触れないようにパディングを提供します。

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

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

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

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

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

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

次に、ネストされた列を行に配置します。下の図に示すように、上の列がコンテナの役割を果たします。

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

プログラミング関連の知識について詳しくは、

プログラミング学習

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

以上がCSS (グラフィックとテキスト) のグリッド レイアウトについて話します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：
この記事はcnblogs.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。
前の記事：CSS スタイル シートを使用する 3 つの方法とは何ですか?次の記事：CSS スタイル シートを使用する 3 つの方法とは何ですか?

関連記事

続きを見る