%Schriftgröße, Layout, Papierformat, Art des Dokumentes
\documentclass[10pt,oneside,a4paper]{scrartcl}

%Einstellungen der Seitenränder
\usepackage[left=2cm,right=2cm,top=1.5cm,bottom=1.5cm,includeheadfoot]{geometry}

%neue Rechtschreibung
\usepackage[ngerman]{babel}

%Umlaute ermöglichen
\usepackage[utf8]{inputenc}

%Gesamtseitenzahl
\usepackage{lastpage}

% Kopf- und Fußzeile
\usepackage[automark]{scrpage2}

%Quellcode-Listings
\usepackage{listings}

%Hyperlinks
\usepackage{hyperref}

% Mehrere Spalten
\usepackage{multicol}

%Kopfzeile
\ihead{CSS}
\chead{}
\ohead{http://kohnlehome.de/html/css-boxes.pdf}
\setheadsepline{0.5pt}

%Fußzeile
\setfootsepline{0.5pt}
\ifoot{Franz Kohnle}
\cfoot{Seite \thepage\ von  \pageref{LastPage}}
\ofoot{\today}

\pagestyle{scrheadings}

\begin{document}

% Überschrift 
\begin{center}
\LARGE % Schriftgröße
\bfseries % Fettdruck
\sffamily % Serifenlose Schrift
CSS-Boxes
\end{center}

\section*{Box-Model}
\begin{multicols}{2}
\subsection*{box-sizing: content-box (default)}
{\linespread{0.8}\begin{verbatim}
+----------------------------------+
|              margin              |
|   +--------------------------+   |
|   |          border          |   |
|   |   +------------------+   |   |
|   |   |     padding      |   |   |
|   |   |   +----------+   |   |   |    ^
|   |   |   |          |   |   |   |    |
|   |   |   | content  |   |   |   |  height
|   |   |   |          |   |   |   |    |
|   |   |   +----------+   |   |   |    v
|   |   |                  |   |   |
|   |   +------------------+   |   |
|   |                          |   |
|   +--------------------------+   |
|                                  |
+----------------------------------+

            <--width-->




\end{verbatim}}

\subsection*{box-sizing: border-box}
{\linespread{0.8}\begin{verbatim}
       +----------------------------------+
       |              margin              |
  ^    |   +--------------------------+   |
  |    |   |          border          |   |
  |    |   |   +------------------+   |   |
  |    |   |   |     padding      |   |   |
  |    |   |   |   +----------+   |   |   |
  |    |   |   |   |          |   |   |   |
height |   |   |   | content  |   |   |   |
  |    |   |   |   |          |   |   |   |
  |    |   |   |   +----------+   |   |   |
  |    |   |   |                  |   |   |
  |    |   |   +------------------+   |   |
  |    |   |                          |   |
  v    |   +--------------------------+   |
       |                                  |
       +----------------------------------+

           <---------width------------>

*, *:before, *:after {box-sizing: border-box;}        
\end{verbatim}}
\end{multicols}



\begin{multicols}{2}
\subsection*{Längenangaben}
\begin{verbatim}
%    /* relativ zum Elternelement */
em   /* relativ zum font-size */
px   /* absolut */
vw   /* % Breite des Browserfensters */
vh   /* % Höhe des Browserfensters */
\end{verbatim}

\subsection*{Breite und Höhe}
\begin{verbatim}
width, height
min-width, min-height
max-width, max-height
overflow: hidden | scroll

\end{verbatim}
\end{multicols}



\begin{multicols}{2}
\subsection*{margin}
\begin{verbatim}
margin-top, -right, -bottom, -left
Shorthand: margin: top rigth bottom left
\end{verbatim}
	
\subsection*{padding}
\begin{verbatim}
padding-top, -right, -bottom, -left
Shorthand: padding: top right bottom left
\end{verbatim}
\end{multicols}



\begin{multicols}{2}
\subsection*{border}
\begin{verbatim}
border-width: 2px;
border-style: solid | dotted | double | groove
border-color: red;
Shorthand: border: width style color
\end{verbatim}
	
\subsection*{border-radius}
\begin{verbatim}
border-radius: 10px;



\end{verbatim}
\end{multicols}


\begin{multicols}{2}
\subsection*{box-shadow}
\begin{verbatim}
box-shadow: 5px 5px 5px green;
/* offset-x offset-y blur-radius color */ 

\end{verbatim}
	
\subsection*{Sichtbarkeit}
\begin{verbatim}
display: none;       /* ganz weg */
visibility: hidden;  /* unsichtbar,           */
                     /* Platz bleibt erhalten */
\end{verbatim}
\end{multicols}


\subsection*{display}
\renewcommand{\arraystretch}{1.5}
\begin{tabular}{ l | c | c | c | c  }
display:  & full width & width, height & margin, padding (top, bottom)  & margin, padding (left, right) \\ \hline \hline
inline  & - & - & - & $\surd$ \\
inline-block  & - & $\surd$ & $\surd$ & $\surd$ \\
block  & $\surd$ & $\surd$ & $\surd$ & $\surd$
\end{tabular}
	
\end{document}
