Teilen Sie unverzichtbare CSS-Layout-Tipps

Der folgende Editor gibt Ihnen einen unverzichtbaren CSS-Layout-Tipp. Der Herausgeber findet es ziemlich gut, daher möchte ich es jetzt mit Ihnen teilen und als Referenz dienen. Folgen wir dem Editor und werfen wir einen Blick darauf.

1.max-width:

Wenn die linke und rechte Breite der Seite reduziert wird , um das Scrollen nach links und rechts zu vermeiden. Wenn Sie eine schlechte Erfahrung machen, können Sie max-width verwenden! Wenn die Seite kleiner als die Breite ist, wird sie automatisch verkleinert~

max-width : 500px;   
margin: 0 auto;   
}

2.box-sizing:

Nachdem Sie box-sizing:border-box für ein Element festgelegt haben, bestimmen Sie die Breite und legen Sie dann den Abstand und den Rand fest. Die Breite wird nicht geändert. Sie können globale Einstellungen festlegen, um Browserkompatibilitätsprobleme wie folgt zu lösen:

-webkit-box-sizing : border-box;   
-moz-box-sizing:border-box;   
box-sizing:border-box;   
 }

3.overflow:auto

Der Rand passt sich der Größe des Inhalts an und es entsteht kein Überlauf.

IE-kompatible Lösung:

.example{ overflow:auto; zoom:1; }

4

Nachdem Sie Medienabfragen verwendet haben, können Sie unterschiedliche Layouts entsprechend unterschiedlicher Seitenbreiten festlegen. Die Methode ist wie folgt:

//页面宽度大于600px时，nav模块浮动于左侧   
@media screen and (min-width: 600px) {   
nav {   
    float: left;   
    width: 25%;   
}   
section {   
    margin-left: 25%;   
}   
}   
//页面宽度小于599时，nav模块打横，在上方   
@media screen and (max-width: 599px) {   
nav li {   
    display: inline;   
}   
}

5. Mehrspaltiges Textlayout:

.three-column { padding :1em; -moz-column-count :3; -moz-column-gap: 1em; -webkit-column-count :3; -webkit-column-gap: 1em; column-count:3; column-gap:1em; }

Das obige ist der detaillierte Inhalt vonTeilen Sie unverzichtbare CSS-Layout-Tipps. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!