Detaillierte Einführung in das HTML-Layout mit CSS

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

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

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

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%);}

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

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

Praktische absolute Positionierung

.parent{position:relative;}.child{positon:absolute;top:50%;transform:translate(0,-50%);}

Praktische Flex-Implementierung

.parent{display:flex;align-items:center;}

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

Verwenden Sie die absolute Positionierung, um zu erreichen

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

Verwenden Sie Flex zum Implementieren

.parent{display:flex;justify-content:center;align-items:center;}

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

Verwenden Sie

float+margin, um

zu implementieren.

.left{float:left;width:100px;}
.right{margin-left;margin-left:100px;}

Hinweis: IE6 weist einen 3px-Fehler auf.

Verwenden Sie float+margin(fix), um

zu erreichen

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

.left{width:100px;float:left;}
.right-fix{width:100%;margin-left:-100px;float:right;}
.right{margin-left:100px;}

Verwenden Sie float+

overflow implementiert

.left{width:100px;float:left;}
.right{overflow:hidden;}

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

Verwenden Sie die Tabelle zur Implementierung

.parent{display:table;table-layout:fixed;width:100%;}
.left{width:100px;}
.right,.left{display:table-cell;}

Verwenden Sie Flex zum Implementieren

.parent{display:flex;}
.left{width:100px;}.right{flex:1;}

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

使用table实现

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

实用flex实现

.parent{display:flex;}
.left{flex:1;}
.right{width:100px;}

两列定宽，一列自适应

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

利用float+margin实现

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

利用float+overflow实现

.left,.center{float:left:width:200px;}
.right{overflow:hidden;}

利用table实现

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

利用flex实现

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

两侧定宽，中栏自适应

利用float+margin实现

.left{width：100px;float:left;}
.center{float:left;width:100%;margin-right:-200px;}
.right{width:100px;float:right;}

利用table实现

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

利用flex实现

.parent{display:flex;}
.left{width:100px;}
.center{flex:1;}
.right{width:100px;}

一列不定宽，一列自适应

利用float+overflow实现

.left{float:left;}
.right{overflow:hidden;}

利用table实现

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

利用flex实现

.parent{display:flex;}
.right{flex:1;}

多列等分布局

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

html结构如下所示

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

实用float实现

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

利用table实现

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

利用flex实现

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

九宫格布局

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

.parent{display:table;table-layout:fixed;width:100%;}.row{display:table-row;}.item{display:table-cell;width:33.3%;height:200px;}

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

.parent{display:flex;flex-direction:column;}
.row{height:100px;display:flex;}
.item{width:100px;background:red;}

全屏布局

利用绝对定位实现

<p></p><p>top</p><p>left</p>
<p>right</p><p>bottom</p>

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

利用flex实现

<p></p><p>top</p>
<p></p><p>left</p>
<p>right</p>
<p>bottom</p>

.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;}

响应式布局

meta标签的实用

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

<meta>

媒体查询

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

语法

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

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!