CSS3弹性盒模型_html/css_WEB-ITnose
弹性盒模型
- 弹性盒模型，在使用弹性盒模型时，父元素必须要加：display：box; 或display: inline-box; box-orient定义盒模型的布局方向，horizontal水平显示，vertical垂直显示
-
<style> .box {height: 100px; border: 10px solid #000; padding: 10px; display: -webkit-box; -webkit-box-orient: vertical;} .box div {width: 100px; height: 100px; background:red; border: 1px solid #fff;}</style><body> <div class="box"> <div>1</div> <div>2</div> <div>3</div> </div></body>Nach dem Login kopieren - 元素排列顺序box-direction: Normal, reverse（反序）
-
<style> .box {height: 100px; border: 10px solid #000; padding: 10px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-box-direction: reverse;} .box div {width: 100px; height: 100px; background:red; border: 1px solid #fff;}</style><body> <div class="box"> <div>1</div> <div>2</div> <div>3</div> </div></body>Nach dem Login kopieren - 元素排列顺序,box-ordinal-group:123..... 设置元素的具体的排列顺序
-
<style> .box {height: 100px; border: 10px solid #000; padding: 10px; display: -webkit-box; -webkit-box-orient: vertical;} .box div {width: 100px; height: 100px; background:red; border: 1px solid #fff;} .box div:nth-of-type(1) {-webkit-box-ordinal-group: 2;} .box div:nth-of-type(2) {-webkit-box-ordinal-group: 3;} .box div:nth-of-type(3) {-webkit-box-ordinal-group: 1;}</style><body> <div class="box"> <div>1</div> <div>2</div> <div>3</div> </div></body>Nach dem Login kopieren - 弹性盒模型（2），box-flex定义盒子的弹性空间，定义盒子中每个div所占的份数，类似于定义百分比，子元素的尺寸 = 盒子的尺寸 * 子元素的box-flex属性值 / 所有子元素的box-flex属性值的和
-
<style> .box {height: 100px; border: 10px solid #000; padding: 10px; display: -webkit-box; -webkit-box-orient: vertical;} .box div {width: 100px; height: 100px; background:red; border: 1px solid #fff;} .box div:nth-of-type(1) {-webkit-box-flex: 1;} .box div:nth-of-type(2) {-webkit-box-flex: 2;} .box div:nth-of-type(3) {-webkit-box-flex: 3;}</style><body> <div class="box"> <div>1</div> <div>2</div> <div>3</div> </div></body>Nach dem Login kopieren - box-pack在水平方向上对盒子富裕的空间进行管理，属性值有：start(富裕空间在右侧), end(富裕空间在左侧), center(富裕空间在两侧), justify(富裕空间平均分配到元素之间的间隙)
-
<style> .box {height: 100px; border: 10px solid #000; padding: 10px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -webkit-box-pack: end;} .box div {width: 100px; height: 100px; background:red; border: 1px solid #fff;}</style><body> <div class="box"> <div>1</div> <div>2</div> <div>3</div> </div></body>Nach dem Login kopieren - box-align在垂直方向上对元素的位置进行管理，有三个属性值：start(富裕空间在底部), end(富裕空间在顶部), center(垂直居中)
- 盒 模型阴影box-shadow: [inset] x, y, blur, [spread], color; inset: 投影方式（内投影）； x, y: 阴影偏移； blur: 模糊半径； spread: 扩展阴影半径（先扩展一定像素再模糊）； color: 阴影颜色；
-
<style> .box {width: 100px; height: 100px; margin: 100px; background: red; box-shadow: 10px 10px 30px blue;}</style><body> <div class="box"></div></body>Nach dem Login kopieren - box-reflect倒影,有四个属性，表示四个方向分别是： above, below, left, right;
-
<style><br /> // reflect表示倒影和元素之间的距离 img { display: block; margin: 200px auto; -webkit-box-reflect: below 10px;}</style><body> <img src="" / alt="CSS3弹性盒模型_html/css_WEB-ITnose" ></body>Nach dem Login kopieren - 渐变: -webkit-linear-gradient(red 0, blue 100%);
- resize: both(上下左右均可拖动)，horizontal（水平可拖动），vertical（垂直可拖动）; 一定要配合overflow：auto使用
-
<style> // 水平方向上可以拖动 .box {width: 100px; height: 100px; background: url(1.png); border: 5px solid #000; resize: horizontal; overflow: auto;}</style><body> <div class="box"></div></body>Nach dem Login kopieren - box-sizing盒模型的解析模式
- content-box 标准盒模型 width/height = content
- border-box 怪异盒模型 width/height = border + padding + content
欢迎交流~
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1382
52
Was ist der Zweck des & lt; Fortschritts & gt; Element?
Mar 21, 2025 pm 12:34 PM
Der Artikel erörtert den HTML & lt; Progress & gt; Element, Absicht, Styling und Unterschiede vom & lt; Meter & gt; Element. Das Hauptaugenmerk liegt auf der Verwendung & lt; Fortschritt & gt; Für Aufgabenabschluss und & lt; Meter & gt; für stati
Was ist der Zweck des & lt; datalist & gt; Element?
Mar 21, 2025 pm 12:33 PM
Der Artikel erörtert den HTML & lt; Datalist & gt; Element, das die Formulare verbessert, indem automatische Vorschläge bereitgestellt, die Benutzererfahrung verbessert und Fehler reduziert werden.Character Count: 159
Was ist der Zweck des & lt; Meter & gt; Element?
Mar 21, 2025 pm 12:35 PM
Der Artikel erörtert das HTML & lt; Meter & gt; Element, verwendet zur Anzeige von Skalar- oder Bruchwerten innerhalb eines Bereichs und seine gemeinsamen Anwendungen in der Webentwicklung. Es differenziert & lt; Meter & gt; von & lt; Fortschritt & gt; und Ex
Was ist das Ansichtsfenster -Meta -Tag? Warum ist es wichtig für reaktionsschnelles Design?
Mar 20, 2025 pm 05:56 PM
In dem Artikel wird das Ansichtsfenster -Meta -Tag erörtert, das für das reaktionsschnelle Webdesign auf mobilen Geräten unerlässlich ist. Es wird erläutert, wie die ordnungsgemäße Verwendung eine optimale Skalierung von Inhalten und Benutzerinteraktion gewährleistet, während Missbrauch zu Design- und Zugänglichkeitsproblemen führen kann.
Was ist der Zweck des & lt; iframe & gt; Etikett? Was sind die Sicherheitsüberlegungen bei der Verwendung?
Mar 20, 2025 pm 06:05 PM
Der Artikel erörtert das & lt; iframe & gt; Der Zweck von Tag, externe Inhalte in Webseiten, seine gemeinsamen Verwendungen, Sicherheitsrisiken und Alternativen wie Objekt -Tags und APIs einzubetten.
Ist HTML für Anfänger leicht zu lernen?
Apr 07, 2025 am 12:11 AM
HTML ist für Anfänger geeignet, da es einfach und leicht zu lernen ist und schnell Ergebnisse sehen kann. 1) Die Lernkurve von HTML ist glatt und leicht zu beginnen. 2) Beherrschen Sie einfach die grundlegenden Tags, um Webseiten zu erstellen. 3) hohe Flexibilität und kann in Kombination mit CSS und JavaScript verwendet werden. 4) Reiche Lernressourcen und moderne Tools unterstützen den Lernprozess.
Die Rollen von HTML, CSS und JavaScript: Kernverantwortung
Apr 08, 2025 pm 07:05 PM
HTML definiert die Webstruktur, CSS ist für Stil und Layout verantwortlich, und JavaScript ergibt eine dynamische Interaktion. Die drei erfüllen ihre Aufgaben in der Webentwicklung und erstellen gemeinsam eine farbenfrohe Website.
Was ist ein Beispiel für ein Start -Tag in HTML?
Apr 06, 2025 am 12:04 AM
AnexampleofaTartingTaginHtmlis, die, die starttagsaresesinginhtmlastheyinitiateElements, definetheirtypes, andarecrucialForstructuringwebpages und -konstruktionsthedoms.
