WebTech - Wolf 11

• zusammenfallende vertikale Aussenabstände
• wenn margin 15px und 10px die sich berühren, so wird einfach der grössere Abstand verwendet.

• addiere die width heigth padding margin und border (ggf. 2x) von allen Elementen

• Rechnerei hat ein Ende
• Boxmodell verwenden durch: box-sizing: border-box
• width und heigth berücksichtigen auch padding und border
• --> border und padding haben keinen Einfluss mehr, da width stärker gewichtet ist

box-sizing:

• content-box: klassisches Box-Modell
• border-box: alternatives Box-Modell
• inherit: übernimmt den Eltern-Wert

wird oft zu Beginn beim Universalselektor angegeben *{   }

Kurzschreibweise:

• border-color: black; --> alle 4 Seiten schwarz
• border-color: red green; oben und unten rot, links und rechts grün
• border-color red green blue yellow; Uhrzeigersinn

• none
• hidden, vgl. none
• dotted = gepunktet
• dashed = gestrichelt
• solid = durchgezogen
• double = doppelte durchgezogene Linie
• groove = 3D Effekt
• ridge = 3D Effekt
• inset = 3D Effekt
• outset = 3D Effekt

Häufig verwendet:

• background-color
• background-image: url('...');
• background-position: Position des Hintergrundbildes
• background-repeat: Hintergrund wiederholen
• background-attachment: kann im Hintergrund gescrollt werden?

1. Transparent

• opacity: 0.5;
• rgba(x,x,x,x)

2. Farbverlauf

• background: linear-gradient (white, orange);
• background: linear-gradient (to right, white, organe);
• background: linear-gradient (to right, white 30%, orange 70%)

3. Shadow

• box-shadow: 4px 4px gray;

4. Runde Ecken

• border-radius: 20px;
• border-top-left-radius: 20px;
• etc.