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

ホームページ

ウェブフロントエンド

CSSチュートリアル

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

青灯夜游

Jan 13, 2021 pm 06:53 PM

cssグリッドレイアウト

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 つの主な機能があります。

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

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

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

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

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

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

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

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

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

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

プログラミング学習

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

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

声明

この記事は博客园で複製されています。侵害がある場合は、admin@php.cn までご連絡ください。

Google Fontsをタグ付けし、Goofonts.comを作成する方法Apr 12, 2025 pm 12:02 PM

Goofontsは、開発者妻とデザイナーの夫によって署名されたサイドプロジェクトであり、どちらもタイポグラフィの大ファンです。 Googleにタグを付けています

時代を超越したWeb開発記事Apr 12, 2025 am 11:44 AM

Pavithra Kodmadは、彼らが変化したWeb開発に関する最も時代を超越した記事のいくつかであると考えていることについて、人々に推奨事項を求めました

セクション要素との取引Apr 12, 2025 am 11:39 AM

2つの記事がまったく同じ日に公開されました。

graphQlの練習JavaScript APIでクエリをクエリしますApr 12, 2025 am 11:33 AM

GraphQL APIの構築方法を学ぶことは非常に挑戦的です。ただし、10分でGraphQL APIを使用する方法を学ぶことができます！そして、それは私が完璧になったことがあります

コンポーネントレベルのCMSApr 12, 2025 am 11:09 AM

コンポーネントがデータが近くに住んでいる環境に住んでいる場合、視覚コンポーネントと

円にタイプを設定します...オフセットパス付きApr 12, 2025 am 11:00 AM

ここでは、Yuanchuanからの合法的なCSSの策略があります。このCSSプロパティオフセットパスがあります。むかしむかし、それはモーションパスと呼ばれ、その後改名されました。私

CSSで「戻る」ことは何をしますか？Apr 12, 2025 am 10:59 AM

Miriam Suzanneは、このテーマに関するMozilla開発者のビデオで説明しています。

現代の恋人Apr 12, 2025 am 10:58 AM

私はこのようなものが大好きです。

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

MantisBT

Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティングサービスをチェックしてください。

メモ帳++7.3.1

使いやすく無料のコードエディター

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポートライブラリとヘッダーファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。