Was sind die gängigen Layouts in CSS? Einführung in 5 gängige Layouts

In diesem Artikel erfahren Sie, welche gängigen Layouts in CSS verwendet werden. Eine Einführung in 5 gängige Layouts. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

In diesem Artikel werden die folgenden 5 gängigen Layouts vorgestellt:

• Einspaltiges Layout

• Zwei Spalten Adaptives Layout

• Shengfei-Layout und Doppelflügler-Layout

• Pseudokontur-Layout

• Klebelayout

1. Einspaltiges Layout

1. Gängiges einspaltiges Layout:

• Einspaltiges Layout mit gleicher Breite von Kopf-, Inhalts- und Fußzeile

• Kopfzeile und ein einspaltiges Layout mit gleicher Fußzeilenbreite und etwas schmalerem Inhalt

2. So implementieren Sie

Für den ersten Typ, zuerst Durch einheitliches Festlegen der Breite: 1000 Pixel für Kopfzeile, Inhalt und Fußzeile; oder maximale Breite: 1000 Pixel (der Unterschied zwischen den beiden besteht darin, dass ersteres eine hat, wenn der Bildschirm kleiner als 1000 Pixel ist Scrollleiste, letztere jedoch nicht, und die tatsächliche Breite wird angezeigt); Stellen Sie dann margin:auto ein, um eine Zentrierung zu erreichen.

<p></p>
<p></p>
<p></p>

.header{
    margin:0 auto; 
    max-width: 960px;
    height:100px;
    background-color: blue;
}
.content{
    margin: 0 auto;
    max-width: 960px;
    height: 400px;
    background-color: aquamarine;
}
.footer{
    margin: 0 auto;
    max-width: 960px;
    height: 100px;
    background-color: aqua;
}

Für den zweiten Typ wird die Inhaltsbreite der Kopf- und Fußzeile nicht festgelegt und die Elemente auf Blockebene füllen den gesamten Bildschirm aus, aber die Inhaltsbereiche der Kopf-, Inhalts- und Fußzeile werden auf die festgelegt gleiche Breite und zentriert durch margin:auto.

<p>
    </p><p></p>

<p></p>
<p></p>

2. Zweispaltiges adaptives Layout

Zweispaltiges adaptives Layout bedeutet, dass eine Spalte vom Inhalt und die andere Spalte geöffnet wird wird mit dem restlichen Inhalt gefüllt. Breitenlayoutmethode

1.float+overflow:hidden

Wenn es sich um ein gewöhnliches zweispaltiges Layout handelt , float + gewöhnlicher Elementrand kann implementiert werden, aber wenn es sich um ein adaptives zweispaltiges Layout handelt, kann es mit float+overflow:hidden implementiert werden. Diese Methode löst hauptsächlich BFC aus Überlauf und BFC werden das Element nicht überlappen und schweben lassen. Da die Einstellung overflow:hidden das haslayout-Attribut des IE6-Browsers nicht auslöst, muss zoom:1 so eingestellt werden, dass es mit dem IE6-Browser kompatibel ist. Der spezifische Code lautet wie folgt:

.header{
    margin:0 auto;
    max-width: 960px;
    height:100px;
    background-color: blue;
}
.nav{
    margin: 0 auto;
    max-width: 800px;
    background-color: darkgray;
    height: 50px;
}
.content{
    margin: 0 auto;
    max-width: 800px;
    height: 400px;
    background-color: aquamarine;
}
.footer{
    margin: 0 auto;
    max-width: 960px;
    height: 100px;
    background-color: aqua;
}

Hinweis: Wenn sich die Seitenleiste rechts befindet, achten Sie auf die Renderreihenfolge. Das heißt, schreiben Sie in HTML zuerst die Seitenleiste und dann den Hauptinhalt

2. Flex-Layout, auch flexible Box genannt Mit dem Layout können Sie das Layout verschiedener Seiten mit nur wenigen Codezeilen realisieren.

<p>
    </p><p>
        </p><p>left</p>
    

right

right

3.Gitterlayout

Gitterlayout ist ein gitterbasiertes zweidimensionales Layoutsystem, das zur Optimierung des Benutzeroberflächendesigns entwickelt wurde.

.parent {
  overflow: hidden;
  zoom: 1;
}
.left {
  float: left;
  margin-right: 20px;
}
.right {
  overflow: hidden;
  zoom: 1;
}

Dreispaltiges Layout

Features: adaptive Breite der mittleren Spalte, feste Breite auf beiden Seiten, Da Es gibt viele Möglichkeiten, ein dreispaltiges Layout zu implementieren (Sie können auf mehrere Methoden klicken, um ein dreispaltiges Layout zu erreichen. Dieser Artikel konzentriert sich auf das Holy Grail-Layout und das Doppelflügel-Layout).

1. Holy Grail Layout

① Funktionen

Ein spezielleres dreispaltiges Layout , das gleiche Es ist auch auf beiden Seiten fest und in der Mitte adaptiv. Der einzige Unterschied besteht darin, dass die DOM-Struktur zuerst in die mittlere Spalte geschrieben werden muss, damit die mittlere Spalte zuerst geladen werden kann.

//html部分同上
.parent {
  display:flex;
}  
.right {
  margin-left:20px; 
  flex:1;
}

//html部分同上
.parent {
  display:grid;
  grid-template-columns:auto 1fr;
  grid-gap:20px
}

Stellen Sie die drei Teile so ein, dass sie nach links schweben,

in derselben Zeile wie die mittlere Spalte zu sein. Stellen Sie dann die Breite der Mitte auf 100 % ein (
• , um den adaptiven Inhalt der mittleren Spalte zu realisieren

  . Zu diesem Zeitpunkt springen der linke und der rechte Teil zur nächsten Zeile ).

Indem Sie margin-left auf einen negativen Wert setzen, sorgen Sie dafür, dass der linke und der rechte Teil auf die gleiche Linie wie der Mittelteil zurückkehren

Indem Sie den Abstand links und rechts des übergeordneten Containers festlegen, lassen Sie auf der linken und rechten Seite eine Lücke.

Durch Einstellen der relativen Positionierung verschieben Sie den linken und rechten Teil auf beide Seiten.

③ Nachteile

Die Mindestbreite des Mittelteils kann nicht sein kleiner als die Breite des linken Teils, sonst fällt der linke Teil in die nächste Zeile

④ 伪等高布局

等高布局是指子元素在父元素中高度相等的布局方式。等高布局的实现包括伪等高和真等高,伪等高只是看上去等高而已,真等高是实实在在的等高。

此处我们通过伪等布局便可解决圣杯布局的第二点缺点，因为背景是在padding区域显示的，设置一个大数值的padding-bottom，再设置相同数值的负的margin-bottom，并在所有列外面加上一个容器，并设置overflow:hidden把溢出背景切掉。这种可能实现多列等高布局，并且也能实现列与列之间分隔线效果，结构简单，兼容所有浏览器。新增代码如下：

      .center,
      .left,
      .right {
        padding-bottom: 10000px;
        margin-bottom: -10000px;
      }
      .container {
        padding-left: 220px;
        padding-right: 220px;
        overflow: hidden;//把溢出背景切掉
      }

2.双飞翼布局

① 特点

同样也是三栏布局，在圣杯布局基础上进一步优化，解决了圣杯布局错乱问题，实现了内容与布局的分离。而且任何一栏都可以是最高栏，不会出问题。

    .container {
        min-width: 600px;//确保中间内容可以显示出来，两倍left宽+right宽
    }
    .left {
        float: left;
        width: 200px;
        height: 400px;
        background: red;
        margin-left: -100%;
    }
    .center {
        float: left;
        width: 100%;
        height: 500px;
        background: yellow;
    }
    .center .inner {
        margin: 0 200px; //新增部分
    }
    .right {
        float: left;
        width: 200px;
        height: 400px;
        background: blue;
        margin-left: -200px;
    }

    <article>
        <p>
            </p>
<p>双飞翼布局</p>
        
        <p></p>
        <p></p>
    </article>

② 实现步骤(前两步与圣杯布局一样)

• 三个部分都设定为左浮动，然后设置center的宽度为100%，此时，left和right部分会跳到下一行；

• 通过设置margin-left为负值让left和right部分回到与center部分同一行；

• center部分增加一个内层p，并设margin: 0 200px；

③ 缺点

多加一层 dom 树节点，增加渲染树生成的计算量。

3.两种布局实现方式对比:

• 两种布局方式都是把主列放在文档流最前面，使主列优先加载。

• 两种布局方式在实现上也有相同之处，都是让三列浮动，然后通过负外边距形成三列布局。

• 两种布局方式的不同之处在于如何处理中间主列的位置：
  圣杯布局是利用父容器的左、右内边距+两个从列相对定位；
  双飞翼布局是把主列嵌套在一个新的父级块中利用主列的左、右外边距进行布局调整

四、粘连布局

1.特点

• 有一块内容<main></main>，当<main></main>的高康足够长的时候，紧跟在<main></main>后面的元素<footer></footer>会跟在<main></main>元素的后面。

• 当<main></main>元素比较短的时候(比如小于屏幕的高度),我们期望这个<footer></footer>元素能够“粘连”在屏幕的底部

当main足够长时

当main比较短时

具体代码如下：

    <p>
      </p><p>
        main <br>
        main <br>
        main <br>
      </p>
    
    <p>footer</p>

   * {
        margin: 0;
        padding: 0;
      }
      html,
      body {
        height: 100%;//高度一层层继承下来
      }
      #wrap {
        min-height: 100%;
        background: pink;
        text-align: center;
        overflow: hidden;
      }
      #wrap .main {
        padding-bottom: 50px;
      }
      #footer {
        height: 50px;
        line-height: 50px;
        background: deeppink;
        text-align: center;
        margin-top: -50px;
      }

2.实现步骤

(1)footer必须是一个独立的结构，与wrap没有任何嵌套关系

(2)wrap区域的高度通过设置min-height，变为视口高度

(3)footer要使用margin为负来确定自己的位置

(4)在main区域需要设置 padding-bottom。这也是为了防止负 margin 导致 footer 覆盖任何实际内容。

Das obige ist der detaillierte Inhalt vonWas sind die gängigen Layouts in CSS? Einführung in 5 gängige Layouts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!