Obwohl CSS einfach ist, verfügt es über viele Details und hohe Fähigkeiten, was es leicht zu erlernen, aber schwer zu beherrschen macht.
Wie erreicht man feste linke und rechte 300 Pixel, mittlere Breite adaptiv?
hat die folgende Struktur
<div class="wrapper">
<div class="item left">左</div>
<div class="item right">右</div>
<div class="item center">中</div>
</div>Öffentlicher Stil, legen Sie die Höhe fest, legen Sie die linke und rechte Breite fest auf 300 Pixel fest, links und rechts sind rot und die Mitte ist gelb .
.item {
height: 400px;
}
.left,
.right {
width: 300px;
background: #f00;
}
.center {
background: yellow;
}1. Double-Float-Methode
.left {
float: left;
}
.right {
float: right;
}Prinzip: Float löst sich nicht vollständig vom Dokumentenfluss und nimmt den ursprünglichen Platz ein
Offizielle MDN-Erklärung: Dieses Element wird aus dem normalen Fluss (Dokumentfluss) der Webseite entfernt, behält jedoch weiterhin den Teilfluss bei (im Gegensatz zur absoluten Positionierung).
F: Warum sollte „center“ nach „leftr“ und „right“ platziert werden?
A:
Der Browser lädt Seiten von oben nach unten, „
left“ wird nach links verschoben und „right“ wird nach rechts verschoben. Beim Rendern der Mitte ignoriert der Browser die vom Dokumentfluss getrennten linken und rechten Elemente, und das mittlere Element nimmt von Anfang an die gesamte Zeile ein. Es wird jedoch festgestellt, dass die linke Seite immer noch 300 Pixel und die rechte Seite immer noch 300 Pixel einnimmt Weitere 300 Pixel, sodass die Breite der Mitte zwischen der linken und rechten Breite anpassbar ist
2. Absolute Positionierungsmethode
<style>
.left {
position: absolute;
top: 0;
left: 0;
}
.right {
position: absolute;
top: 0;
right: 0;
}
.center {
margin: 0 300px;
}
</style>
<div class="wrapper">
<div class="item left">左</div>
<div class="item center">中</div>
<div class="item right">右</div>
</div>Prinzip: absolute Positionierung links und rechts, außerhalb des Dokumentenflusses. In der Mitte wird keine Breite festgelegt, nur der linke und rechte Rand werden festgelegt und der verbleibende Platz einer Reihe von Elementen auf Blockebene wird automatisch ausgefüllt
3. Elastische Box
.wrapper {
display: flex;
}
.center {
flex: 1;
}Stellen Sie display: flex im übergeordneten Container ein, stellen Sie 300 Pixel links und rechts ein und stellen Sie flex in der Mitte auf 1 ein. Wird der Effekt realisiert?
Wenn der Browser ausgeführt wird, scheint dies korrekt zu sein, aber tatsächlich sind nach dem Verkleinern des Bildschirms links und rechts nicht auf 300 Pixel festgelegt und die Breite wird komprimiert.
Sie müssen außerdem die folgenden Stile hinzufügen:
.left,.right {
flex-shrink: 0; /*等同flex:0 0 auto */
}Prinzip: Flex: 1 ist eigentlich eine Abkürzung für drei Attribute, flex:1; die äquivalent sind flex:1 1 auto;.
Einfach ausgedrückt stellen sie dar: die minimale Breite des Kompressionsverhältnisses, wenn der verbleibende Platz im Container reduziert wird. Spezifische Details finden Sie unter: MDN – Elastic Box
. Daraus wissen wir, dass die Mitteneinstellung die linke und rechte Einstellung flex：1; ist flex:1 1 auto; (füllt automatisch die verbleibende Breite des Containers, das Standardkomprimierungsverhältnis und die Standardmindestbreite aus
) flex-shrink: 0;. Flex-Shrink ist das zweite Attribut in der Abkürzung von Flex, äquivalent flex:0 0 auto; (keine Einstellung zum automatischen Ausfüllen der verbleibenden Breite des Containers, 0 komprimiert nicht die Mindestbreite, der Standardwert ist automatisch).
F: Warum sind die Einstellungen von links und rechts flex-shrink: 0;gleich flex:0 0 autound die Mindestbreite ist „Auto“, die Breite ist aber immer noch auf 300 Pixel festgelegt?
Antwort: Die Mindestbreite von „Auto“ ist der Standardwert und die Priorität ist niedriger als die von eingestellte Breite spezifische Elemente. Wenn festgelegt flex:0 0 400px, beträgt die linke und rechte Mindestbreite 400 Pixel und die Priorität ist höher als die vom Element festgelegte Breite
Viertens: Raster-Layout-Raster
Das einfachste Rasterlayout
.wrapper {
display: grid;
grid-template-columns: 300px 1fr 300px;
} Schnelles Verständnis: Grid-Template-Columns ist das Attribut des übergeordneten Containers. Es bedeutet nicht oben, rechts, unten und links, sondern die Breite der drei untergeordneten Elemente (300 Pixel füllen automatisch den verbleibenden Raum von 300 Pixel aus). Wenn es geschrieben wird, bedeutet dies, dass die Breite der vier untergeordneten Elemente grid-template-columns: 300px 1fr 2fr 100px;jeweils 300 Pixel beträgt, 1/3 verbleibender Platz, 2/3 verbleibender Platz, 100 Pixel
5. Tabellenlayout
.wrapper {
width: 100%;
display: table;
}
.wrapper>.item:not(.center) {
display: table-cell;
}Legen Sie einfach die linken und rechten Elemente als Zellen fest, aber wenn der Bildschirm verkleinert wird, werden die linken und rechten festen 300 Pixel komprimiert. Frage
: Warum müssen Sie die Breite auf 100 % einstellen?
Antwort: display:table ähnelt der Tabelle Element, aber es handelt sich eigentlich um ein Inline-Block-Level-Element, nicht um Block-Level-Elemente.
Tabellen reagieren nicht automatisch: Wenn Sie den richtigen Layout-Container verwenden (z. B.<header>,<section>,<article>oder<div>einen generischen Flow-Content-Container, der ohne CSS keine Auswirkungen auf den Inhalt oder das Layout hat.)), sind sie Die Standardbreite einer Tabelle beträgt 100 % des übergeordneten Elements. Die Standardgröße einer Tabelle basiert auf ihrem Inhalt. Daher müssen zusätzliche Schritte unternommen werden, damit der Tabellenlayoutstil auf verschiedenen Geräten effizient funktioniert.
6. CSS-Berechnung, JS-Berechnung
① Berechnung berechnen
.wrapper {
white-space: nowrap;
font-size: 0;
-webkit-text-size-adjust: none;
}
.item {
display: inline-block;
}
.center {
width: calc(100vw - 300px * 2);
}Prinzip: Platzieren Sie das Div einfach in derselben Zeile und berechnen Sie die Breite mit calc. Dies font-size: 0;-webkit-text-size-adjust: none;dient dazu, die Lücke zwischen Inline-Blöcken zu schließen. Andere Methoden sind ebenfalls verfügbar
② js-Berechnung
.wrapper {
white-space: nowrap;
font-size: 0;
-webkit-text-size-adjust: none;
}
.item {
display: inline-block;
transition: 0.4s;
}
<script>
window.onload = function() {
function computed() {
const oCenter = document.querySelector(".wrapper .center")
oCenter.style.width =
innerWidth - 300 * 2 < 0 ? 0 + "px" : innerWidth - 300 * 2 + "px"
}
computed()
var timer = null
window.addEventListener("resize", () => {
clearTimeout(timer)
timer = setTimeout(computed, 300)
})
}
</script>In Übereinstimmung mit calc können Sie die relative Breite berechnen
Zusammenfassung :
Die absolute Positionierungsmethode ist vom Dokumentenfluss getrennt, was leicht zu Layoutproblemen führen kann.
Das Rasterlayout ist einfach und leistungsstark und das mobile Endgerät ist gut kompatibel.
Die js-Methode ist vielseitig, aber nicht einfach zu warten
. Es wird empfohlen, Flex und Grid zu verwenden.