CSS - Versionsgeschichte

WikiSysop: /* Flex Elemente */

2026-04-19T14:52:18Z

Flex Elemente

← Nächstältere Version		Version vom 19. April 2026, 14:52 Uhr
Zeile 32:		Zeile 32:
	div input { flex: 0 0 100px }		div input { flex: 0 0 100px }
	: Weitere Eigenschaften siehe https://www.w3schools.com/css/css3_flexbox_items.asp		: Weitere Eigenschaften siehe https://www.w3schools.com/css/css3_flexbox_items.asp
			=== textarea ===
			Das Attribut <tt>rows</tt> macht Probleme - jedenfalls in Firefox. Am besten darauf verzichten oder die Höhe des Elements per JS Eventhandler ändern.

WikiSysop am 5. September 2021 um 12:52 Uhr

2021-09-05T12:52:45Z

← Nächstältere Version		Version vom 5. September 2021, 12:52 Uhr
Zeile 15:		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.		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; }		.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

WikiSysop: /* box-sizing */

2021-09-05T12:30:39Z

box-sizing

← Nächstältere Version		Version vom 5. September 2021, 12:30 Uhr
Zeile 3:		Zeile 3:
	box-sizing: border-box;		box-sizing: border-box;
	Die Werte von <tt>border</tt> und <tt>padding</tt> 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 ==		== Collapsing margins ==

WikiSysop: /* box-sizing */

2021-09-05T12:29:16Z

box-sizing

← Nächstältere Version		Version vom 5. September 2021, 12:29 Uhr
Zeile 2:		Zeile 2:
	== box-sizing ==		== box-sizing ==
	box-sizing: border-box;		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		: Anwendung besonders wichtig bei Formularen

	== Collapsing margins ==		== Collapsing margins ==
	Wenn untere und obere Abstände von Blöcken unmittelbar aufeinander folgen, werden sie zu '''einem''' Abstand verschmolzen.		Wenn untere und obere Abstände von Blöcken unmittelbar aufeinander folgen, werden sie zu '''einem''' Abstand verschmolzen.

WikiSysop: /* Collapsing margins */

2021-09-05T12:28:18Z

Collapsing margins

← Nächstältere Version		Version vom 5. September 2021, 12:28 Uhr
Zeile 1:		Zeile 1:

			== box-sizing ==
			box-sizing: border-box;
			Border un Padding werden nicht addiert zu <tt>height</tt> and <tt>width</tt> eines Elements
			: Anwendung besonders wichtig bei Formularen
	== Collapsing margins ==		== Collapsing margins ==

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

WikiSysop: 1 Version importiert

2020-10-07T16:02:43Z

1 Version importiert

← Nächstältere Version	Version vom 7. Oktober 2020, 16:02 Uhr
(kein Unterschied)

188.22.73.11: /* Collapsing margins */

2012-06-03T10:11:17Z

Collapsing margins

Neue Seite

== 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 ...
<pre><div style="background: #FFFFCC; border: solid #FFF 1px;"></pre>
* ... oder durch Verwenden von '''padding'''
<pre><div style="background: #FFFFCC; padding: 1px;"></pre>
Durch diese Workarounds wird der obere Rand von nachfolgenden Elementen nicht verschluckt.
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; }