Html/CSS: Unterschied zwischen den Versionen
Zur Navigation springen
Zur Suche springen
| Zeile 25: | Zeile 25: | ||
[https://www.w3schools.com/cssref/css3_pr_box-sizing.asp https://www.w3schools.com/cssref/css3_pr_box-sizing.asp] | [https://www.w3schools.com/cssref/css3_pr_box-sizing.asp https://www.w3schools.com/cssref/css3_pr_box-sizing.asp] | ||
=== | === Inhalte zentrieren === | ||
<pre> | <pre> | ||
.class { | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
} | |||
</pre> | </pre> | ||
==== Links ==== | ==== Links ==== | ||
[https:// | [https://wiki.selfhtml.org/wiki/CSS/Tutorials/Inhalte_zentrieren https://wiki.selfhtml.org/wiki/CSS/Tutorials/Inhalte_zentrieren] | ||
=== | === width: 100% and margin === | ||
<pre> | <pre> | ||
width: -moz-calc(100% - 10px); | |||
width: -webkit-calc(100% - 10px); | |||
width: -o-calc(100% - 10px); | |||
width: calc(100% - 10px); | |||
</pre> | </pre> | ||
==== Links ==== | ==== Links ==== | ||
[https:// | [https://stackoverflow.com/questions/13322789/display-a-div-width-100-with-margins https://stackoverflow.com/questions/13322789/display-a-div-width-100-with-margins] | ||
=== Links === | === Links === | ||
Version vom 20. Dezember 2018, 10:30 Uhr
CSS
:nth-child(n)
Eigenschaft gilt für das n-te Kind eines Elements. n kann eine Nummer, ein Schlüsselwort oder eine Formel sein.
Beispiel:
tr:nth-child(even) {background-color: #f2f2f2;}
Border Box
Damit die Komponentengröße generell immer mit Rand bemessen wird, in der CSS-Datei folgendes eintragen:
* {
box-sizing: border-box;
}
Links
https://www.w3schools.com/cssref/css3_pr_box-sizing.asp
Inhalte zentrieren
.class {
display: flex;
align-items: center;
justify-content: center;
}
Links
https://wiki.selfhtml.org/wiki/CSS/Tutorials/Inhalte_zentrieren
width: 100% and margin
width: -moz-calc(100% - 10px); width: -webkit-calc(100% - 10px); width: -o-calc(100% - 10px); width: calc(100% - 10px);
Links
https://stackoverflow.com/questions/13322789/display-a-div-width-100-with-margins
Links
https://www.w3schools.com/cssref/default.asp
https://www.w3schools.com/css/css_website_layout.asp
https://css-tricks.com/snippets/css/complete-guide-grid/
Html
Links
https://www.w3schools.com/html/
Zurück zu Hauptseite