简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Heim
Artikel
Fragen und Antworten
Kurs
Thema
Herunterladen
Spiel
Wörterbuch
kürzliche Updates

Heim  >  Artikel  >  Web-Frontend  >  Was sind die nativen CSS-Layoutmethoden?

Was sind die nativen CSS-Layoutmethoden?

零下一度
零下一度Original
2017-06-26 09:14:451106Durchsuche

Vorwort

Es gibt tatsächlich viele Methoden für das native Layout von Webseiten im Internet, wahrscheinlich Flow (Flow-Layout-Modell), Float (Floating-Layout-Modell) und Layer (hierarchisches Layout-Modell).
fc430c7db1eecf4621f4fc8a5479f894

Flow-Layout

Das Flow-Layout-Modell ist eigentlich der Standard-Layoutmodus für Webseiten. Das heißt, die HTML-Webelemente der Webseite verteilen im Standardzustand den Webseiteninhalt gemäß dem Flussmodell.
Das Flusslayout weist zwei typische Merkmale auf.
Erstens werden Elemente auf Blockebene vertikal und sequentiell von oben nach unten innerhalb des nächstgelegenen übergeordneten Containerelements verteilt, da die Breite von Elementen auf Blockebene standardmäßig 100 beträgt % (d. h. 100 % der Breite des übergeordneten Elements). Tatsächlich nehmen Blockelemente ihre Position in Form von Reihen ein. Wie im folgenden Code gezeigt: 

<html><body><h1>我是h1</h1><div>我是div</div></body></html>

Wie im obigen Code gezeigt, beträgt die Breite von h1 und div ohne den Einfluss externer Stile 100 % (die Standardbreite der Seite).
Zweitens werden im Flussmodell Inline-Elemente horizontal von links nach rechts innerhalb des nächstgelegenen übergeordneten Containerelements angezeigt. 

<html><body><a>我是a</a><span>我是span</span></body></html>

Inline-Elemente belegen keine eigene Zeile wie Elemente auf Blockebene.

Float-Layout

Jedes Element befindet sich standardmäßig im gesamten Dokumentfluss und wird nicht schweben. Wenn wir Float auf ein Element setzen, können wir das Element aus dem aktuellen Dokumentfluss entfernen und zu einem Floating-Element werden lassen.
Der folgende Code legt Float für das div-Element fest, sodass die beiden divs nebeneinander angezeigt werden können. 

div{width:200px;height:200px;border:2px red solid;float:left;
}
<div id="div1">我是div1</div>
<div id="div2">我是div2</div>

Eine Sache, die hier zu beachten ist, ist, dass, wenn der Float, den ich für das Div festgelegt habe, float: right ist, div1 an der rechten Seite und div2 an der linken Seite angehängt wird Seite von div1.

Ebenenlayout

Was ist das hierarchische Layoutmodell?

Das hierarchische Layoutmodell ähnelt der sehr beliebten Ebenenbearbeitungsfunktion in der Bildsoftware PhotoShop. Aufgrund der Mobilität der Webseitengröße kann jedoch jede Ebene genau positioniert und bedient werden , das hierarchische Layoutmodell Es war kein Hit. Die lokale Verwendung des hierarchischen Layouts auf einer Webseite bietet jedoch immer noch Vorteile.
Das hierarchische Layout einer Anwendung erfordert häufig die Zusammenarbeit von Positionierungsattributen. Es gibt 3 Positionierungstypen in CSS:

  • Absolute Positionierung (Position: absolut)

  • Relative Positionierung (Position: relativ)

  • Feste Positionierung (Position: fest)

Absolute Positionierung

Wenn Sie für ein Element eine absolute Positionierung im hierarchischen Layoutmodell festlegen möchten , müssen Sie position:absolute (was absolute Positionierung bedeutet) festlegen. Die Funktion dieser Anweisung besteht darin, das Element aus dem Dokumentfluss zu ziehen und dann die Attribute links, rechts, oben und unten zu verwenden, um eine absolute Positionierung relativ zu seinem Element durchzuführen Der nächstgelegene übergeordnete Block mit einem Positionierungsattribut. Wenn kein solcher enthaltender Block vorhanden ist, ist er relativ zum Body-Element, also relativ zum Browserfenster.

Relative Positionierung

Wenn Sie im hierarchischen Layoutmodell eine relative Positionierung für ein Element festlegen möchten, müssen Sie position: relative festlegen (gibt die relative Positionierung an), wodurch das Element durch die linke Seite bestimmt wird Die Attribute „rechts“, „oben“ und „unten“ sind eine versetzte Position im normalen Dokumentfluss. Der Prozess der relativen Positionierung besteht darin, zunächst ein Element im statischen (Float-)Modus zu erzeugen (und das Element schwebt wie eine Ebene) und sich dann relativ zur vorherigen Position zu bewegen. Die Richtung und Amplitude der Bewegung werden durch die linke und rechte Position bestimmt , oben und unten bleibt die Position vor dem Versatz unverändert.
Der größte Unterschied zwischen relativer Positionierung und absoluter Positionierung besteht darin, dass erstere nicht vom aktuellen Dokumentenfluss und letztere vom aktuellen Dokumentenfluss getrennt wurde. Das Trennen vom aktuellen Dokumentfluss bedeutet, dass die Elemente vor und nach dem Element bei der Berechnung von Position und Versatz nicht mehr die Größe und Position des Elements berechnen.

Feste Positionierung

Position: fest, was auf eine feste Positionierung hinweist, ähnlich dem absoluten Positionierungstyp, aber seine relativen Bewegungskoordinaten sind die Ansicht (Webseitenfenster innerhalb des Bildschirms) selbst. Da die Ansicht selbst fest ist, ändert sie sich beim Scrollen der Bildlaufleiste des Browserfensters nicht, es sei denn, Sie verschieben die Bildschirmposition des Browserfensters auf dem Bildschirm oder ändern die Anzeigegröße des Browserfensters, sodass dies bei fest positionierten Elementen der Fall ist immer an einer bestimmten Position der Ansicht innerhalb des Browserfensters, die vom Fluss des Dokuments nicht beeinflusst wird. Dies hat die gleiche Funktion wie das Attribut „background-attachment:fixed“ (wird zur Positionierung der Position des Hintergrundbilds verwendet). .
Eine feste Positionierung ist in bestimmten Szenarien nützlich, wenn wir ein bestimmtes Element fest an einer bestimmten Position auf der Seite anzeigen müssen, ohne dass es durch die Bildlaufleiste der Seite beeinträchtigt wird. Zum Beispiel die übliche Schaltfläche „Zurück nach oben“.

Gemischte Verwendung

Im modernen Webseitenlayout werden relative Positionierung und absolute Positionierung häufig gemischt, um flexiblere Zwecke zu erreichen. Der folgende Code 

<style>#box1{width:200px;height:200px;position:relative; /* 前辈元素的定位必须设置为relative */
}#box2{position:absolute; /* 相对于最近的一个定位设置为relative的前辈元素的绝对定位 */top:20px;left:30px;
}</style><div id="box1"><div id="box2">相对参照元素进行定位</div></div>

bedeutet, dass Box2 relativ zu Box1 absolut positioniert ist. Wenn die Position von Box1 geändert wird, ändern sich die untergeordneten Elemente in Box1 nicht, da sie alle absolut relativ zu Box1 positioniert sind.

Gemeinsame Layoutmethode (zwei Spalten)

Bei zwei Spalten beträgt die Breite auf der linken Seite vorläufig 100PX

Methode eins: 

 float + calc().right {width: calc(100% - 100px);
}

Methode zwei: 

position / float + margin-left//html部分同上//css.left {  position:absolute;left: 0; /*或 float:left; */  width: 100px;  background: blue;
}
.right{  margin-left: 100px;  background: red;  text-align:center;
}

Wie kann in einem zweispaltigen Layout die linke Seite fixiert und die rechte Seite adaptiv sein?

1. Float auf der linken Seite, margin-left auf der rechten Seite verwenden. Die Länge ist die feste Breite auf der linken Seite und die Breite beträgt 100 %

2.利用的是创建一个新的BFC（块级格式化上下文）来防止文字环绕的原理来实现的。BFC就是一个相对独立的布局环境，它内部元素的布局不受外面布局的影响。它可以通过以下任何一种方式来创建：

  • float的值不为none

  • position的值不为static或者relative

  • display的值为 table-cell, table-caption, inline-block, flex, 或者 inline-flex中的其中一个

  • overflow的值不为visible

三列布局左右固定中间自适应

圣杯

思路

首先有三行，头部和尾部各占一行，中间内容区一行，头尾不重要
中间内容分为三列对应三个div,为了先展示中间的主要内容所以把中间那列放前面，然后是左和右对应的div
中间内容自适应宽度为100%，此时已经把3个div所在的父容器占满了，所以想办法让左右2个div放置在左右侧，
左侧采取margin-left取-100%让其在最左侧，

右侧同理取值-200px(像素值为宽度大小)，保证刚好占满自身宽度
这时候测试发现已经有自适应效果了，但是缩小到一定程度页面就出问题了，左右不在了，
所以加上最低宽度就是左右2个DIV的宽度（另外得考虑浏览器默认的body下的margin为8px,做了样式重置不考虑）
这时候发现中间的内容文字被左右遮挡了，对父容器用pading左右值为左右元素宽度，
为什么不对中间的DIV设置padding,我发现设置了不起作用，具体的原因我暂时也搞不懂来龙去脉，
发现padding后左右有留白，这个时候左边需要用 left: -200px;position: relative;来设置DIV位置，
办法确实巧妙。右边实现同理。

这时候发现已经大致有了点样子了，效果也看的到，此时典型的三栏布局，左右固定，中间内容自适应已经完成。

总结：

其实这个布局已经有点年头（圣杯布局），通过左右两块DIV来遮挡了中间div宽度为100%的区域，
然后压缩了三个DIV共有的父容器，来实现对中间内容展示的完善，也使左右2个不在遮挡中间了。
然后我又趁机试了下z-index属性，这里有个小问题要注意（要让z-index起作用有个小小前提，
就是元素的position属性要是relative，absolute或是fixed）

我之前的想法是让中间的内容置于顶层，不受div会因为某种hack导致位置变更遮挡了中间内容。
只需要设置下z-index属性值即可，左右可不设置，也可以设置以防万一，不同浏览器对z-index的默认值解析不同，可能会导致问题。

基本的布局架构就是如此，根据实际项目需求在此架构上完善，或者以后遇到这种类似的问题能打开思路，便算是有点收获了。

核心代码

  <style>body {/*因为浏览器默认body为margin:8px所以多加了16px*/min-width: 616px;
        }header {width: 100%;height: 40px;background-color: darkseagreen;
        }.container {/*height: 200px;*//*overflow: hidden;*/padding: 0 200px;
        }.middle {width: 100%;height: 200px;background-color: deeppink;float: left;/*position: relative;*/
        }.left {width: 200px;height: 200px;background-color: blue;float: left;margin-left: -100%;left: -200px;position: relative;
        }.right {width: 200px;height: 200px;background-color: darkorchid;float: left;margin-left: -200px;right: -200px;position: relative;
        }footer {clear: both;width: 100%;height: 30px;background-color: darkslategray;
        }</style>
<header><h4>Header内容区</h4></header><div class="container"><div class="middle"><h4>中间弹性区</h4><p>
                我是各种内容我是各种内容我是各种内容我是各种内容我是各种内容我是各种内容我是各种内容我是各种内容我是各种内容我是各种内容我是各种内容我是各种内容我是各种内容我是各种内容我是各种内容我是各种内容我是各种内容我是各种内容</p></div><div class="left"><h4>左边栏</h4></div><div class="right"><h4>右边栏</h4></div></div><footer><h4>Footer内容区</h4></footer>

双飞翼

思路

双飞翼布局的方式跟圣杯在前部分是一样，不同之处主要在于如何处理中间的内容块被遮挡的问题
圣杯用padding的思路，使之压缩，但是父容器压缩，左右DIV位置变更，只能用相对位置进行left
设置位移为元素宽度来调整
而双飞翼的路线为采用的方式相比圣杯的父容器padding，
改变的是中间内容的内层div的外边框，相对来说对布局的破坏不大，
但是要采用这种方式又不破坏页面结构，就只能在中间内容div内部的再加个DIV设置margin或padding.
使之内容变相“压缩”等同padding效果，并且不会改变中间内容DIV外部的结构，只是内部的。
细心的人留意下我注释的代码，这里其实还有个CSS浮动的样式问题，出现这种情况有各种方式清除浮动，
我就不多讲解。大概有6种。

清除浮动(常用)

1.一般目前常用就是用：after伪元素给使用的浮动的父容器设置。

     新浪使用方式.clearfix:after{ content: &#39;&#39;;display: block;clear: both;height: 0;visibility: hidden;
        }.clearfix:after{  /*最简方式*/content: &#39;&#39;;display: block;clear: both;
        }

2.给父元素定高

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title></title><style>.outer{border: 1px solid black;width: 300px;height: 50px;
        }.inner{width: 50px;height: 50px;background-color: #ff4400;margin-right: 20px;float: left;
        }.footer{background-color: #005FC3;width: 200px;height: 100px;
        }</style></head><body><div class="outer"><div class="inner"></div><div class="inner"></div><div class="inner"></div></div><div class="footer"></div></body></html>

3.利用 overflow:hidden 属性

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title></title><style>.outer{border: 1px solid black;width: 300px;overflow: hidden;zoom: 1;/*兼容 IE*/
        }.inner{width: 50px;height: 50px;background-color: #ff4400;margin-right: 20px;float: left;
        }.footer{background-color: #005FC3;width: 200px;height: 100px;
        }</style></head><body><div class="outer"><div class="inner"></div><div class="inner"></div><div class="inner"></div></div><div class="footer"></div></body></html>

核心代码

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>双飞翼</title><style>header {width: 100%;height: 40px;background-color: darkseagreen;
        }.container {/*height: 200px;*//*overflow: hidden;*/
        }.middle {width: 100%;height: 200px;background-color: deeppink;float: left;word-break: break-all;
        }.left {width: 200px;height: 200px;background-color: blue;float: left;margin-left: -100%;
        }.right {width: 200px;height: 200px;background-color: darkorchid;float: left;margin-left: -200px;
        }footer {width: 100%;height: 30px;background-color: darkslategray;clear: both;
        }.div-middle {margin: 0 200px;/*padding: 0 200px;*/
        }</style></head><body><header><h4>Header内容区</h4></header><div class="container"><div class="middle"><div class="div-middle"><h4>中间弹性区</h4><p>
                    我是各种内容我是各种内容我是各种内容我是各种内容我是各种内容我是各种内容我是各种内容我是各种内容我是各种内容我是各种内容我是各种内容我是各种内容我是各种内容我是各种内容我是各种内容我是各种内容我是各种内容我是各种内容</p></div></div><div class="left"><h4>左边栏</h4></div><div class="right"><h4>右边栏</h4></div></div><footer><h4>Footer内容区</h4></footer></body></html>

End

本篇只做阶段性的初级总结，原谅我没有贴出代码的效果图，以后有机会再扩展并进行效果图片展示，希望大家自己在编辑器下尝试效果。


学习过程中遇到什么问题或者想获取学习资源的话，欢迎加入学习交流

Das obige ist der detaillierte Inhalt vonWas sind die nativen CSS-Layoutmethoden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Detaillierte Erläuterung der Grunt-komprimierten Bilder und JS-BeispieleNächster Artikel：Detaillierte Erläuterung der Grunt-komprimierten Bilder und JS-Beispiele

In Verbindung stehende Artikel

Mehr sehen