Heim > Web-Frontend > HTML-Tutorial > Detaillierte Einführung in das HTML-Layout mit CSS

Detaillierte Einführung in das HTML-Layout mit CSS

高洛峰
Freigeben: 2017-03-24 11:16:20
Original
1176 Leute haben es durchsucht

Einspaltiges Layout horizontal zentriert

Horizontal zentriertSeitenlayout Das Die gebräuchlichste Layoutform, die hauptsächlich in Titeln und der Organisation von Inhaltsbereichen erscheint. Hier sind vier Möglichkeiten, eine horizontale Zentrierung zu erreichen (Hinweis: Was in jedem Beispiel unten implementiert wird, ist die Ausrichtungsoperation des untergeordneten Elements. Der übergeordnete Container des untergeordneten Elements element Es ist das übergeordnete Element)

Verwenden Sie inline-block und text-align, um

.parent{text-align: center;}
.child{display: inline-block;}
Nach dem Login kopieren

Vorteile: gute Kompatibilität zu erreichen;
Nachteile: müssen Untergeordnete Elemente gleichzeitig festlegen. Verwenden Sie

margin

:0 auto mit dem übergeordneten Element , um

.child{width:200px;margin:0 auto;}
Nach dem Login kopieren

zu implementieren. Vorteile: gute Kompatibilität.
Nachteile: müssen Geben Sie die Breite an

Verwenden Sie die Tabelle zum Implementieren

.child{display:table;margin:0 auto;}
Nach dem Login kopieren

Vorteile: Sie müssen sich nur selbst festlegen
Nachteile: IE6 und 7 müssen die Struktur anpassen

Verwendung absolute Positionierung zu implementieren

.parent{position:relative;}
/*或者实用margin-left的负值为盒子宽度的一半也可以实现,不过这样就必须知道盒子的宽度,但兼容性好*/
.child{position:absolute;left:50%;transform:translate(-50%);}
Nach dem Login kopieren

Nachteile: schlechte Kompatibilität, verfügbar für IE9 und höher

Praktische Flex-Layout-Implementierung

/*第一种方法*/.parent{display:flex;justify-content:center;}
/*第二种方法*/.parent{display:flex;}.child{margin:0 auto;}
Nach dem Login kopieren

Nachteile: schlechte Kompatibilität, wenn ein großflächiges Layout durchgeführt wird, kann die Effizienz beeinträchtigt werden

Vertical-align

vertical-align

Wir alle Wissen Sie, dass jeder unterschiedliche Hobbys hat und manche Menschen gerne Süßigkeiten essen, manche Menschen mögen es nicht, Sellerie zu essen, manche Menschen essen kein Hammelfleisch usw. Das Gleiche gilt für Einige von ihnen interessieren sich nur für Milch, andere hassen Milch und sind wählerisch Erwachsener, der Gelee isst, verliert die Beherrschung und ignoriert Sie. Es ist ein „Gelee-abhängiges Element“, das auch als „Inline-Block-abhängiges Element“ bezeichnet wird, das heißt, nur ein Element gehört zur Inline oder Inline-Block-Ebene (Tabellenzelle kann auch als Inline-Block-Ebene verstanden werden), das Vertical-Align-Attribut funktioniert. Mein Verständnis und Verständnis von CSS-Vertical-Align

Bei Verwendung der vertikalen Ausrichtung wird die Grundlinie aufgrund der Ausrichtung durch die Zeilenhöhe markiert, daher müssen Sie

Zeilenhöhe oder display:table-cell; festlegen

/*第一种方法*/.parent{display:table-cell;vertical-align:middle;height:20px;}
/*第二种方法*/.parent{display:inline-block;vertical-align:middle;line-height:20px;}
Nach dem Login kopieren
Praktische absolute Positionierung

.parent{position:relative;}.child{positon:absolute;top:50%;transform:translate(0,-50%);}
Nach dem Login kopieren
Praktische Flex-Implementierung

.parent{display:flex;align-items:center;}
Nach dem Login kopieren
Horizontale und vertikale Zentrierung

Verwenden Sie Vertical-Alignment, Text-Alignment, Inline -Block zum Erreichen

.parent{display:table-cell;vertical-align:middle;text-align:center;}
.child{display:inline-block;}
Nach dem Login kopieren
Verwenden Sie die absolute Positionierung, um zu erreichen

.parent{position:relative;}
.child{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}
Nach dem Login kopieren
Verwenden Sie Flex zum Implementieren

.parent{display:flex;justify-content:center;align-items:center;}
Nach dem Login kopieren
Mehrspaltiges Layout mit fester Breite auf der linken Seite Spalte und adaptive rechte Spalte

Diese Layoutmethode ist sehr verbreitet und eignet sich für feste Breite. Eine Seite ist normalerweise

Navigation und die adaptive Seite ist das Inhaltslayout
Detaillierte Einführung in das HTML-Layout mit CSS

Verwenden Sie

float+margin, um

zu implementieren.
.left{float:left;width:100px;}
.right{margin-left;margin-left:100px;}
Nach dem Login kopieren
Hinweis: IE6 weist einen 3px-Fehler auf.

Verwenden Sie float+margin(fix), um

zu erreichen

Detaillierte Einführung in das HTML-Layout mit CSS

<p>
    </p><p></p>
    <p>
        </p><p></p>
    
Nach dem Login kopieren
.left{width:100px;float:left;}
.right-fix{width:100%;margin-left:-100px;float:right;}
.right{margin-left:100px;}
Nach dem Login kopieren
Verwenden Sie float+

overflow implementiert

.left{width:100px;float:left;}
.right{overflow:hidden;}
Nach dem Login kopieren
overflow:hidden, löst den BFC-Modus aus,

Floating kann keinen Einfluss haben, isoliert andere Elemente, IE6 unterstützt es nicht, legen Sie margin-left auf der linken Seite fest als Der Rand zwischen links und rechts, die rechte Seite verwendet overflow:hidden, um den BFC-Modus zu bilden Wenn wir das festlegen müssen Wenn zwei Spalten die gleiche Höhe haben, können wir die folgende Methode verwenden, um den „Hintergrund“ auf die gleiche Höhe festzulegen. Tatsächlich handelt es sich nicht um die gleiche Höhe des Inhalts.

.left{width:100px;float:left;}.right{overflow:hidden;}
.parent{overflow:hidden;}
.left,.right{padding-bottom:9999px;margin-bottom:-9999px;}
Nach dem Login kopieren
Verwenden Sie die Tabelle zur Implementierung

.parent{display:table;table-layout:fixed;width:100%;}
.left{width:100px;}
.right,.left{display:table-cell;}
Nach dem Login kopieren
Verwenden Sie Flex zum Implementieren

.parent{display:flex;}
.left{width:100px;}.right{flex:1;}
Nach dem Login kopieren
Verwenden Sie Flex:1 des rechten Containers, um den Rest gleichmäßig aufzuteilen. Auch die Breite erzielt den gleichen Effekt. Der Standardwert von align-items ist stretch, daher sind die Höhen der beiden gleich

右列定宽,左列自适应

实用float+margin实现

.parent{background:red;height:100px;margin:0 auto;}
.left{background:green;margin-right:-100px;width:100%;float:left;}
.right{float:right;width:100px;background:blue;}
Nach dem Login kopieren

使用table实现

.parent{display:table;table-layout:fixed;width:100%;}
.left{display:table-cell;}
.right{width:100px;display:table-cell;}
Nach dem Login kopieren

实用flex实现

.parent{display:flex;}
.left{flex:1;}
.right{width:100px;}
Nach dem Login kopieren

两列定宽,一列自适应

Detaillierte Einführung in das HTML-Layout mit CSS

基本html结构为父容器为parent,自容器为left,center,right.其中,left,center定宽,right自适应

利用float+margin实现

.left,.center{float:left:width:200px;}
.right{margin-left:400px;}
Nach dem Login kopieren

利用float+overflow实现

.left,.center{float:left:width:200px;}
.right{overflow:hidden;}
Nach dem Login kopieren

利用table实现

.parent{display:table;table-layout:fixed;width:100%;}
.left,.center,.right{display:table-cell;}
.left,.center{width:200px;}
Nach dem Login kopieren

利用flex实现

.parent{display:flex;}
.left,.center{width:100px;}
.right{flex:1}
Nach dem Login kopieren

两侧定宽,中栏自适应

Detaillierte Einführung in das HTML-Layout mit CSS

利用float+margin实现

.left{width:100px;float:left;}
.center{float:left;width:100%;margin-right:-200px;}
.right{width:100px;float:right;}
Nach dem Login kopieren

利用table实现

.parent{width:100%;display:table;table-layout:fixed}
.left,.center,.right{display:table-cell;}
.left{width:100px;}.right{width:100px;}
Nach dem Login kopieren

利用flex实现

.parent{display:flex;}
.left{width:100px;}
.center{flex:1;}
.right{width:100px;}
Nach dem Login kopieren

一列不定宽,一列自适应

Detaillierte Einführung in das HTML-Layout mit CSS

利用float+overflow实现

.left{float:left;}
.right{overflow:hidden;}
Nach dem Login kopieren

利用table实现

.parent{display:table;table-layout:fixed;width:100%;}
.left{width:0.1%;}
.left,.right{display:table-cell;}
Nach dem Login kopieren

利用flex实现

.parent{display:flex;}
.right{flex:1;}
Nach dem Login kopieren

多列等分布局

多列等分布局常出现在内容中,多数为功能的,同阶级内容的并排显示等。

Detaillierte Einführung in das HTML-Layout mit CSS

html结构如下所示

<p>
    </p><p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
Nach dem Login kopieren

实用float实现

.parent{margin-left:-20px}
/*假设列之间的间距为20px*/
.column{float:left;width:25%;padding-left:20px;box-sizing:border-box;}
Nach dem Login kopieren

利用table实现

.parent-fix{margin-left:-20px;}
.parent{display:table;table-layout:fixed;width:100%;}
.column{display:table-cell;padding-left:20px;}
Nach dem Login kopieren

利用flex实现

.parent{display:flex;}.column{flex:1;}
.column+.column{margin-left:20px;}
Nach dem Login kopieren

九宫格布局

使用table实现

<p>
        </p><p></p><p></p><p></p><p></p>
        <p></p><p></p><p></p><p></p>
        <p></p><p></p><p></p><p></p>
    
Nach dem Login kopieren
.parent{display:table;table-layout:fixed;width:100%;}.row{display:table-row;}.item{display:table-cell;width:33.3%;height:200px;}
Nach dem Login kopieren

实用flex实现

<p></p><p></p><p></p>
<p></p>
<p></p>
<p></p><p></p>
<p></p>
<p></p>
<p></p><p></p>
<p></p>
<p></p>
Nach dem Login kopieren
.parent{display:flex;flex-direction:column;}
.row{height:100px;display:flex;}
.item{width:100px;background:red;}
Nach dem Login kopieren

全屏布局

Detaillierte Einführung in das HTML-Layout mit CSS

利用绝对定位实现

<p></p><p>top</p><p>left</p>
<p>right</p><p>bottom</p>
Nach dem Login kopieren
html,body,parent{height:100%;overflow:hidden;}
.top{position:absolute:top:0;left:0;right:0;height:100px;}
.left{position:absolute;top:100px;left:0;bottom:50px;width:200px;}
.right{position:absolute;overflow:auto;left:200px;right:0;top:100px;bottom:50px;}
.bottom{position:absolute;left:0;right:0;bottom:0;height:50px;}
Nach dem Login kopieren

利用flex实现

<p></p><p>top</p>
<p></p><p>left</p>
<p>right</p>
<p>bottom</p>
Nach dem Login kopieren
.parent{display:flex;flex-direction:column;}
.top{height:100px;}
.bottom{height:50px;}
.middle{flex:1;display:flex;}
.left{width:200px;}
.right{flex:1;overflow:auto;}
Nach dem Login kopieren

响应式布局

meta标签的实用

设置布局宽度等于设备宽度,布局viewport等于度量viewport

<meta>
Nach dem Login kopieren

媒体查询

HTML 4和CSS 2目前支持为不同的媒体类型设定专有的样式表, 比如, 一个页面在屏幕上显示时使用无衬线字体,
而在打印时则使用衬线字体, screen 和 print 是两种已定义的媒体类型, 媒体查询让样式表有更强的针对性,
扩展了媒体类型的功能;媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成,
媒体查询中可用于检测的媒体特性有width、height和color(等), 使用媒体查询, 可以在不改变页面内容的情况下,
为特定的一些输出设备定制显示效果。

语法

@media screen and (max-width:960px){....}<link>
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in das HTML-Layout mit CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage