Was sind die CSS-Layouts? Gängige CSS-Layoutmethoden (mit Code)

Was sind die CSS-Layouts? Das CSS-Layout kann dafür sorgen, dass die Seite schöner und aufgeräumter aussieht. Der folgende Artikel fasst einige gängige Layoutmethoden in CSS zusammen. Schauen wir uns dies im Detail an.

Horizontal zentriertes Layout

1. Rand + feste Breite

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

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

Ausführen Ergebnis:

Sie müssen es am vorderen Ende gesehen haben. Diese feste Breite ist horizontal zentriert. Wir können auch Folgendes verwenden, um eine variable Breite zu erreichen

2. Tabelle + Rand

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

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

Laufergebnis:

Anzeige: Tabelle ähnelt in der Leistung dem Blockelement, aber das width ist die Breite des Inhalts.

Es ist nicht erforderlich, den übergeordneten Elementstil festzulegen (unterstützt IE 8 und höher). Kompatibel mit IE 8. Die folgenden Versionen müssen an

angepasst werden.

3. block + text-align

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

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

Gute Kompatibilität (sogar kompatibel mit IE 6 und IE 7)

4. absolut + margin-left

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

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

Breite fest

hat eine bessere Kompatibilität als die Verwendung von Transformation

5. Absolut + Transformation

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

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

Absolute Positionierung bricht nicht vom Dokument ab Fluss. Beeinflusst das Layout nachfolgender Elemente.

transform ist ein CSS3-Attribut und weist Kompatibilitätsprobleme auf

6.

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

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

Sie müssen nur das übergeordnete Knotenattribut festlegen , es muss nicht festgelegt werden. Untergeordnetes Element

flex hat Kompatibilitätsprobleme

vertikale Zentrierung:

1. table-cell + Vertical -align

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

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

Gute Kompatibilität (Versionen unter IE 8 müssen die Seitenstruktur an die Tabelle anpassen

2, absolute + transform

Leistungsstarkes Absolut ist für dieses kleine Problem natürlich sehr einfach

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

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

Absolute Positionierung erfolgt außerhalb des Dokumentflusses und hat keinen Einfluss auf das Layout nachfolgender Elemente Als einziges Element geht auch das übergeordnete Element verloren.

Die horizontale Zentrierung kann auch mit der horizontalen Zentrierung erreicht werden.

3. Flex + Align-Items

Wenn Absolut mächtig ist, dann ist Flex nur ein Witz, weil es am stärksten ist. Aber es gibt Kompatibilitätsprobleme.

Horizontale und vertikale Zentrierung:

1. absolut + transformieren

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

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

Absolute Positionierung unterbricht den Dokumentenfluss und hat keinen Einfluss auf das Layout nachfolgender Elemente. transform ist ein CSS3-Attribut und weist Kompatibilitätsprobleme auf.

2 -align

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

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

Gute Kompatibilität

3. Flex + justify-content + align-items

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

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

Sie müssen nur die festlegen Attribute des übergeordneten Knotens, keine Notwendigkeit, die untergeordneten Elemente festzulegenSchmerzhafte Kompatibilitätsprobleme

Eine Spalte hat eine feste Breite und eine Spalte ist adaptiv

1. float + margin

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

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

<span style="font-family: Microsoft YaHei, Microsoft YaHei;">Es wird ein 3-Pixel geben FEHLER in IE 6. Die Lösung kann margin-left zu .left:- 3px hinzugefügt werden. Natürlich gibt es auch Lösungen, um diesen kleinen Fehler wie folgt zu beheben: <strong></strong></span>

<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>

Diese Methode wird den 3-Pixel-BUG in IE 6 nicht haben, aber .left kann nicht ausgewählt werden und .left {position muss festgelegt werden: relativ}, um den Pegel zu erhöhen. Beachten Sie, dass diese Methode dem HTML-Text unnötige Struktur hinzufügt.

Arrogante Programmierer sollten Browser mit zu niedriger Version aufgeben<span style="font-family: 微软雅黑, Microsoft YaHei;">IE 6 中会有3像素的 BUG，解决方法可以在 .left 加入 margin-left:-3px 当然也有解决这个小bug的方案如下：</span>

2. float + overflow

<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>

Einstellen von Überlauf: Ausgeblendet löst den BFC-Modus (Block Formatting Context) aus ) Formatierungskontext auf Blockebene. Was ist BFC? Laienhaft ausgedrückt: Ganz gleich, was Sie innerhalb von BFC tun, die Außenwelt wird dadurch nicht beeinträchtigt. Diese Methode hat einen einfachen Stil, unterstützt jedoch nicht IE 6

3. Die Anzeigeeigenschaften der Tabelle

<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>

Tabelle sind die Zellenbreite jeder Spalte und müssen gleich sein zur Tischbreite. Tabellenlayout: Fixed kann das Rendern beschleunigen und auch die Layout-Priorität festlegen. Der Rand kann nicht in der Tabellenzelle festgelegt werden, aber der Abstand kann durch Auffüllen eingestellt werden

4. Flex

<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>

Probleme mit der Browserkompatibilität bei niedriger Version Leistungsproblem, es ist nur für kleine Layouts geeignet

Nachdem wir das Layout einer Spalte mit fester Breite und einer Spalte mit adaptivem Layout gelernt haben, können wir auch problemlos mehrere Spalten mit fester Breite, eine Spalte mit adaptiver Breite und mehrere implementieren Spalten mit variabler Breite und eine Spalte mit adaptivem Layout werden hier nicht einzeln erläutert. Sie können es selbst ausprobieren oder die zuvor erlernten

und andere Verteilungen konsolidieren

: 1, float

<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>

Diese Methode ist perfekt kompatibel mit IE8 und höher

2

<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>

ist leistungsstark und einfach, weist aber Kompatibilitätsprobleme auf.

3. Tabelle

<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>

Layout mit gleicher Höhe

1. Tabelle

Tabelle Die Eigenschaften jeder Spalte sind gleich breit und jede Zeile gleich hoch, was zur Lösung dieses Problems verwendet werden kann Anforderung

<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>

2, flexibel

<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

Das obige ist der detaillierte Inhalt vonWas sind die CSS-Layouts? Gängige CSS-Layoutmethoden (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!