Lösung für das Problem, dass die Div-Breite auf width:100% eingestellt ist und dann die Polsterung oder der Rand das übergeordnete Element überschreitet
|
Vorwort In diesem Artikel wird erläutert, wie Sie mit dem neuen CSS3-Attribut „box-sizing“ das Problem lösen, die Div-Breite auf 100 % einzustellen und dann die Polsterung oder den Rand jenseits des übergeordneten Elements festzulegen. Freunde in Not können sich darauf beziehen. Grammatik Box-Größe: Inhaltsbox|Rahmenbox|erben; Wert 1, Inhaltsbox Dies ist das von CSS2.1 angegebene Breiten- und Höhenverhalten. Die Breite und Höhe werden jeweils auf das Inhaltsfeld des Elements angewendet. Zusätzlich zur Breite und Höhe werden auch die Polsterung und der Rand des Elements gezeichnet. Wert 2, Rahmenbox Die für ein Element angegebene Breite und Höhe bestimmen die Rahmenbox des Elements. Das heißt, alle für das Element angegebenen Abstände und Ränder werden innerhalb der angegebenen Breite und Höhe gezeichnet. Die Inhaltsbreite und -höhe ergeben sich durch Subtrahieren der Rahmen- und Polsterungswerte von der eingestellten Breite bzw. Höhe. Wert 3: erben Gibt an, dass der Wert der Box-Sizing-Eigenschaft vom übergeordneten Element übernommen werden soll. Beispiel <!DOCTYPE html>
<html>
<Kopf>
<Stil>
Div.Container
{
Breite: 100 %;
Rand: 1em durchgezogen;
Polsterung: 15px;
Boxgröße: Rahmenbox;
}
Div.Box
{
Boxgröße: Rahmenbox;
-moz-box-sizing:Rahmenbox; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
Breite: 100 %;
Rand: 1em durchgehend rot;
schweben: links;
Polsterung: 15px;
}
</Stil>
</Kopf>
<Text>
<div Klasse="Container">
<div class="box">Dieses Div nimmt die linke Hälfte ein. </div>
</div>
</body>
</html>Zusammenfassen Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, dass der Inhalt dieses Artikels Ihnen bei Ihrem Studium oder Ihrer Arbeit hilfreich sein kann. Wenn Sie Fragen haben, können Sie eine Nachricht hinterlassen. |
<<: Leistung des Node+Express-Testservers
Artikel empfehlen
MySQL-Installationstutorial unter Centos7
Tutorial zur MySQL-Installation. Zu Ihrer Informa...
So ändern Sie die Konfiguration von „create-react-app“, ohne „eject“ zu verwenden
1. Warum wird das Auswerfen nicht empfohlen? 1. W...
Tutorial-Diagramm zur Installation des MySQL-Dienstes über MySQL Installer unter Windows
MYSQL bietet offiziell eine Installer-Methode zum...
Lösung für das Problem einer großen Anzahl von php-cgi.exe-Prozessen auf dem Server, die dazu führen, dass die CPU 100 % belegt
Optimieren Sie die FastCGI-Konfigurationsdatei fc...
Front-End-Implementierung der GBK- und GB2312-Kodierung und Dekodierung von Zeichenfolgen (Zusammenfassung)
Vorwort Bei der Entwicklung eines Projekts stieß ...
MariaDB-Serverinstallation der MySQL-Reihe
Inhaltsverzeichnis Tutorial-Reihe 1. Installieren...
Verständnis des CSS-Selektorgewichts (persönlicher Test)
Code kopieren Der Code lautet wie folgt: <styl...
Das Front-End muss wissen, wie Bilder verzögert geladen werden (drei Methoden)
Inhaltsverzeichnis 1. Was ist Lazy Loading? 2. Im...
Der gesamte Prozess der IDEA-Integration von Docker zur Bereitstellung eines Springboot-Projekts
Inhaltsverzeichnis 1. IDEA lädt das Docker-Plugin...
Bild-Tag für HTML-Webseite
Bild-Tag <IMG> einfügen Die farbenfrohen Web...
10 beliebte Windows-Apps, die auch unter Linux verfügbar sind
Laut dem Datenanalyseunternehmen Net Market Share...
Detaillierte Erläuterung der zehn am häufigsten verwendeten Zeichenfolgenfunktionen in MySQL
Hallo zusammen! Ich bin Mr. Tony, der nur über Te...
UTF-8- und GB2312-Webkodierung
In letzter Zeit haben mich viele Studenten zur Ko...
So stellen Sie einen Code-Server mit Docker bereit
Ziehen Sie das Bild # Docker-Pull Codercom/Code-S...
Memcached-Methode zum Erstellen eines Cache-Servers
Vorwort Viele Webanwendungen speichern Daten in e...