CSSレイアウトとは何ですか?一般的な CSS レイアウト方法 (コード付き)

CSSレイアウトとは何ですか? CSS レイアウトを使用すると、ページをより美しく整然と見せることができます。次の記事では、CSS での一般的なレイアウト方法をいくつかまとめています。詳しく見てみましょう。

水平方向の中央揃えレイアウト

1. マージン + 固定幅

<div>
  <div>Demo</div>
</div>

<style>
  .child {
    width: 50px;
    margin: 0 auto;
  }
</style>

実行結果:

この水平方向の中央揃えの固定幅を使用することもできます。 width 以下は可変幅の実装に使用されます

2, table + margin

<div>
  <div>Demo</div>
</div>

<style>
  .child {
    display: table;
    margin: 0 auto;
  }
</style>

演算結果:

display: table はパフォーマンス的にはブロック要素に似ていますが、幅はコンテンツの幅です。

親要素のスタイルを設定する必要はありません (IE 8 以降をサポート) IE 8 と互換性があります。それ以降のバージョンでは

3、inline-block + text-align に調整する必要があります

<div>
  <div>Demo</div>
</div>

<style>
  .child {
    display: inline-block;
  }
  .parent {
    text-align: center;
  }
</style>

Good互換性 (IE 6 および IE 7 とも互換性があります)

4、絶対値 + マージン左

<div>
  <div>Demo</div>
</div>

<style>
.parent {
    position: relative;
  }
  .child {
    position: absolute;
    left: 50%;
    width: 100px;
    margin-left: -50px;  /* width/2 */
  }
  </style>

固定幅

変換を使用する場合と比較して、互換性が優れています

5、絶対値 + 変換

<div>
  <div>Demo</div>
</div>

<style>
  .parent {
    position: relative;
  }
  .child {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
</style>

絶対配置 ドキュメント フローから切り離されても、後続の要素のレイアウトには影響しません。

transform は CSS3 属性であり、互換性の問題があります

6. flex + justify-content

<div>
  <div>Demo</div>
</div>

<style>
  .parent {
    display: flex;
    justify-content: center;
  }
</style>

親ノードの属性を設定するだけでよく、子要素を設定する必要はありません

flex には互換性の問題があります

垂直方向のセンタリング:

1、table-cell +vertical-align

<div>
  <div>Demo</div>
</div>

<style>
  .parent {
    display: table-cell;
    vertical-align: middle;
  }
</style>

優れた互換性 (IE 8 より前のバージョンでは、ページ構造を table

2、絶対値 + 変換

) 強力な絶対値に調整する必要があります問題はもちろん非常に単純です

<div>
  <div>Demo</div>
</div>

<style>
  .parent {
    position: relative;
  }
  .child {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
</style>

絶対配置はドキュメント フローの外にあり、後続の要素のレイアウトには影響しません。しかし、絶対配置された要素が唯一の要素である場合、親要素も失われます。高さ。

transform は CSS3 属性です。 互換性の問題
同じレベルでの中央揃え、これは margin-top を使用しても実現できます。原理は水平方向の中央揃えです

3. flex + align-items

の場合彼は最も強力なストロングなので、フレックスはただの笑顔です...しかし、互換性の問題があります

<div>
  <div>Demo</div>
</div>

<style>
  .parent {
    display: flex;
    align-items: center;
  }
</style>

水平方向と垂直方向のセンタリング: 絶対 + 変換

<div>
  <div>Demo</div>
</div>

<style>
  .parent {
    position: relative;
  }
  .child {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
</style>

1.後続の要素のレイアウトには影響しません

transform は CSS3 属性であり、互換性の問題があります

2. inline-block + text-align + table-cell +vertical-align

<div>
  <div>Demo</div>
</div>

<style>
  .parent {
    text-align: center;
    display: table-cell;
    vertical-align: middle;
  }
  .child {
    display: inline-block;
  }
</style>

優れた互換性

3. flex + justify-content + align-items

<div>
  <div>Demo</div>
</div>

<style>
  .parent {
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /*垂直居中*/
  }
</style>

親ノードの属性を設定するだけでよく、子要素を設定する必要はありません

厄介な互換性の問題

1つの列は固定幅で、もう1つの列は固定幅ですadaptive

1. float + margin

<div>
  <div>
    <p>left</p>
  </div>
  <div>
    <p>right</p>
    <p>right</p>
  </div>
</div>

<style>
  .left {
    float: left;
    width: 100px;
  }
  .right {
    margin-left: 100px
    /*间距可再加入 margin-left */
  }
</style>

IE 6 には 3 ピクセルのバグが存在します。もちろん、この小さなバグを解決する方法もあります:

<div>
  <div>
    <p>left</p>
  </div>
  <div>
    <div>
      <p>right</p>
      <p>right</p>
    </div>
  </div>
</div>

<style>
  .left {
    float: left;
    width: 100px;
  }
  .right-fix {
    float: right;
    width: 100%;
    margin-left: -100px;
  }
  .right {
    margin-left: 100px
    /*间距可再加入 margin-left */
  }
</style>

このメソッドには 3 ピクセルのバグはありません。 IE 6 では、.left は選択できず、レベルを上げるには .left {position:relative} を設定する必要があります。傲慢なプログラマは、レベルが低すぎるブラウザを放棄する必要があります。 -level. 2. float + overflow

<div>
  <div>
    <p>left</p>
  </div>
  <div>
    <p>right</p>
    <p>right</p>
  </div>
</div>

<style>
  .left {
    float: left;
    width: 100px;
  }
  .right {
    overflow: hidden;
  }
</style>

<span style="font-family: 微软雅黑, Microsoft YaHei;">IE 6 中会有3像素的 BUG，解决方法可以在 .left 加入 margin-left:-3px 当然也有解决这个小bug的方案如下：</span> overflow: hidden を設定すると、BFC モード (ブロック フォーマット コンテキスト) のブロック レベルのフォーマット コンテキストがトリガーされます。 BFCとは何ですか？平たく言えば、BFC 内で何をしても、外の世界には影響がありません。このメソッドはシンプルなスタイルですが、IE 6

3 をサポートしていません。 table

<div>
  <div>
    <p>left</p>
  </div>
  <div>
    <p>right</p>
    <p>right</p>
  </div>
</div>

<style>
  .parent {
    display: table;
    width: 100%;
    table-layout: fixed;
  }
  .left {
    display: table-cell;
    width: 100px;
  }
  .right {
    display: table-cell;
    /*宽度为剩余宽度*/
  }
</style>

table の表示特性は、各列のセル幅であり、テーブルの幅と等しくなければなりません。 table-layout: レンダリングを高速化し、レイアウトの優先順位も設定できるように修正されました。テーブルセルではマージンを設定できませんが、スペースはパディングで設定できます

4、flex

<div>
  <div>
    <p>left</p>
  </div>
  <div>
    <p>right</p>
    <p>right</p>
  </div>
</div>

<style>
  .parent {
    display: flex;
  }
  .left {
    width: 100px;
    margin-left: 20px;
  }
  .right {
    flex: 1;
  }
</style>

低バージョンのブラウザ互換性の問題パフォーマンスの問題、小規模レイアウトにのみ適しています

私たちは1列であることを学んでいますアダプティブ レイアウトの後は、複数列の固定幅、1 列のアダプティブ、複数の列の可変幅、1 列のアダプティブも簡単に実装できます。ここでは 1 つずつ説明しません。自分で試してみることもできますし、以前学習した

:

1、float

<div>
  <div>
    <p>1</p>
  </div>
  <div>
    <p>2</p>
  </div>
  <div>
    <p>3</p>
  </div>
  <div>
    <p>4</p>
  </div>
</div>
<style>
  .parent {
    margin-left: -20px;
  }
  .column {
    float: left;
    width: 25%;
    padding-left: 20px;
    box-sizing: border-box;
  }
</style>

のような配布レイアウトを統合することもできます。この方法はIE8以降と完全に互換性があります

2。 、flex

<div>
  <div>
    <p>1</p>
  </div>
  <div>
    <p>2</p>
  </div>
  <div>
    <p>3</p>
  </div>
  <div>
    <p>4</p>
  </div>
</div>


<style>
  .parent {
    display: flex;
  }
  .column {
    flex: 1;
  }
  .column+.column { /* 相邻兄弟选择器 */
    margin-left: 20px;
  }
</style>

は強力でシンプルですが、互換性の問題があります

3、table

<div>
  <div>
    <div>
      <p>1</p>
    </div>
    <div>
      <p>2</p>
    </div>
    <div>
      <p>3</p>
    </div>
    <div>
      <p>4</p>
    </div>
  </div>
</div>

<style>
  .parent-fix {
    margin-left: -20px;
  }
  .parent {
    display: table;
    width: 100%;
    /*可以布局优先，也可以单元格宽度平分在没有设置的情况下*/
    table-layout: fixed;
  }
  .column {
    display: table-cell;
    padding-left: 20px;
  }
</style>

など、高レイアウト

1の特徴は、それぞれの列です。幅が等しく、各行の高さが等しいため、この要件を解決することができます

<div>
  <div>
    <p>left</p>
  </div>
  <div>
    <p>right</p>
    <p>right</p>
  </div>
</div>

<style>
  .parent {
    display: table;
    width: 100%;
    table-layout: fixed;
  }
  .left {
    display: table-cell;
    width: 100px;
  }
  .right {
    display: table-cell
    /*宽度为剩余宽度*/
  }
</style>

2。

<div>
  <div>
    <p>left</p>
  </div>
  <div>
    <p>right</p>
    <p>right</p>
  </div>
</div>

<style>
  .parent {
    display: flex;
  }
  .left {
    width: 100px;
    margin-left: 20px;
  }
  .right {
    flex: 1;
  }
</style>

注意这里实际上使用了 align-items: stretch，flex 默认的 align-items 的值为 stretch

3、float

<div>
  <div>
    <p>left</p>
  </div>
  <div>
    <p>right</p>
    <p>right</p>
  </div>
</div>

<style>
  .parent {
    overflow: hidden;
  }
  .left,
  .right {
    padding-bottom: 9999px;
    margin-bottom: -9999px;
  }
  .left {
    float: left;
    width: 100px;
    margin-right: 20px;
  }
  .right {
    overflow: hidden;
  }
</style>

此方法为伪等高（只有背景显示高度相等），左右真实的高度其实不相等。 兼容性较好。

到此，我们了解常见的布局解决方案，这些只是参考，一样的布局实现方式多种多样。主要就使用position、flex 、table（从很久很久以前起，我们就抛弃了table布局页面，但display: table;是异常强大）、float等属性目前flex兼容性较差。

相关文章推荐：

常见css水平自适应布局_html/css_WEB-ITnose

DIV+CSS布局中常见的10大错误_html/css_WEB-ITnose

CSS常用布局实现方法_html/css_WEB-ITnose

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