Eigenschaften des CSS-Layout-Box-Modells

Dieses Mal werde ich Ihnen die Box-Modell--Attribute des CSS-Layouts vorstellen. Was sind die Vorsichtsmaßnahmen der Box-Modell-Attribute des CSS-Layouts? Das Folgende ist ein praktischer Fall Schauen Sie mal rein.

Breite/Höhe

In CSS können Sie für jedes Element auf Blockebene eine explizite Höhe festlegen.

Wenn die angegebene Höhe größer ist als die zum Anzeigen des Inhalts erforderliche Höhe, erzeugt die überschüssige Höhe einen visuellen Effekt, als ob eine zusätzliche Polsterung vorhanden wäre.

Wenn die angegebene Höhe kleiner ist als Die Höhe, die zum Anzeigen des Inhalts erforderlich ist. Abhängig vom Überlaufattribut muss die Bildlaufleiste auf overflow:auto gesetzt werden.

Auto

Die Breite, Höhe und der Rand können auf Auto eingestellt werden. Bei Elementen auf Blockebene ist die Breite so breit wie möglich, wenn sie auf „Auto“ eingestellt ist. Insbesondere: Elementbreite = enthaltende Blockbreite – horizontaler Elementrand – horizontale Elementrandbreite – horizontaler Elementabstand

Wenn die Höhe auf „Auto“ eingestellt ist, wird sie so schmal wie möglich sein. Im Detail gilt: Elementhöhe = Höhe, die gerade ausreicht, um den Inline-Inhalt aufzunehmen

[Hinweis] Wenn die Höhe des enthaltenden Blocks nicht explizit deklariert wird, wird die prozentuale Höhe des Elements auf automatisch zurückgesetzt

【Maximale und minimale Breite und Höhe】

min-width |

Prozentsatz: relativ zur Breite (Höhe) des enthaltenden Blocks

max-width | max-heightt

Anfangswert: keiner

Anwenden auf : Elemente auf Blockebene und Ersatzelement

Prozentsatz: relativ zur Breite (Höhe) des enthaltenden Blocks

[Hinweis] Wenn die minimale Breite (Höhe) größer als die maximale Breite ist ( Höhe), der Wert der minimalen Breite und Höhe ist genau

Innenrandauffüllung

Im Vergleich zu anderen Attributen des Boxmodells (z. B. negative Ränder, die häufig bei der Positionierung verwendet werden), Auffüllung Scheint recht zufriedenstellend zu sein und ist nicht kompatibel. Es gibt keine besonderen Probleme.

Bei Inline-Elementen wird der linke Abstand am Anfang des Elements, der rechte Abstand am Ende des Elements und der vertikale Abstand angewendet hat keinen Einfluss auf die Zeilenhöhe, aber auf die Größe selbst, außerdem ist die Hintergrundfarbe sichtbar

[Hinweis] Der Abstand darf nicht negativ sein

der Abstand

Anfangswert: Undefinierter

Prozentsatz: Relativ zur Breite des enthaltenden Blocks

[50 %]

Elemente auf Blockebene können durch Auffüllen einen quadratischen Effekt erzielen: 50 %, weil die Prozentwerte des horizontalen und vertikalen Abstands beziehen sich auf den enthaltenden Block. Bestimmt durch die Breite, wird häufig in mobilen Header-Bildern verwendet

Rand

Rand festlegen Rand erzeugt zusätzlichen Leerraum außerhalb des Elements. Bezieht sich normalerweise auf den Bereich, in dem keine anderen Elemente platziert werden können, und der Hintergrund des übergeordneten Elements ist in diesem Bereich zu sehen

Rand

Anfangswert : undefiniert

Gilt für: alle Elemente

Prozentsatz: relativ zur Breite des enthaltenden Blocks

[Hinweis] Bei gewöhnlichen Elementen ist der enthaltende Block die Blockebene Bei positionierten Elementen ist der enthaltende Block das übergeordnete Element. Daher ist der Randprozentsatz von gewöhnlichen Elementen relativ zur Breite des übergeordneten Elements auf Blockebene, der Randprozentsatz von positionierten Elementen ist relativ zur Breite des positionierten übergeordneten Elements.

Der Rand kann auf negative Werte eingestellt werden. margin und width und height unterstützen automatisch, und Margins haben sehr seltsame Überlappungseigenschaften.

Einführung mehrerer wichtiger Teile von Rändern, einschließlich Überlappung, automatische und ungültige Bedingungen

1. Überlappung

[Prämisse]

Nochmals: Randüberlappung Dies wird als Rand bezeichnet Zusammenführen. Dafür gibt es zwei Voraussetzungen

1. Es passiert nur bei Blockelementen (ausgenommen Float-, Absolut- und Inline-Block-Elemente)

2. Es passiert nur bei vertikalen Elementen Richtung (unabhängig vom

Schreibmodus

)

[Kategorie] und Randüberlappung

1. Angrenzende Geschwisterelemente

2. Die Randüberlappung zwischen dem übergeordneten Element und dem ersten oder letzten untergeordneten Element wird auch Randübertragung genannt

<style>
p{
    line-height: 2em;
    margin: 2px 0;
    
background-color
: lightblue;
    display:inline-block;
    width: 100%;}
</style>
<p>兄弟一</p>
<p>兄弟二</p>

Im Webseitenlayout betrachten wir den Rand aufgrund der Randüberlappung oft als eine „Frage“. Stil“ und verwenden Sie ihn so wenig wie möglich. Aber tatsächlich spielt es eine große Rolle,

Daher müssen wir die Überlappung gut nutzen. Wir können margin-top und

<style>
.box{
    background-color: pink;
    height:30px;}
.inner{
    margin-top: 1em;
    background-color: lightblue;}
</style>
<div class="box">
    <div class="inner">子级</div>
</div>

margin-bottom

gleichzeitig in den Listenelementen verwenden . Auf diese Weise ist die Seitenstruktur robuster und das Entfernen oder Positionieren des letzten Elements zerstört nicht das ursprüngliche Layout

2.auto Nur Breite/Höhe und Rand können eingestellt werden auf automatisch .

[Warum margin:auto keine vertikale Zentrierung erreichen kann]

  水平方向可以居中是因为块级元素的宽度默认是撑满父级元素的，如果给宽度设置一个固定值，而左右margin设置为auto，则可以平分剩余空间

  垂直方向不可以居中是因为块级元素的高度默认是内容高度，与父级元素的高度并没有直接的关系，而上下margin设置为auto，则被重置为0

margin: 0 auto;

【为什么图片使用margin:auto不能水平居中】

  图片无法水平居中，类似于块级元素无法垂直居中。因为图片的宽度width默认是自身宽度，与父元素的宽度没有直接关系。左右margin设置为auto，会被重置为0

  所以，图片要水平居中，需要设置为display:block元素

3.无效情形

  1、行内元素垂直margin无效

  因为行内元素垂直布局主要是通过行高line-height和垂直对齐vertical-align来影响的，垂直margin并不会影响它们，所以不会影响垂直布局。而在显示方式，margin区域不会显示元素背景，所以也不会影响自身元素的显示，所以行内元素垂直margin无效。[注意]不包括inline-block

　　2、某些表格类元素margin无效

<thead>``<tbody>``<tfoot>``<tr>``<col>``<colgroup>``<td>``<th>　　不可设置margin。

　　3、BFC造成的margin看似无效

  左侧元素使用浮动，右侧元素使用overflow-hidden实现两栏自适应的布局时，右侧元素的margin-left值只有足够大，才能看到效果。这是因为margin-left是相对于父元素左侧，而不是图片右侧

相信看了这些案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

相关阅读：

如何解决layer.photos()异步修改图片地址后显示异常的问题

怎样监听angularJs列表数据是否渲染完毕

ES6的“类”与面向对象的关系

ES6箭头函数中的this应该如何使用

Das obige ist der detaillierte Inhalt vonEigenschaften des CSS-Layout-Box-Modells. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!