Heim > Artikel > Web-Frontend > Zusammenfassung cleverer Möglichkeiten, CSS zu formatieren

Zusammenfassung cleverer Möglichkeiten, CSS zu formatieren

高洛峰Original: 2017-03-07 14:29:301224Durchsuche

In Bezug auf die Implementierung einiger spezieller Stile, auf die ich zuvor gestoßen bin, werde ich heute eine Zusammenfassung erstellen. Der Zweck besteht aus zwei Gründen: Erstens, diese Methoden aufzuzeichnen, damit sie bei Bedarf in Zukunft gefunden und verwendet werden können. Die zweite besteht darin, die Kristallisation der Weisheit dieser großen Götter voranzutreiben, damit die Mehrheit der Front-End-Programmierer Umwege vermeiden kann. Dieser Beitrag ist ein Update, wenn es in Zukunft gute CSS-Styling-Techniken gibt, werde ich ihn von Zeit zu Zeit aktualisieren.

1. Zentrieren Sie die Elemente horizontal und vertikal (Besonderer Dank geht an: Xin Life. Die von Brother Xin hergestellten Produkte müssen von hoher Qualität sein! Ich bewundere Sie)

Zur horizontalen und vertikalen Zentrierung eines Blockelements muss man nicht viel über die horizontale Zentrierungsmethode sagen. Im Allgemeinen können dazu margin:auto; verwendet werden. Was die vertikale Zentrierung betrifft, gibt es zwar ein Vertical-Align: Middle-Attribut, dieses gilt jedoch nur für Tabellen-Tags, und jeder weiß, dass die Wirkung von Tabellen-Tags schwer zu kontrollieren ist. . . Daher besteht unsere häufig verwendete Methode darin, das Inline-Block-Attribut des untergeordneten Elements und dessen Zeilenhöhenattribut: Zeilenhöhenwert auf die gleiche Höhe wie das übergeordnete Element festzulegen. Hier möchte ich eine von „Xin Life“ abgeleitete Methode fördern

http://www.zhangxinxu.com/wordpress/2013/11/margin-auto-absolute-%E7%BB%9D %E5 %AF%B9%E5%AE%9A%E4%BD%8D-%E6%B0%B4%E5%B9%B3%E5%9E%82%E7%9B%B4%E5%B1%85% E4% B8%AD/

Der Code lautet wie folgt:

html:

<body>
　　　　<p class="big">
　　　　　　<p class="small"></p>
　　　　　</p>
　　</body>

CSS:

.big{   
　　　　width:500px;   
　　　　height:500px;   
　　　　border:1px solid red;   
　　　　position:relative;   
　　　　}   
　　.small{   
　　　　width:200px; /*自己元素宽高可任意设定 */
　　　　height:200px;   
　　　　position:absolute;left:0px;top:0px;rightright:0px;bottombottom:0px;   
　　　　margin:auto;   

}

Im obigen Code werden die Breite und Höhe der untergeordneten Elemente willkürlich festgelegt. Dieses Element kann horizontal und vertikal zentriert im übergeordneten Element angezeigt werden. Im übergeordneten Element verwenden wir das relative Attribut position. Nachdem wir im untergeordneten Element sein Positionsattribut auf „absolut“ gesetzt haben, setzen wir die Werte in allen vier Richtungen auf 0px. Und machen Sie seinen Margenwert adaptiv. Bei der Untersuchung der Elemente können wir feststellen, dass nach dieser Einstellung der Randbereich des untergeordneten Elements das gesamte übergeordnete Element ausfüllt und die linken und rechten Randwerte sowie die oberen und unteren Randwerte gleich sind. Dies entspricht jedoch nicht der Regel, dass bei Konflikten zwischen Codewerten der obere Wert und der linke Wert zuerst analysiert werden. Weil Xiaoge das Prinzip nicht kennt. . Wenn jemand davon weiß, hoffe ich, dass er mich aufklären kann. Aber das ist eine gute Methode, und ich hoffe, dass jeder sie lernen und anwenden kann.

2. Nach dem Löschen des Floats der Pseudoklasse

Normalerweise müssen wir nach dem Festlegen des Floats des Blockelements den Float löschen, um dies zu vermeiden Layout-Verwirrung. Es gibt zwei gängige Methoden zum Löschen von Floats: 1) Schreiben Sie „clear:both;“ in das nachfolgende Unterelement css. 2) Schreiben Sie „overflow:hidden“ in das übergeordnete Element des schwebenden Elements. Jetzt können wir die dritte Methode verwenden und die After-Pseudoklasse verwenden, um ein Floating-Attribut zu schreiben, sodass wir, wann immer es eine Stelle gibt, an der Floating benötigt wird, einfach ein solches Floating-Attribut zu seinem übergeordneten Element hinzufügen können.

Der Code lautet wie folgt:

.clearfix:after{   

　　　　　content:"";   

　　　　　display:table;   /*利用table不允许浮动的属性来清除浮动。也可以替换成"overflow:hidden;"*/

　　　　　clear:both;   

　　　　　}

Diese Methode hat den Vorteil, dass sie in Reset geschrieben und später mehrmals aufgerufen werden kann.

Der obige Artikel fasst einige clevere Methoden des CSS-Stils zusammen (empfohlen), die alle vom Herausgeber geteilten Inhalte darstellen. Ich hoffe, dass er Ihnen eine Referenz geben kann, und ich hoffe auch, dass jeder das PHP-Chinesisch unterstützt Webseite.

Weitere geniale Methoden im CSS-Stil zum Zusammenfassen verwandter Artikel finden Sie auf der chinesischen PHP-Website!

Stellungnahme：

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

Vorheriger Artikel：Einführung in die Implementierungsmethoden von CSS-Animationen und FotodefinitionsanimationenNächster Artikel：Einführung in die Implementierungsmethoden von CSS-Animationen und Fotodefinitionsanimationen

In Verbindung stehende Artikel

Mehr sehen