Heim  >  Artikel  >  Web-Frontend  >  So lösen Sie das Problem, nachdem DIV die Breite festgelegt hat und das übergeordnete Element überschreitet

So lösen Sie das Problem, nachdem DIV die Breite festgelegt hat und das übergeordnete Element überschreitet

php中世界最好的语言
php中世界最好的语言Original
2018-01-20 09:24:363068Durchsuche

Dieses Mal zeige ich Ihnen, wie Sie das Problem lösen können, dass DIV das übergeordnete Element nach dem Festlegen der Breite überschreitet. Welche Vorsichtsmaßnahmen gibt es, um das Problem zu lösen, dass DIV das übergeordnete Element nach dem Festlegen der Breite überschreitet? Das Folgende ist ein praktischer Fall, werfen wir einen Blick darauf.

Vorwort

In diesem Artikel wird die Verwendung des neuen Attributs box-sizing von CSS3 vorgestellt, um das Problem zu lösen, die Div-Breite auf width: 100 % zu setzen und dann padding oder MargeBei Problemen, die über das übergeordnete Element hinausgehen, können sich Freunde in Not darauf beziehen.

Syntax

box-sizing: content-box|border-box|inherit;


Wert eins, Inhaltsfeld


Dies ist die von CSS2 angegebene Breite und Höhe. 1

Verhalten.

Breite und Höhe werden separat auf die Inhaltsbox des Elements angewendet.


Zeichnet die

Polsterung und den Rand des Elements außerhalb seiner Breite und Höhe.

Wert zwei, Rahmenfeld


Die für das Element festgelegte Breite und Höhe bestimmen das Rahmenfeld des Elements.


Das heißt, alle für das Element angegebenen Abstände und Ränder werden innerhalb der festgelegten Breite und Höhe gezeichnet.


Die Breite und Höhe des Inhalts werden durch Subtrahieren des Randes und der Polsterung von der eingestellten Breite bzw. Höhe ermittelt.


Wert drei, erben


gibt an, dass der Wert des

Box-Sizing-Attributs vom übergeordneten Element geerbt werden soll.

<!DOCTYPE html>
<html>
<head>
<style>
div.container
{
width:100%;
border:1em solid;
padding:15px;
box-sizing:border-box;
}
div.box
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:100%;
border:1em solid red;
float:left;
padding:15px;
}
</style>
</head>
<body>
 
<div class="container">
<div class="box">这个 div 占据左半部分。</div>
</div>
 
</body>
</html>
Ich glaube, dass Sie die Methoden beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

So verwenden Sie den SSE-Server von h5 zum Senden von EventSource-Ereignissen

Details zum lokalen Speicher und zur lokalen Datenbank von H5 Wir stellen vor:

So implementieren Sie die Scroll-Barrage-Funktion in h5 durch die Leinwand

Das obige ist der detaillierte Inhalt vonSo lösen Sie das Problem, nachdem DIV die Breite festgelegt hat und das übergeordnete Element überschreitet. 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