Heim  >  Artikel  >  Web-Frontend  >  Ausführliche Erläuterung der Transformation und Verwendung der Doppelflügleranordnung

Ausführliche Erläuterung der Transformation und Verwendung der Doppelflügleranordnung

零下一度
零下一度Original
2017-06-24 13:24:441582Durchsuche

Box-Größe + negativer Rand-Upgrade-Doppelflügel-Layout

1. Box-Größen-Attribut

.content-size, .border-size{width: 200px;height: 100px;padding: 10px;border: 5px solid red;margin: 20px;
}.content-size{box-sizing: content-box;
}.border-size{box-sizing: border-box;
}
  1. Die Werte für Breite, Höhe, Abstand, Rahmen und Rand der beiden Klassen context-size und border-size sind gleich.

  2. box-sizing: content-box, die Breite und Höhe des div sind die Werte von width und height

  3. box- Größe: border-box, die Breite und Höhe des Div sind padding + border + width (Inhaltshöhe)

2. Anwendung des border-box-Attributs

Die Transformation des Doppelflügel-Layouts, die traditionelle doppelte Flughöhe ist adaptiv. Diesmal wird die Höhe des Doppelflügel-Layouts durch den Border-Box-Wert des Box-Sizing-Attributs festgelegt, sodass Kopf- und Fußzeile festgelegt sind und die Bildlaufleiste automatisch im mittleren Inhaltsteil angezeigt wird.

Der Code lautet wie folgt:

<html><head><meta charset="UTF-8"><title>Document</title><style>div, body{margin: 0px;}  .head{  height: 60px;  background: red;  }  .main {  height: 100%;  clear: both;  box-sizing: border-box;  padding: 60px 0px 100px 0px;  margin: -60px 0px -100px 0px;  }  .main-main{  clear: both;  }  .main-main:after{  content: '';  display: block;  overflow: hidden;  clear: both;  }  .cont-main{  margin: 0px 300px 0px 200px;  overflow: hidden;  overflow-y: auto;  height: inherit;  }  .main .cont, .main .left, .main .right{  float: left;  height: 100%;  }  .main .cont{  width: 100%;  }  .main .left{width: 200px;margin-left: -100%;  }  .main .right{width: 300px;margin-left: -300px;  }  .footer{  height: 100px;  background: gray;  }</style></head><body><div class="head">head</div><div class="main"><div class="main-main"><div class="cont"><div class="cont-main">cont<br/>cont<br/>cont<br/>cont<br/>cont<br/>cont<br/>cont<br/>cont<br/>cont<br/>cont<br/>cont<br/>cont<br/>cont<br/>cont最后一条<br/></div></div><div class="left">left</div><div class="right">right</div></div></div><div class="footer">footer</div></body></html>

Rendering:

Schlüsselcode-Analyse

  1. Um die traditionelle Anordnung mit zwei fliegenden Flügeln zu erreichen, werde ich hier nicht auf Details eingehen.

  2. Gemäß der Einführung des Box-Sizing-Attributs können Sie wissen, dass bei Einstellung auf Border-Box die Höhe = Polsterung + Randwert und der negative Wert des Rands erforderlich ist verwendet werden.


    1. Padding reduziert die Höhe des Inhalts selbst

    2. margin negativ Der Wert verkürzt den Abstand zwischen Kopf, Fußzeile und Inhalt

.main {  height: 100%;  clear: both;  box-sizing: border-box;  padding: 60px 0px 100px 0px;  margin: -60px 0px -100px 0px;
  }
  1. Die Implementierung der Bildlaufleiste in Der Inhaltsteil ist auf unseren Hauptteil zurückzuführen (das äußerste Div im Mittelteil, z. B. .main) und muss auf height:100 % eingestellt werden, damit seine Höhe den Bildschirm ausfüllt. Daher muss der äußeren Ebene des Inhaltslayouts ein Div (z. B. .main-main) hinzugefügt werden. Zu diesem Zeitpunkt ist die Höhe von .main-main das, was wir wollen. Der folgende mittlere Text enthält den CSS-Code:

.cont-main{
  margin: 0px 300px 0px 200px;
  overflow: hidden;
  overflow-y: auto;
  height: inherit;
}

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Transformation und Verwendung der Doppelflügleranordnung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen 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:Wie verwende ich CSS in HTML?Nächster Artikel:Wie verwende ich CSS in HTML?