c2b_default

WebTech - Wolf 11

Grundlagen

Grundlagen

8
0.0 (0)

Set of flashcards Details

Flashcards 8
Language Deutsch
Category Computer Science
Level Other
Created / Updated 14.02.2021 / 14.02.2021
Weblink
https://card2brain.ch/box/20210214_webtech_wolf_10_c-FH
Embed
<iframe src="https://card2brain.ch/box/20210214_webtech_wolf_10_c-FH/embed" width="780" height="150" scrolling="no" frameborder="0"></iframe>
Study

Erläutere das klassische Box-Modell von CSS

Klassischerweise besteht das Box-Modell aus:

  • width = Contentbox für Inhalt
    • Breite für Inhalt nicht für Element
  • padding = Paddingbox für Polsterung
  • border = Borderbox für Rahmen
  • margin = Marginbox für Abstand

--> 4 Boxen

 

  • top
  • bottom
  • right
  • left

Erläutere collapsing Margins

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

Wie ermittelt man die Gesamthöhe und Gesamtbreite einer klassische CSS Modell-Box

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

Erläutere das alternative Box-Modell

  • 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

Erläutere das neue Box-Modell "box-sizing"

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

Erläutere verschiedene Rahmenstilarten

  • 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

Hintergrundeffekt einer Box

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. Wie kann man die Box durchsichtig gestalten?
  2. Farbverlauf?
  3. Shadow?
  4. Runde Ecken?

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.

Study