Über die Überlappung von Randwert und vertikalem Rand in CSS
|
Rand paralleler Boxen (Überlappung doppelter Ränder) – Interviewfrage: Wenn eine Box einen oberen Rand und die andere Box einen unteren Rand hat, gibt es dann ein Randüberlappungsproblem? Lösung: Nehmen Sie den größeren Wert, nicht die Summe ihrer Werte, sondern den mit dem größeren Wert.
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="utf-8"/>
<Titel></Titel>
<style type="text/css">
*{Rand: 0;Padding: 0;}
.box1,.box2{
Breite: 200px;
Höhe: 200px;
}
.box1{
Hintergrundfarbe: #f90;
Rand unten: 20px;
}
.box2{
Hintergrundfarbe: Aqua;
Rand oben: 50px;
}
</Stil>
</Kopf>
<Text>
<div Klasse="Box1"></div>
<div Klasse="box2"></div>
</body>
</html>
Rand und Polsterung haben im Uhrzeigersinn dieselbe Ausrichtung und denselben Wert (oben, rechts, unten, links). Klicken Sie hier, um „Polsterung und Abkürzungen für das CSS-Boxmodell“ anzuzeigen. Dies ist das Ende dieses Artikels über Randwerte und vertikale Randüberlappungen in CSS. Weitere Informationen zu Rändern und vertikalen Randüberlappungen finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen! |
<<: TypeScript verwendet vscode, um den Codekompilierungsprozess zu überwachen
>>: HTML-Cellpadding- und Cellspacing-Attribute in Bildern erklärt
Artikel empfehlen
Die Entsprechung zwischen Tomcat- und JDK-Versionen und die Funktionen jeder Tomcat-Version
Apache Tomcat ist eine Open-Source-Software, die ...
Zusammenfassung der Kenntnisse und der Verwendung von Linux-VI-Befehlen
Detaillierte Erklärung des Linux-Befehls vi Der v...
Einführung in die schnelle Docker-Bereitstellung eines SpringBoot-Projekts
1. Docker installieren Öffnen Sie zunächst die Li...
Was ist dies in einer Punkt-für-Punkt-Reihe von JavaScript?
Verstehe das Vielleicht haben Sie this in anderen...
Beispiel für die Einrichtung eines Third-Level-Domain-Namens in nginx
Problembeschreibung Durch die Konfiguration von n...
WeChat-Applet implementiert Taschenrechnerfunktion
In diesem Artikel wird der spezifische Code für d...
Centos7.3 startet oder führt beim Booten automatisch angegebene Befehle aus
In CentOS7 wurden die Berechtigungen der Datei /e...
CSS-Beispielcode zum Zeichnen eines Lutschers
Hintergrund: Machen Sie jeden Tag ein wenig Forts...
Ubuntu 18.04 Ein-Klick-Upgrade aller Python-Pakete von Drittanbietern und Installation von Python-Paketen
1. Was ist Pip pip ist ein Python-Paketverwaltung...
XHTML-Tutorial: XHTML-Grundlagen für Anfänger
<br />Der Inhalt dieser Site ist Original. B...
MySQL Master-Slave-Synchronisation, Implementierungsprinzip des Transaktions-Rollbacks
BinLog BinLog ist ein Binärprotokoll, das alle Än...
Node verwendet das Modul async_hooks zur Anforderungsverfolgung
Das Modul async_hooks ist eine experimentelle API...
Lösung für das Problem des Springens der Textposition, wenn das Suchtextfeld den Fokus verlässt
Beim Setzen des Textes im Suchtextfeld springt di...
MySQL-Anmeldefehler beheben: „Zugriff für Benutzer ‚root‘@‚localhost‘ verweigert“
Erstens weiß ich nicht, warum ich mich über die B...
So verwenden Sie uni-app, um Schaltflächen und Suchfelder in der oberen Navigationsleiste anzuzeigen
Vor Kurzem bereitete sich das Unternehmen auf die...