Zusammenfassung der Verwendung des mehrspaltigen CSS3-Layouts und des Box-Layouts sowie des flexiblen Box-Layouts und der Berechnungsmethode

Dieser Artikel bietet Ihnen eine Zusammenfassung der Verwendung des mehrspaltigen CSS3-Layouts und der flexiblen Box-Layout- und Berechnungsmethode. Ich hoffe, dass er für Freunde hilfreich ist Dir hilft.

1 Mehrspaltiges Layout

Durch die Verwendung eines mehrspaltigen Layouts kann der Inhalt eines Elements zur Anzeige in zwei oder mehrere Spalten unterteilt werden. und stellen Sie sicher, dass der Inhalt jeder Spalte unten ausgerichtet ist.

Spaltenanzahlattribut

In CSS3 wird dieses Attribut verwendet, um das mehrspaltige Layout zu verwenden. Die Bedeutung dieses Attributs besteht darin, den Inhalt in einem Element in mehrere Spalten zu unterteilen Anzeige.

(1) Browser-Schreiben

Firefox: „-moz-column-count“

Safari, Chorme, Opera: „-webkit-column-count“

Im IE muss kein Präfix hinzugefügt werden.

(2) Wenn Sie ein mehrspaltiges Layout verwenden, müssen Sie die Breite des Elements auf die Gesamtbreite mehrerer Spalten einstellen.

Spaltenbreite-Attribut

Sie können dieses Attribut auch verwenden, um die Breite jeder Spalte einzeln festzulegen, ohne die Breite des Elements festzulegen.

(1) Browser-Schreiben

Firefox: „-moz-column-width“

Safari, Chorme, Opera: „-webkit-column-width“

Im IE muss kein Präfix hinzugefügt werden.

column-count：2；
-moz-column-count：2；
-webkit-column-count：2；
column-width：20em；
-moz-column-width：20em；
“-webkit-column-width：20em；

(2) Um dieses Attribut zu verwenden, um die Breite jeder Spalte anzugeben, ohne die Breite des Elements festzulegen, müssen Sie ein separates Containerelement außerhalb des Elements einrichten und dann die Breite des Containers angeben Element, andernfalls angeben. Die Spaltenbreite wird von Browsern als nicht festgelegt betrachtet .

Spaltenlückenattribut

(1) Funktion

Legen Sie den Abstand zwischen mehreren Spalten fest

(1) Browser-Schreiben

Firefox: "- moz-column-gap“

Safari, Chorme: „-webkit-column-gap“

Kein Präfix im IE erforderlich.

column-gap：3em；
-moz-column-gap：3em；
-webkit-column-gap：3em；

Spaltenregelattribut

(1) Funktion

Fügen Sie eine Abstandslinie zwischen den Spalten hinzu und legen Sie die Breite, Farbe usw. der Abstandslinie fest. (Entspricht der Angabe des Attributwerts des Rahmenattributs)

column-rule：1px solid red；
-moz-column-rule：1px solid red；
-webkit-column-rule：1px solid red；

2 Box-Layout

Box-Attribut

In CSS3 verwenden Sie dieses Attribut, um das Box-Layout zu verwenden

(1) Browser-Schreiben

Firefox: „-moz-box“

Safari, Chorme, Opera: "-webkit-box"

display：-moz-box；
display：-webkit-box；

(2) Der Unterschied zwischen Box-Layout und mehrspaltigem Layout

1. Die Breite jeder Spalte muss gleich sein Bei der Angabe der Breite jeder Spalte können Sie nur eine einheitliche Breite für alle Spalten angeben. Die Breiten zwischen den Spalten dürfen nicht unterschiedlich sein.

2. Bei Verwendung eines mehrspaltigen Layouts ist es unmöglich anzugeben, welcher Inhalt in welcher Spalte angezeigt werden soll , daher eignet es sich besser zum Anzeigen von Artikelinhalten, aber nicht zum Anordnen die gesamte Webseite, wenn die Seitenstruktur aus verschiedenen Elementen besteht.

3 Flexibles Box-Layout

Wenn Sie möchten, dass die Gesamtbreite der drei div-Elemente der Breite des Browserfensters entspricht und sich als Fenster ändern kann Breite ändert sich, wie stellt man sie ein?

Flex-Attribut

Machen Sie das Box-Layout in ein flexibles Box-Layout um

#container{
display：flex；
}
#left-sidebar{
width：200px；
padding：20px；
background-color：orange；
}
#contents{
flex：1；
padding：20px；
background-color：yellow；
}
#right-sidebar{
width：200px；
padding：20px；
background-color：limegreen；
}

Auftragsattribut

(1) Funktion

Ändern Sie die Anzeigereihenfolge jedes Elements . Sie können dem Stil jedes Elements das Attribut „Order“ hinzufügen. Dieses Attribut verwendet einen ganzzahligen Attributwert, der die Seriennummer darstellt. Bei der Anzeige zeigt der Browser diese Elemente entsprechend der Seriennummer an.

#container{
display：flex；
}
#left-sidebar{
order：3；
}
#contents{
flex：1；
order：1；
}
#right-sidebar{
order：2；
}

Flex-Direction-Attribut

(1) Funktion

ändert die Anordnungsrichtung von Elementen.

(2) Wert

Zeile: horizontal angeordnet (Standardwert). Reihenumkehr: horizontal umgekehrte Anordnung.

Spalte: vertikal angeordnet.                                                                                                                                                                                               Column-Reverse: Vertikal in umgekehrter Reihenfolge angeordnet.

#container{
display：flex；
flex-direction：column；
}

Adaptive Höhe und Breite von Elementen

(1) Bei Verwendung des Box-Layouts sind Höhe und Breite der Elemente adaptiv, d. h. die Breite und Höhe der Elemente können sich je nach Änderung der Anordnungsrichtung ändern.

(2) Wenn ein Containerelement vorhanden ist, enthält das Element drei p-Elemente, und für das Containerelement werden nur die Breite und die Höhe angegeben. Wenn also die Anordnungsrichtung angegeben wird horizontale Richtung, die der drei Elemente. Die Breite ist die Breite des -Inhalts im Element, und die -Höhe wird automatisch zur Höhe des Containers Die Anordnungsrichtung wird als vertikale Richtung angegeben, die Höhe ist die Höhe des -Inhalts im Element und die Breite von wird automatisch zur Breite von der Behälter . (Es gibt große Leerräume)

Verwenden Sie das Flexbox-Layout, um Leerräume zu eliminieren

（1）使得多个参与排列的元素的总宽度与总高度始终等于容器的宽度和高度。

#container{
display：flex；
}
#contents{
flex：1；
}

如果使用弹性盒布局，使用了box-flex属性的元素的宽度与高度总会自动扩大，使得参与排列的元素的总宽度与总高度始终等于容器的宽度和高度。

（2）可对多个元素使用flex属性

flex-grow属性

（1）功能

指定元素宽度或高度。

#container{
display：flex；
flex-direction：row；
}
#left-sidebar{
flex-grow：1；
}
#contents{
flex-grow：1；
}
#right-sidebar{
flex-grow：3；
}

flex-shrink属性

（1）功能

指定元素宽度或高度。

（2）与flex-grow属性关系

当元素排列方向为横向排列时：如果子元素的width样式属性值的总和小于容器元素的宽度值，必须通过flex-grow属性（加上加权空白）来调整子元素宽，若大于则必须通过flex-shrink属性（减去加权超出部分）来调整子元素宽度。

当元素排列方向为纵向排列时：如果子元素的height样式属性值的总和小于容器元素的高度值，必须通过flex-grow属性来调整子元素宽，若大于则必须通过flex-shrink属性来调整子元素宽度。

结果：参与排列的元素的总宽度与总高度始终等于容器的宽度和高度

#container{
display：flex；
flex-direction：row；
}
#left-sidebar{
flex-shrink：1；
}
#contents{
flex-shrink：1；
}
#right-sidebar{
flex-shrink：3；
}

flex-basis属性

（1）功能

指定调整前的子元素宽度，与width属性的作用完全相同。

属性合并

（1）flex：flex-grow样式属性值    flex-shrink样式属性值    flex-basis样式属性值；（均为可选样式属性）

（2）不指定flex-grow， flex-shrink时，默认样式属性值为1；flex-grow， flex-shrink 默认样式值为 0px；

（3）子元素为横向排列时，flex-grow， flex-shrink、flex-grow， flex-shrink、flex均用于指定或调整子元素的宽度；为纵向排列时，则用于指定或调整子元素的高度。

flex:250px;//元素宽度为250px；
flex：1 3 250px；

flex-wrap属性

（1）功能

指定单行布局或多行布局

（2）属性值

nowrap：不换行。               wrap：换行。

wrap-reverse：虽然换行，但是换行方向与使用wrap样式属性值时的换行方向相反。

#container{
display：flex；
border:solid 5px blue;
flex-direction:row;
flex-wrap：wrap；
}

flex-flow属性

可以将flex-direction属性值与flex-wrap属性合并书写在该属性中。

{
flex-direction：row；
flex-wrap：wrap；
}
等价于：
{
flex-flow：row wrap；
}

指定水平方向与垂直方向的对齐方式

justify-content属性

（1）功能

用于指定如何布局容器中除了子元素之外的main axis（横向布局时为水平方向，纵为垂直方向）上的剩余空白部分。

（2）当flex-grow属性不为0时，各子元素在main axis轴方向上自动填满容器，所以justify-content属性值无效。

（3）属性值

flex-start：从main-start开始布局所有子元素（默认）

flex-end：从main-end开始布局所有子元素。

center：居中布局所有子元素。

space-between：将第一个子元素布局在main-start处，将最后一个子元素布局在main-end处，将空白部分平均分配在所有子元素与子元素之间。

space-around：将空白部分平均分配在以下几处，如main-start与第一个子元素之间、各子元素与子元素之间、最后一个子元素与main-end之间。

#content{ 
display：flex；
border：solid 5px blue；
flex-direction：row；
width：600px；
height：30px；
justify-content：flex-start；
}

align-items属性

（1）功能

用于指定子元素对齐方式，指定的是cross axis轴方向（横为垂直，纵为水平）。（容器元素的样式属性）

（2）属性值

flex-start：从cross-start开始布局所有子元素（默认）

flex-end：从cross-end开始布局所有子元素。

center：居中布局所有子元素。

baseline：如果子元素的布局方向与容器的布局方向不一致，则该值得作用等效于flex-start属性值的作用。否则，所有子元素中的内容沿基线对齐。

stretch：同一行中的所有子元素高度被调整为最大。如果未指定任何子元素高度，则所有子元素高度被调整为最接近容器高度（当考虑元素边框及内边距时，当边框宽度与内边距均为0则等于容器高度）。

#content{ 
display：flex；
border：solid 5px blue；
flex-direction：row；
width：600px；
align-items：flex-start；
}

align-self属性

（1）功能

用于单独指定某些子元素的对齐方式。

（2）属性值

auto：继承父元素的align-items属性值。

其他可指定属性值同align-items属性的可指定属性值。

align-content 属性

（1）功能

在进行多行布局时，可以使用该属性指定各行对齐方式。

（2）属性值

flex-start：从cross-start开始布局所有子元素（默认）

flex-end：从cross-end开始布局所有子元素。

center：居中布局所有子元素。

space-between：将第一行布局在cross-start处，将最后一行布局在cross-end处，将空白部分平均分配在各行之间。

space-around：将空白部分平均分配在以下几处，如cross-start与第一行之间、各行与子元素行之间、最后一行与cross-end之间。

#content{ 
display：flex；
border：solid 5px blue；
flex-direction：row；
flex-wrap：wrap；
width：300px；
height：400px；
align-conten：flex-start；
}

4 calc方法

（1）作用

可以通过该方法来自动计算元素的宽度、高度等数值类型的样式属性值。

（2）浏览器支持

到目前为止：Safari6以上、Chrome19以上 、Firefox8以上、Opera12以上、IE9以上浏览器支持该方法。 

#container{
width：500px；
background-color：pink；
}
#foo{
width：calc（50%-100px）；
background-color：green；
}

（3）可以用来对各种不同的计数单位进行混合运算

#container{
height：calc（10em+3px）；
}

相关推荐：

css3 -webkit-flex 布局_html/css_WEB-ITnose

CSS3实现瀑布流布局的方法

Das obige ist der detaillierte Inhalt vonZusammenfassung der Verwendung des mehrspaltigen CSS3-Layouts und des Box-Layouts sowie des flexiblen Box-Layouts und der Berechnungsmethode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!