Neue Eigenschaften in CSS3: Zusammenfassung der mehrspaltigen CSS3-Layouteigenschaften (mit Beispielen)

Das Attribut des mehrspaltigen Layouts wurde in CSS3 hinzugefügt. Was ist ein mehrspaltiges Layout? Beim sogenannten mehrspaltigen Layout werden mehrere Spalten für die Textanordnung erstellt, ähnlich dem Layout einer Zeitung. In diesem Artikel werfen wir daher einen Blick auf einige verwandte Eigenschaften und Codebeispiele im mehrspaltigen Layout.

Attribute des mehrspaltigen CSS3-Layoutcontainers:

Spaltenbreite: auto | : Definieren Sie eine Mindestbreite für die Spalte (Mindestbreite).

auto: Die Spaltenbreite wird durch andere Elemente bestimmt.

Länge: Legen Sie explizit die Mindestbreite fest.

column-count: auto | : Definieren Sie die Anzahl der Spalten.

auto: Es gibt nur eine Spalte mit Elementen. Es ist, als gäbe es keine Einstellung.

: positiver ganzzahliger Wert. Der Wert ist eine Ganzzahl größer als 0 und negative Werte sind ungültig.

Spalten: : ist die Abkürzung für Spaltenbreite und Spaltenanzahl. Jede Bestellung.

Spaltenbreite = (Breite des übergeordneten Elements – (Anzahl der Spalten – 1) Spaltenabstand) / Anzahl der Spalten *
Zum Beispiel: Das übergeordnete Element ist 40em groß, in 4 Spalten unterteilt und der Spaltenabstand ist 2em. Dann beträgt die Spaltenbreite (40 - (4-1) * 2) / 4 = 8,5em.
Wenn die explizit eingestellte Spaltenbreite kleiner als diese Breite ist, wird sie in dieser Breite angezeigt.
Wenn die explizit festgelegte Spaltenbreite größer als diese Breite ist, werden die Spaltenbreite und die Anzahl der Spalten entsprechend der entsprechenden Größe neu angeordnet. Die aktuell eingestellten Spaltenbreiten und Spaltenanzahlen sind nicht korrekt.

Spaltenabstand: normal | : Spaltenabstand definieren. Wenn der Wert zu groß ist, wird das Layout beschädigt.

normal: Standardwert, vom Browser analysiert, normalerweise lem.
: Ein Längenwert, der aus einer Gleitkommazahl und einer Einheitenkennung besteht. Wie zum Beispiel: 2.1em.

Spaltenregel:

Seine Mittellinie ist immer die gleiche wie die Mittellinie des Spaltenabstands. Mit anderen Worten: Es befindet sich immer in der Mitte zweier Spalten. Ähnlich wie Grenze. Wenn der Spaltenrand größer als der Spaltenabstand ist, wird er nicht automatisch ausgeblendet. Der Teil des Spaltenrandes, der über den Spaltenabstand hinausragt, scheint unter den Text zu sinken (Hintergrundeffekt).

column-fill: auto |. balance: Definiert, ob die Höhe jeder Spalte in mehreren Spalten einheitlich ist.

Dieses Attribut ist sehr seltsam. Und es ist nicht in allen Browsern einheitlich. Es hat zwei Werte: auto |. Gleichgewicht. existieren Die Testergebnisse in ie10/ie11/opera40/chrome52 sind alle gleich und es wurde festgestellt, dass zwischen diesen beiden Eigenschaften kein Unterschied besteht. Beim Testen in Firefox 49 gibt es einen Unterschied zwischen diesen beiden Eigenschaften. Balance bedeutet, dass die Höhe jeder Spalte nahezu gleich ist (Ausrichtung) und sie automatisch zu einer Spalte zusammengeführt werden, unabhängig davon, wie viele Spalten Sie festlegen.

CSS3-Attribute für mehrspaltiges Layoutelement (Element):

column-span: none all: Definieren Sie, wie viele Spalten ein Element umfasst .

Wenn wir den Titel oft über alle Spalten hinweg platzieren. Dann Column-Span: all. Der Standardwert ist „column-span: none“; er gibt an, dass keine Spalten überspannt sind.

mehrspaltiger CSS3-Layoutcode:

     nbsp;html>
    
    
        <meta>
        <meta>
        <meta>
        <title>多列布局｜column-span</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .wrapper {  
            width: 40em;
            margin:0 auto;
            border: 1px solid #ccc;
            /*多列布局*/
            -moz-column-count: 4;
            -webkit-column-count: 4;
            column-count: 4;
            -moz-column-gap: 2em;
            -webkit-column-gap: 2em;
            column-gap: 2em;
            -moz-column-rule: .1em dashed #ccc;
            -webkit-column-rule: .1em dashed #ccc;
            column-rule: .1em dashed #ccc;
            -webkig-column-fill: balance;
            -moz-column-fill: balance;
            column-fill: balance;
        }
        h1 {
            font-size: 1.5em;
            margin-bottom: 1em;
            -moz-column-span: all;
            -webkit-column-span: all;
            column-span: all;
            padding-bottom: 5px;
            text-align: center;
            border-bottom: 2px solid #ccc;
        }
        p {
            margin-bottom: 1em;
            text-indent: 2em;
            line-height: 1.625;
            font-size: .7em;
        }
    </style>


    <div>
        <h1>为什么您宁愿吃生活的苦，也不愿吃学习的苦？</h1>
      <h3>一. 为什么大多数人宁愿吃生活的苦，也不愿吃学习的苦？</h3>
        <p>记得小时候上学，学校每次放月假，爷爷就去车站接我回家。
那时家里离车站远，需要骑着车子来回。
一路上我们彼此相对无语，等到爷爷骑不动了，我们就这么一前一后推着车子走着，记得爷爷常常和我说：
“吃得苦中苦，方为人上人，你日后要好生读书。”
那时的我未解其意，只是默默记在心里，望着不远处稻田里的乡亲们弯腰割麦俯首插秧，我觉着他们太辛苦了。
几年过去了，我考入了省城上大学，学了这个城市最热门也最富前景的工程造价专业。
后来，我走进实习单位， 工地的环境有多么糟糕自不必多说，晴天尘土飞扬骄阳似火，雨天泥泞不堪污水四溢。
物质世界的贫瘠尚可以忍受，然而精神世界的荒芜会随着时间慢慢消磨你的梦想和纯真。
后来，我选择去了深圳，在那里我终于找到了自己热爱的行业，眼前陌生的一切都让我感到兴奋和欢愉。
人工智能、自动驾驶、虚拟现实、风投、天使轮这些名词让我看到了世界的另一面。
越是不断地拓宽知识面，越是觉得自己知识储备量的贫瘠与荒凉。</p>
        <h3>二. 生活的痛苦使人麻痹，学习的痛苦让人清醒 ；过去不按思维而生活，终将有一天要按照生活而思维</h3>
        <p>痛苦之所以不被人喜欢，大多数是因为人们从不会思考自己为何痛苦。
然而，这世上还有另一种痛苦是，对这个世界产生了失望的情绪，然后把自己对这个世界的失望，当作是自己本该如此，甚至误以为这就是吃苦的好处。
我总觉得苦难的意义，在于我们更好地去思考人生为何如此苦难，就像有人曾说：未经省察的人生，从不值得一过。
如果没有经过思索和自省，苦难终究只是苦难而已，没有任何意义。
有些人，年轻时总觉得学不学习无关紧要，反正自己体力好得很，只要自己身体好就能混口饭吃。
他们终将会明白，那些为了讨生活不得已而吃的苦，就是当年不吃学习苦的代价。
学习的苦，是枯燥的苦，是短期没有回报的苦，这种苦看得见，摸得着，谁都不愿吃。
生活的苦，是绝望的苦，是长期没有出路的苦，这种苦看不见，摸不着，谁都不想吃。
我从不喜欢自讨苦吃，如果我能通过学习和自我提升避免遇见这些痛苦的经历，我有什么理由不去学习？
生活其实并不苦，苦的是那个不知苦也不知如何避免吃苦的人生。
学习其实并不苦，苦的是早已被生活消磨掉的好奇心和敢于对未来报有期望的勇气。</p>
    </div>

Ausführungseffekt:

Empfohlene verwandte Artikel:

css3-columns mehrspaltiges Layout_html/css_WEB-ITnose

Eine kurze Diskussion der neuen Funktionen des mehrspaltigen CSS3-Layoutmoduls

CSS3-Spalten sind ein einfach zu verwendendes Spaltenlayout

Das obige ist der detaillierte Inhalt vonNeue Eigenschaften in CSS3: Zusammenfassung der mehrspaltigen CSS3-Layouteigenschaften (mit Beispielen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!