Layout Secret Weapon #1: Die CSS -Tabelle Eigenschaft

CSS display: table Attribute: Ein leistungsstarkes Werkzeug zur Lösung von Layoutproblemen

Kernpunkte:

Die
• CSS -Attribute sind leistungsstark, können mehrere Layoutprobleme lösen und sind mit allen modernen Browsern kompatibel. Es ermöglicht HTML -Elemente wie Tabellenelemente und bietet eine gemeinsame Lösung für komplexe Layout- und Ausrichtungsprobleme. table
CSS
• Eigenschaften können zum Erstellen von Konturboxen, einfachen Layouts im alten Stil und adaptiven Layouts mit Inhaltsorchestrierung verwendet werden. Es ist besonders nützlich bei reaktionsschnellen Designs und ermöglicht es, Elemente zu ändern und nach der Bildschirmgröße des Benutzers zu positionieren. table
Obwohl das CSS
• -Treiber viele Vorteile hat, hat es auch einige Einschränkungen. Es hat weniger Flexibilität bei der Erstellung komplexer Layouts im Vergleich zu anderen Display -Eigenschaften und funktioniert nicht gut mit bestimmten CSS -Eigenschaften wie table und float. In vielen Fällen überwiegen die Vorteile der Verwendung des position -attributs jedoch seine Nachteile. table

derzeit kann Flexbox eine beliebte neue Technologie für die Layout -Konstruktion sein. Die erstaunliche Fähigkeit von Flexbox, sich an den verfügbaren Raum anzupassen, hat sich viele Menschen auf seine Möglichkeiten freuen. Es löst jedoch nicht alle Layoutprobleme und es gibt einige Probleme mit seiner Kompatibilität mit älteren Browsern. Flexbox hat derzeit keine gemeinsame Polyfill (eine Fallback -Lösung für ältere Browser) - ich kenne nur eine Polyfill für die Version von IE: Flexie aus dem Jahr 2009. In vielen Fällen stellte ich fest, dass die Verwendung der oft übersehenen CSS

-Displayeigenschaften eine einfachere Lösung finden kann. Diese CSS -Eigenschaften werden von allen relevanten Browsern häufig unterstützt (beachten Sie, dass dies IE6 und IE7 ausschließt) und kann einige wichtige und kleinere Layoutschwierigkeiten anmutig lösen. table

Wenn Sie mit dieser Technik nicht vollständig vertraut sind, kann das Ändern des

-attributs eines DIV es display wie ein Tabellen- oder Tabellenelement verhalten. Warten Sie, verwenden Sie Tabellen zum Layout? Ist das nicht gut?

Eines der heißesten Webdesign -Themen des frühen 21. Jahrhunderts war die Debatte über die Verwendung von HTML -Tabellencode als Layout -Tool. Das ist ein Hack und es ist immer noch eine schlechte Praxis.

Stattdessen verwenden wir HTML, das hier durchaus sinnvoll ist (d. H. Div, Abschnitt, Header usw.) und nur einige nützliche Kenntnisse der Tabellenrepräsentation aus CSS ausgeliehen. Genau dafür ist CSS konzipiert. Denken Sie also nicht, dass es sich um einen Hack oder ein Patch handelt. Es ist nicht.

Verwendung

display: table-cell Klicken Sie im folgenden Beispiel oben auf die Schaltfläche oben und Sie können das Attribut der drei farbigen Divs von

auf

: display ändern block [CodePen Sample Link - Ersetzen Sie durch den tatsächlichen CodePen -Link] table-cell

Sie können sehen, wie Divs ohne

Eigenschaften horizontal angeordnet sind, und Sie können auch auf einige typische Tabellenregeln zugreifen (wie

).

Wenn Sie einen Abstand benötigen, beachten Sie, dass das klassische CSS margin -Merkmal keinen Einfluss auf die Tabellenzelle hat: Verwenden Sie stattdessen border-spacing (es muss auf Container -Tabellenelemente angewendet werden). Wenn Sie diese Regeln verwenden möchten, finden Sie einige Kommentare in CodePen.

Diese Technik ist sehr nützlich, um viele Probleme zu lösen, die mit anderen Methoden schwer zu lösen sind.

Ich habe drei einfache Fälle ausgewählt, in denen table Anzeigeattribute sehr wertvoll sind.

Aber schauen wir uns zuerst sie an:

dargestellt

Anzeigeattribut

als

Tabelle, inline-table

display 属性	呈现为
table, inline-table	table
table-column	col
table-column-group	colgroup
table-row-group	tbody
table-header-group	thead
table-footer-group	tfoot
table-row	tr
table-cell	td
table-caption	caption

Tabellensäule

col

Tabelle-Säule-Gruppen

colGroup

Tabellenreihe-Gruppen

tbody

Tabellenhellgruppe

thead

TABLE-FOTER-GROUP

tfoot

TABLE-ROW

tr

Tabelle-Zell

TD

Tabellencaption

caption

Für eine wirklich umfassende Anleitung zu Formularen und CSS finden Sie CSS -Tricks: [CSS -Tricks 'Formularhandbuch - Ersetzen Sie durch den tatsächlichen Link]

Fall 1. Konturbox

Ich denke, dies ist eines der häufigsten Probleme, mit denen ich zu tun habe: Es gibt einige schwimmende Boxen mit unbekannten Inhalten und Sie müssen sie alle die gleiche Höhe haben.

Ich weiß, dass Flexbox dieses Problem leicht lösen kann, aber auch Tabellenregeln können es auch tun.

Wenden Sie einfach die Eigenschaft display: table (oder table-row) auf den Container und die Eigenschaft display: table-cell auf das interne Feld an. Beachten Sie, dass Sie alle float -attribute löschen möchten (ansonsten wird die table-cell -attribute nicht wirksam).

html:

<div id="wrapper">
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
</div>

CSS:

#wrapper {
    display: table;
}
#wrapper div {
    display: table-cell;
}

[CodePen Sample Link - Ersetzen Sie durch den tatsächlichen CodePen -Link]

Fall 2. Einfaches Layout des alten Stils

Dies ist ein ziemlich veraltetes Beispiel, aber ich denke, Sie müssen sich vielleicht damit befassen, wie ich es kürzlich getan habe.

Vor einigen Monaten erhielt ich ein grafisches Layout, das dem folgenden Schema sehr ähnlich war. Es muss mit IE8 kompatibel sein, und ich fand den besten Weg, dies zu tun, um die CSS -Tabellenregeln zu verwenden:

[CodePen Sample Link - Ersetzen Sie durch den tatsächlichen CodePen -Link]

Fall 3. Adaptive Layout mit Inhaltsorchestrierungsfunktion

Das vorherige Beispiel führt uns zu einem neuen Thema: Ist es möglich, ein adaptives Layout mit CSS -Tabellenregeln zu erstellen?

Dies ist nicht nur möglich, sondern wir können auch einige Inhaltsorchestrierungsaufgaben ausführen.

Wir haben gesehen, wie die display Eigenschaft von zwei Divs von block zu table-cell zu

geändert werden kann, um ihre Anordnung von vertikal nach horizontal zu ändern.

Zusätzlich werden Elemente mit table-header-group Attributen am optimalen Tischlayout platziert. Auch hier wird das table-footer-group Element unten platziert und so weiter. Dies kann unerwartet nützlich sein, wenn reaktionsschnelle Layouts neu formatiert werden.

In der folgenden Stift wechselt das Titelelement seine Position mit dem Navigationselement, wenn das Fenster geändert wird. Ändern Sie einfach sein display Attribut in table-header-group.

html:

<div id="wrapper">
    <nav></nav>
    <header></header>
    <div id="banner2"></div>
    <footer></footer>
</div>

CSS:

#wrapper, header {
    display: block; /* 我们实际上不需要此规则，因为它默认为此值 */
}

@media (min-width: 48em) {
    #wrapper {
        display: table;
    }
    header {
        display: table-header-group;
    }
}

footer und #banner2 Divs haben auch ähnliche Verhaltensweisen.

Dies ist ein Layoutplan: Die Standard -Mobile -Version links und die Desktop -Version rechts:

Dies ist eine laufende Demonstration:

[CodePen Sample Link - Ersetzen Sie durch den tatsächlichen CodePen -Link]

Weitere Informationen zu diesem Argument können auch angezeigt werden:

• CSS -Stapel mit display:table
• Anti-Hero des CSS-Layouts-"display:table"

Schlussfolgerung

CSS table Anzeigeeigenschaften sind eine unterschätzte und wertvolle Lösung für die Größe und Layout -Herausforderungen.

Während ich mich persönlich nicht dafür entscheiden kann, komplexe Layouts zu erstellen, lösen sie sicherlich viele der Herausforderungen im Zusammenhang mit dem Layout -Teil.

FAQs über CSS table Eigenschaften

(häufig gestellte Fragen zu den CSS table -attributen sollten hier hinzugefügt werden. Der Inhalt ähnelt dem Originaltext, aber der Wortlaut muss angepasst werden, um die Duplikation zu vermeiden.)

Bitte beachten Sie, dass alle oben genannten Codepen -Links durch den tatsächlichen Codepen -Link ersetzt werden müssen. Ich kann nicht direkt auf einen Codepen zugreifen und erstellen.

Das obige ist der detaillierte Inhalt vonLayout Secret Weapon #1: Die CSS -Tabelle Eigenschaft. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!