Was ist die Boxgrößeneigenschaft?-CSS-Tutorial-php.cn

Heim

Web-Frontend

CSS-Tutorial

Was ist die Boxgrößeneigenschaft?

爱喝马黛茶的安东尼

Jul 22, 2019 am 09:39 AM

box-sizing属性

Definition und Verwendung des Box-Sizing-Attributs

Das Box-Sizing-Attribut ist ein neues Attribut in CSS3, das Folgendes ermöglicht Sie definieren bestimmte Elemente so, dass sie in einen bestimmten Bereich passen (wenn Sie beispielsweise zwei umrandete Boxen nebeneinander platzieren müssen, können Sie dies tun, indem Sie die Box-Sizing-Eigenschaft auf „border-box“ setzen, was dazu führt, dass Browser zum Rendern der Box. Es gibt eine Box mit einer bestimmten Breite und Höhe, und der Rand und die Polsterung werden in die Box eingefügt.

Die Browser Internet Explorer, Opera und Chrome unterstützen das Attribut „Boxgröße“ nicht Unterstützt dieses Attribut noch, aber es ersetzt das Box-Sizing-Attribut-Syntaxformat

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

Zugehörige Informationen : „CSS_CSS3-Wissen

》

Parameterbeschreibung

content-box: Dies ist das durch CSS2.1 festgelegte Breiten- und Höhenverhalten. Die Breite und height werden jeweils auf das Inhaltsfeld des Elements angewendet.

border-box: Die für ein Element festgelegte Breite und Höhe bestimmen das Rahmenfeld des Elements, d. h. alle Polsterungen und Ränder Die für das Element angegebenen Ränder werden innerhalb der eingestellten Breite und Höhe gezeichnet. Die Breite und Höhe des Inhalts können durch Subtrahieren des Rahmens bzw. der Polsterung von der eingestellten Breite und Höhe ermittelt werden.

inherit: Gibt an, dass der Wert des Box-Sizing-Attributs vom übergeordneten Element geerbt werden soll.

Instanz:

<!DOCTYPE html><html><head><meta charset="utf-8" />
<title>css3 box-sizing属性笔记</title><style type="text/css">
body{background-color: #aaa;}div.container{width:30em;border:1em solid;}
.box{box-sizing:border-box;-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:50%;border:1em solid red;float:left;}
</style></head><body><div class="container">
<div class="box">这个 div占据左半部分。</div><div class="box">这个 div占据右半部分。</div>
</div></body></html>

Laufergebnis:

Das obige ist der detaillierte Inhalt vonWas ist die Boxgrößeneigenschaft?. 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

Verwandter Artikel

Eine kleine Erinnerung daran, dass Pseudoelemente Kinder sind.Apr 19, 2025 am 11:39 AM

Hier ist ein Container mit einigen Kinderelementen:

Menüs mit 'dynamischen Trefferbereichen'Apr 19, 2025 am 11:37 AM

Flyout -Menüs! Das zweite, das Sie für ein Menü implementieren müssen, das ein Hover -Ereignis verwendet, um mehr Menüelemente anzuzeigen. Zum einen sollten sie

Verbesserung der Video -Zugänglichkeit mit WebVTTApr 19, 2025 am 11:27 AM

"Die Kraft des Web liegt in seiner Universalität. Zugang von allen unabhängig von Behinderung ist ein wesentlicher Aspekt."- Tim Berners-Lee

Wöchentliche Plattform News: CSS :: Marker Pseudo-Element, Vorrendern von Webkomponenten, Hinzufügen von Webmenting zu Ihrer WebsiteApr 19, 2025 am 11:25 AM

In der Roundup:#039: DatePickers geben Tastaturbenutzer Kopfschmerzen, einen neuen Webkomponenten -Compiler, der bei der Bekämpfung von Fouc hilft.

Breite und flexible Gegenstände gut zusammen spielenApr 19, 2025 am 11:23 AM

Die kurze Antwort: Flex-Shrink und Flex-Basis sind wahrscheinlich das, worauf Sie suchen.

Positionieren Sie klebrige und TischkopfzeileApr 19, 2025 am 11:21 AM

Sie können nicht positioniert werden: klebrig; A

Wöchentliche Plattformnachrichten: HTML -Inspektion in der Suchkonsole, globaler Umfang von Skripten, Babel Env fügt Standardabfrage hinzuApr 19, 2025 am 11:18 AM

In der Welt der Web -Plattform -Nachrichten, in der die Google Search Console in der Welt der Web -Plattform -News -Such -Markup umgeht, lernen wir, dass benutzerdefinierte Eigenschaften einfacher werden können