CSS の一般的なレイアウトは何ですか?

CSS の一般的なレイアウトは次のとおりです: 1. 水平方向の中央揃え、インライン要素は水平方向の中央揃え、ブロック レベルの要素は水平方向の中央揃え、マルチブロック レベルの要素は水平方向の中央揃え; 2. 垂直方向の中央揃え、単一行インライン要素は垂直方向の中央に配置され、複数の Row 要素は垂直方向の中央に配置されます。3. フレックス レイアウトを使用します。4. 1 列のレイアウト。5. 2 列のレイアウト。

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

1. 水平方向のセンタリング:

インライン要素の水平方向のセンタリング

text-align: center を使用して、ブロックレベル要素内でインライン化を実現します。水平方向の中央に配置されます。この方法は、インライン要素 (inline)、インライン ブロック (inline-block)、インライン テーブル (inline-table)、および inline-flex 要素の水平方向のセンタリングに有効です。

コアコード:

.center-text {
  text-align: center;
}

ブロックレベル要素は水平方向に中央に配置されます

固定幅のブロックレベル要素の margin-left と margin-right を auto に設定すると、ブロックのレベル要素を水平方向の中央に配置することができます。

コア コード:

.center-block {
  margin: 0 auto;
}

複数のブロック レベルの要素は水平方向に中央に配置されます

インライン ブロックを使用します

連続するブロックが 2 つ以上ある場合レベル要素では、ブロックレベル要素の表示タイプを inline-block に設定し、親コンテナの text-align 属性を設定することで、マルチブロックレベル要素を水平方向に中央揃えにすることができます。

コア コード:

.container {
    text-align: center;
}
.inline-block {
    display: inline-block;
}

2. 垂直方向の中央揃え

単一行のインライン (inline-) 要素は垂直方向の中央揃えになります

設定すると、Inline 要素の高さと行の高さが同じになり、要素が垂直方向の中央に配置されます。

コア コード:

#v-box {
    height: 120px;
    line-height: 120px;
}

複数行の要素は垂直方向に中央揃えになります

テーブル レイアウトの使用 (テーブル)

テーブル レイアウトの垂直方向の配置の使用: 中央の配置子要素の垂直方向の中央揃えを実現します。

コア コード:

.center-table {
    display: table;
}
.v-cell {
    display: table-cell;
    vertical-align: middle;
}

3. フレックス レイアウトを使用する (フレックス)

フレックス レイアウトを使用して垂直方向の中央揃えを実現します。ここで、flex-direction: 列定義 主軸方向は長手方向です。フレックス レイアウトは CSS3 で定義されているため、古いブラウザでは互換性の問題が発生します。

コア コード:

.center-flex {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

4. 単一列レイアウト

主なタイプは 2 つあります:

- ヘッダー、コンテンツ、フッターの幅 同じですが、最大幅があります

- ヘッダーとフッターはブラウザの幅の 100% を占め、コンテンツには最大幅があります

最初の幅

<header style="background-color: red; width: 600px; margin: 0 auto;">头部</header>
<main style="background-color: green; width: 600px; margin: 0 auto;">内容</main>
<footer style="background-color: yellow; width: 600px; margin: 0 auto;">尾部</footer>

2 つ目 :

<header style="background-color: red;">头部</header>
<main style="background-color: green; width: 600px; margin: 0 auto;">内容</main>
<footer style="background-color: yellow;">尾部</footer>

5. 2 列レイアウト

float margin

float を使用してサイドバーとメインコンテンツを 1 行にまとめてから、メインコンテンツの余白を設定します。

<main style="background-color: red;">
  <aside style="background-color: yellow; float: left; width: 50px;">边栏</aside>
  <section style="background-color: green; margin-left: 50px;">主要内容</section>
</main>

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

以上がCSS の一般的なレイアウトは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。