Tipps zur CSS-Entwicklung

Auf der Website wurden viele CSS-Kenntnisse veröffentlicht. Deshalb werde ich heute die Probleme zusammenfassen, auf die Sie bei der Arbeit stoßen können, und über Lösungen mit CSS sprechen. Was ist ein mehrspaltiges Layout mit gleicher Höhe?

Klicken Sie, um auf einer Seite Text hinzuzufügen. Der Hintergrund auf der anderen Seite wird ebenfalls hinzugefügt.

HTML-Code:

<div id="container">
    <div class="left">haorooms多列等高布局左</div> 
    <div class="right" id="rights">多列等高布局,使用正负 margin 与 padding 相冲的方式实现。</div></div>

Methode 1: Verwenden Sie positive und negative Ränder, um Konflikte mit dem Abstand zu vermeiden

   #container{
    width:400px;
    margin:0 auto;
    background:#eee;
    overflow:hidden;}.left,.right{
    width:200px;
    float:left;
    font-size: 16px;
    line-height:24px;
    color:#333;
    padding-bottom:5000px;
    margin-bottom:-5000px;}.left{
    background-color: deeppink;}.right{
    background-color:yellowgreen;}

Geben Sie einen ausreichend großen Abstand und negativen Rand an

2. Verwenden Sie display:flex, um

Diese Methode ist sehr einfach. Wir verwenden sie häufig auf display:flex und die untergeordneten Elemente auf flex: 1.

3. Implementierung von display:table-cell

Ähnlich wie bei der obigen Methode, setzen Sie den Container auf display:table; und das Unterelement auf display:table-cell;.

4. Die Implementierung der Hintergrundfarbe des übergeordneten Containers

ist wie folgt:

#container{
    width:400px;
    margin:0 auto;
    background-color: deeppink;
    overflow:hidden;}.left,.right{
    width:200px;
    float:left;
    font-size: 16px;
    line-height:24px;
    color:#333;}.right{
    background-color:yellowgreen;}

5. Mehrere Hintergrundfarben des übergeordneten Containers – linearer Farbverlauf

#container{
    width:400px;
    margin:0 auto;
    background-image:
        linear-gradient(90deg, yellowgreen 50%, deeppink 0);
    overflow:hidden;}.left,.right{
    width:200px;
    float:left;
    font-size: 16px;
    line-height:24px;
    color:#333;}

6. Rahmenimplementierung

   #container{
     border-left:200px solid yellowgreen;
     background-color:deeppink;
     width:200px;
     font-size: 16px;
     line-height:24px;
     color:#333;
    }
    .left{
        width:200px;
        margin-left:-200px;
        float:left;
    }

Mehrspaltiges einheitliches Layout

Methode 1: display:flex

Diese Methode wurde auch verwendet Wie oben erwähnt, ist es relativ einfach zu implementieren und für das mobile Layout geeignet.

Methode 2: Pseudoelemente verwenden und text-align:justify

Der HTML-Code lautet wie folgt:

<div class="container">
    <div class="justify">
        <i>1</i>
        <i>2</i>
        <i>3</i>
        <i>4</i>
        <i>5</i>
    </div></div>

Der CSS-Code lautet wie folgt:

.justify{  text-align: justify;  text-align-last: justify; // 新增这一行}.justify i{  width:24px;  line-height:24px;  display:inline-block;  text-align:center;}
text-align-last兼容性不是很好，可以使用::after，
.justify{  text-align: justify;}.justify i{  width:24px;  line-height:24px;  display:inline-block;  text-align:center;  border-radius:50%;}.justify:after {  content: "";  display: inline-block;  position: relative;  width: 100%;}

Problem mit den Grenzlinien des Listenlayouts

Methode 1: negativer Rand

Idee:

Breite auf der äußeren Ebene festlegen, Überlauf auf ausgeblendet setzen, negativ festlegen Rand und Rand auf der inneren Ebene -left:-1px; Sie können den linken Rand ausblenden.

HTML-Code lautet wie folgt:

<div class="ul-container">
    <ul>
        <li>haorooms</li>
        <li>测试</li>
        <li>hao测试</li>
        <li>右侧</li>
        <li>边界线</li>
        <li>消失</li>
        <li>测试</li>
    </ul></div>

CSS-Code:

ul{
    width: 300px;
    margin-left:-1px;}li{
    float:left;
    width:99px;
    line-height:30px;
    text-align:center;
    border-left:1px solid #999;
    font-size:18px;
    margin-bottom:10px;}.ul-container{
    width: 300px; 
    margin: 50px auto;
    overflow:hidden;
    background: #eee;
    padding:10px 0;}

Methode 2: Pseudo-Klassenselektor verwenden

// Pseudoklassenselektor verwenden, um das 3. Element auszuwählen und den Rand li:nth-child(3n){
Rand zu entfernen -right:none;}

Es gibt so viele häufige Probleme bei der Arbeit. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

So erstellen Sie eine Schmetterlingsfluganimation mit CSS3

CSS3-Klick Wellen-Spezialeffekte anzeigen

So verwenden Sie CSS3, um wechselnde Spezialeffekte für unregelmäßige Bilder zu erstellen

Das obige ist der detaillierte Inhalt vonTipps zur CSS-Entwicklung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!