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
Demo
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
Demo
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
3. block + text-align
Demo
Gute Kompatibilität (sogar kompatibel mit IE 6 und IE 7)
4. absolut + margin-left
Demo
Breite fest
hat eine bessere Kompatibilität als die Verwendung von Transformation
5. Absolut + Transformation
Demo
Absolute Positionierung bricht nicht vom Dokument ab Fluss. Beeinflusst das Layout nachfolgender Elemente.
transform ist ein CSS3-Attribut und weist Kompatibilitätsprobleme auf
6.
flex hat Kompatibilitätsprobleme
vertikale Zentrierung:
Leistungsstarkes Absolut ist für dieses kleine Problem natürlich sehr einfach
Demo
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
Demo
Absolute Positionierung unterbricht den Dokumentenfluss und hat keinen Einfluss auf das Layout nachfolgender Elemente.transform ist ein CSS3-Attribut und weist Kompatibilitätsprobleme auf.
Demo
Gute Kompatibilität
Demo
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
Demo
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:
left
right
right
Arrogante Programmierer sollten Browser mit zu niedriger Version aufgebenIE 6 中会有3像素的 BUG，解决方法可以在 .left 加入 margin-left:-3px 当然也有解决这个小bug的方案如下：
2. float + overflow
left
right
right
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
left
right
right
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
left
right
right
Probleme mit der Browserkompatibilität bei niedriger VersionLeistungsproblem, es ist nur für kleine Layouts geeignet
und andere Verteilungen konsolidieren
:1, float
left
right
right
Diese Methode ist perfekt kompatibel mit IE8 und höher
1
2
3
4
ist leistungsstark und einfach, weist aber Kompatibilitätsprobleme auf.
1
2
3
4
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
left
right
right
注意这里实际上使用了 align-items: stretch，flex 默认的 align-items 的值为 stretch
3、float
left
right
right
此方法为伪等高（只有背景显示高度相等），左右真实的高度其实不相等。 兼容性较好。
到此，我们了解常见的布局解决方案，这些只是参考，一样的布局实现方式多种多样。主要就使用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!
