CSS: Unterschied zwischen den Versionen

Aktuelle Version vom 5. September 2021, 12:52 Uhr

box-sizing

box-sizing: border-box;

Die Werte von border und padding werden nicht addiert zu height and width eines Elements

Diese Einstellung ist besonders wichtig bei input und textarea in Formularen

Collapsing margins

Wenn untere und obere Abstände von Blöcken unmittelbar aufeinander folgen, werden sie zu einem Abstand verschmolzen. Dieses Verhalten kann verhindert werden:

Einen eventuell unsichtbaren Rahmens um einen Bereich setzen ...

<div style="background: #FFFFCC; border: solid #FFF 1px;">

... oder durch Verwenden von padding

<div style="background: #FFFFCC; padding: 1px;">

Durch diese Workarounds wird der obere Rand von nachfolgenden Elementen nicht verschluckt. Man könnte für alle div Elemente einen solchen Rahmen formatieren, dann wäre das Problem möglicherweise generell behoben.

.div { border: solid #FFF 1px; }

display: flex

Flex Container

Ein Element wird zum Flex-Container durch folgende CSS Definition

/* Beispiel */
div { display:flex }

Es gibt einige Eigenschaften für Ausrichtung und Anordnung der Elemente im Flex Container

Siehe https://www.w3schools.com/css/css3_flexbox_container.asp

Flex Elemente

Für jedes Element des Containers können einige Eigenschaften definiert werden

Die wichtigsten Eigenschaften sind

div input { flex-grow: 0 } /* Keine Vergrößerung dieses Elements
div input { flex-shrink: 0 } /* Keine Verkleinerung dieses Elements
div input { flex-basis: 100px; } /* initiale Größe dieses Elements

Kurzschreibweise dieser drei Eigenschaften

div input { flex: 0 0 100px }

Weitere Eigenschaften siehe https://www.w3schools.com/css/css3_flexbox_items.asp

@@ Zeile 2: / Zeile 2: @@
 == box-sizing ==
   box-sizing: border-box;
-Border un Padding werden nicht addiert zu <tt>height</tt> and <tt>width</tt> eines Elements
+Die Werte von <tt>border</tt> und <tt>padding</tt> werden nicht addiert zu <tt>height</tt> and <tt>width</tt> eines Elements
-: Anwendung besonders wichtig bei Formularen
+: Diese Einstellung ist besonders wichtig bei <tt>input</tt> und <tt>textarea</tt> in Formularen
 == Collapsing margins ==
 Wenn untere und obere Abstände von Blöcken unmittelbar aufeinander folgen, werden sie zu '''einem''' Abstand verschmolzen.
@@ Zeile 14: / Zeile 15: @@
 Man könnte für alle <code>div</code> Elemente einen solchen Rahmen formatieren, dann wäre das Problem möglicherweise generell behoben.
   .div { border: solid #FFF 1px; }
+== display: flex ==
+=== Flex Container ===
+Ein Element wird zum Flex-Container durch folgende CSS Definition
+ /* Beispiel */
+ div { display:flex }
+Es gibt einige Eigenschaften für Ausrichtung und Anordnung der Elemente im Flex Container
+: Siehe https://www.w3schools.com/css/css3_flexbox_container.asp
+=== Flex Elemente ===
+Für jedes Element des Containers können einige Eigenschaften definiert werden
+: Die wichtigsten Eigenschaften sind
+ div input { flex-grow: 0 } /* Keine Vergrößerung dieses Elements
+ div input { flex-shrink: 0 } /* Keine Verkleinerung dieses Elements
+ div input { flex-basis: 100px; } /* initiale Größe dieses Elements
+Kurzschreibweise dieser drei Eigenschaften
+ div input { flex: 0 0 100px }
+: Weitere Eigenschaften siehe https://www.w3schools.com/css/css3_flexbox_items.asp