Web Development Presentation
Parent: 245d8ee6 | Patch | Commit | ignore whitespace
Sascha Schulz
2023-01-31 86d082d477c55e50dd8723339802afeaa083b595 
add css box model and position
3 Dateien geändert
5 Dateien hinzugefügt
260 ■■■■■ Geänderte Dateien
assets/html/box-sizing.html 28 ●●●●● Patch | Ansicht | Raw | Blame | Historie
assets/html/css-menu.html 28 ●●●●● Patch | Ansicht | Raw | Blame | Historie
assets/images/css-box-model.png Patch | Ansicht | Raw | Blame | Historie
index.html 178 ●●●●● Patch | Ansicht | Raw | Blame | Historie
package-lock.json 16 ●●●●● Patch | Ansicht | Raw | Blame | Historie
package.json 2 ●●●●● Patch | Ansicht | Raw | Blame | Historie
plugin/highlight/base64-monokai.min.css 7 ●●●●● Patch | Ansicht | Raw | Blame | Historie
plugin/highlight/monokai-sublime.min.css 1 ●●●●● Patch | Ansicht | Raw | Blame | Historie 
 assets/html/box-sizing.html


Neue Datei


@@ -0,0 +1,28 @@


<!DOCTYPE html>



<html lang="en">



    <head>



        <meta charset="UTF-8">



        <title>Box Model</title>



        <style>



            div {



                color: white;



                border: 3px solid red;



                padding: 10px;



                width: 100px;



                margin-bottom: 10px;



            }







            .border-box {



                box-sizing: border-box;



            }







            .content-box {



                box-sizing: content-box;



            }



        </style>



    </head>



    <body>



        <div class="content-box">content-box</div>



        <div class="border-box">border-box</div>



    </body>



</html>





 assets/html/css-menu.html


Neue Datei


@@ -0,0 +1,28 @@


<!DOCTYPE html>



<html lang="en">



    <head>



        <meta charset="UTF-8">



        <title>Box Model</title>



        <style>



            div {



                color: white;



                border: 3px solid red;



                padding: 10px;



                width: 100px;



                margin-bottom: 10px;



            }







            .border-box {



                box-sizing: border-box;



            }







            .content-box {



                box-sizing: content-box;



            }



        </style>



    </head>



    <body>



        <div class="content-box">content-box</div>



        <div class="border-box">border-box</div>



    </body>



</html>





 assets/images/css-box-model.png




 index.html


@@ -11,7 +11,7 @@


        <link rel="stylesheet" href="dist/theme/night-custom.css">




        <!-- Theme used for syntax highlighted code -->


        <link rel="stylesheet" href="plugin/highlight/monokai.css">


        <link rel="stylesheet" href="./node_modules/highlight.js/styles/atom-one-dark-reasonable.css">


    </head>


    <body>


        <div class="reveal">


@@ -116,7 +116,7 @@


                    <section>


                        <h3>Grundgerüst</h3>


                        <pre>


                            <code data-trim data-line-numbers>


                            <code class="html" data-trim data-line-numbers>


                                <script type="text/template">


                                    <!DOCTYPE html>


                                    <html lang="de">


@@ -133,7 +133,7 @@


                    <section>


                        <h3>Beispiel</h3>


                        <pre>


                            <code data-trim data-line-numbers>


                            <code class="html" data-trim data-line-numbers>


                                <script type="text/template">


                                    <!DOCTYPE html>


                                    <html lang="en">


@@ -160,16 +160,24 @@


                    <section>


                        <h3>Aufbau eines Elements</h3>


                        <pre>


                            <code data-trim data-line-numbers>


                            <code class="html" data-trim>


                                <script type="text/template">


                                    <span id="my-id" class="super important">Inhalt</span>


                                </script>


                            </code>


                        </pre>


                        <pre>


                            <code data-trim data-line-numbers>


                            <code class="html" data-trim>


                                <script type="text/template">


                                    <input id="input" class="super important" disabled="disabled"/>


                                    <!-- HTML 4.01 -->


                                    <input id="input" class="super important" disabled="disabled" />


                                </script>


                            </code>


                        </pre>


                        <pre>


                            <code class="html" data-trim>


                                <script type="text/template">


                                    <!-- HTML 5 -->


                                    <input id="input2" class="super important" disabled>


                                </script>


                            </code>


@@ -193,32 +201,28 @@


                    <section>


                        <h3>Beispiel</h3>


                        <pre>


                            <code data-trim data-line-numbers>


                                <script type="text/template">


                                    selector [, selector, selector, ...] {


                                        property: value;


                                    }


                                </script>


                            <code class="css" data-trim data-line-numbers>


                                selector [, selector, selector, ...] {


                                    property: value;


                                }


                            </code>


                        </pre>


                    </section>


                    <section>


                        <h3>Beispiel</h3>


                        <pre>


                            <code data-trim data-line-numbers>


                                <script type="text/template">


                                    html {


                                        background-color: red;


                                        font-size: 30px;


                                    }


                                </script>


                            <code class="css" data-trim data-line-numbers>


                                html {


                                    background-color: red;


                                    font-size: 30px;


                                }


                            </code>


                        </pre>


                    </section>


                    <section>


                        <h3>Beispiel</h3>


                        <pre>


                            <code data-trim data-line-numbers>


                            <code class="html" data-trim data-line-numbers>


                                <script type="text/template">


                                    <html lang="en">


                                        <head>


@@ -259,7 +263,7 @@


                    <section>


                        <h3>Selektoren</h3>


                        <pre>


                            <code data-trim data-line-numbers>


                            <code class="css" data-trim data-line-numbers>


                                #my-id /* ID */


                                html, body /* Mehrfachselektion */


                                div > p /* p die direkt unterhalb eines div sind */


@@ -268,6 +272,138 @@


                            </code>


                        </pre>


                    </section>


                    <section>


                        <h3>Layout</h3>


                        <p>Es gibt zwei grundlegende Blocktypen:</p>


                        <p><code>block</code></p>


                        <p><code>inline</code></p>


                    </section>


                    <section>


                        <h3>Block</h3>


                        <p>Beansprucht eine ganze Zeile und verursacht Zeilenumbrüche</p>


                        <pre>


                            <code class="css" data-trim data-line-numbers>


                                display: block;


                            </code>


                        </pre>


                    </section>


                    <section>


                        <p>Kann Breite und Höhe haben</p>


                        <pre>


                            <code class="css" data-trim data-line-numbers>


                                display: block;


                                width: 20px;


                                height: 20px;


                            </code>


                        </pre>


                    </section>


                    <section>


                        <h3>Inline</h3>


                        <p>Wie einfacher Text, der mit anderen in der gleichen Zeile stehen kann</p>


                        <pre>


                            <code class="css" data-trim data-line-numbers>


                                display: inline;


                            </code>


                        </pre>


                    </section>


                    <section>


                        <p>Festlegen von Breite und Höhe sind wirkungslos</p>


                        <pre>


                            <code class="css" data-trim data-line-numbers>


                                display: inline;


                                width: 20px; /* kein Effekt */


                                height: 20px; /* kein Effekt */


                            </code>


                        </pre>


                    </section>


                    <section>


                        <h3>Inline-Block</h3>


                        <p>Mischform von <code>inline</code> und <code>block</code></p>


                        <pre>


                            <code class="css" data-trim data-line-numbers>


                                display: inline-block;


                                width: 20px;


                                height: 20px;


                            </code>


                        </pre>


                    </section>


                    <section>


                        <h3>Box Model</h3>


                        <p>Es gibt zwei Varianten des Modells:</p>


                        <p><code>content-box</code> (default)</p>


                        <p>border-box</p>


                        <pre>


                            <code class="css" data-trim data-line-numbers>


                                box-sizing: content-box;


                                box-sizing: border-box;


                            </code>


                        </pre>


                    </section>


                    <section>


                        <img data-src="/assets/images/css-box-model.png">


                    </section>


                    <section>


                        <h3>Beispiel</h3>


                        <pre>


                            <code class="css" data-trim data-line-numbers>


                                div {


                                    border: 3px solid red;


                                    padding: 10px;


                                    width: 100px;


                                }




                                .border-box {


                                    box-sizing: border-box;


                                }




                                .content-box {


                                    box-sizing: content-box;


                                }


                            </code>


                        </pre>


                        <pre>


                            <code class="html" data-trim data-line-numbers>


                                <script type="text/template">


                                    <div class="content-box">content-box</div>


                                    <div class="border-box">border-box</div>


                                </script>


                            </code>


                        </pre>


                    </section>


                    <section>


                        <h3>Beispiel</h3>


                        <iframe data-src="/assets/html/box-sizing.html"></iframe>


                    </section>


                    <section>


                        <h3>Positioning</h3>


                        <pre>


                            <code class="css" data-trim data-line-numbers>


                                /* default, da wo es in der Seite steht */


                                position: static;


                                /* relativ zu seiner eigentlichen Position */


                                position: relative;


                                /* relativ zu seinem nächsten non-static parent o. window */


                                position: absolute;


                            </code>


                        </pre>


                    </section>


                    <section>


                        <pre>


                            <code class="css" data-trim data-line-numbers>


                                position: relative;


                                position: absolute;


                            </code>


                        </pre>


                        <p>erlauben Verschiebung mittels</p>


                        <pre>


                            <code class="css" data-trim data-line-numbers>


                                top: 10px;


                                left: 10px;


                                right: 10px;


                                bottom: 10px;


                            </code>


                        </pre>


                    </section>


                </section>


            </div>


        </div>




 package-lock.json


@@ -28,7 +28,7 @@


        "gulp-header": "^2.0.9",


        "gulp-tap": "^2.0.0",


        "gulp-zip": "^4.2.0",


        "highlight.js": "^10.0.3",


        "highlight.js": "^11.7.0",


        "marked": "^4.0.12",


        "node-qunit-puppeteer": "^2.1.2",


        "qunit": "^2.19.3",


@@ -5292,12 +5292,12 @@


      }


    },


    "node_modules/highlight.js": {


      "version": "10.7.2",


      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-10.7.2.tgz",


      "integrity": "sha512-oFLl873u4usRM9K63j4ME9u3etNF0PLiJhSQ8rdfuL51Wn3zkD6drf9ZW0dOzjnZI22YYG24z30JcmfCZjMgYg==",


      "version": "11.7.0",


      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.7.0.tgz",


      "integrity": "sha512-1rRqesRFhMO/PRF+G86evnyJkCgaZFOI+Z6kdj15TA18funfoqJXvgPCLSf0SWq3SRfg1j3HlDs8o4s3EGq1oQ==",


      "dev": true,


      "engines": {


        "node": "*"


        "node": ">=12.0.0"


      }


    },


    "node_modules/homedir-polyfill": {


@@ -14197,9 +14197,9 @@


      }


    },


    "highlight.js": {


      "version": "10.7.2",


      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-10.7.2.tgz",


      "integrity": "sha512-oFLl873u4usRM9K63j4ME9u3etNF0PLiJhSQ8rdfuL51Wn3zkD6drf9ZW0dOzjnZI22YYG24z30JcmfCZjMgYg==",


      "version": "11.7.0",


      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.7.0.tgz",


      "integrity": "sha512-1rRqesRFhMO/PRF+G86evnyJkCgaZFOI+Z6kdj15TA18funfoqJXvgPCLSf0SWq3SRfg1j3HlDs8o4s3EGq1oQ==",


      "dev": true


    },


    "homedir-polyfill": {




 package.json


@@ -49,7 +49,7 @@


    "gulp-header": "^2.0.9",


    "gulp-tap": "^2.0.0",


    "gulp-zip": "^4.2.0",


    "highlight.js": "^10.0.3",


    "highlight.js": "^11.7.0",


    "marked": "^4.0.12",


    "node-qunit-puppeteer": "^2.1.2",


    "qunit": "^2.19.3",




 plugin/highlight/base64-monokai.min.css


Neue Datei


@@ -0,0 +1,7 @@


/*!


  Theme: Monokai


  Author: Wimer Hazenberg (http://www.monokai.nl)


  License: ~ MIT (or more permissive) [via base16-schemes-source]


  Maintainer: @highlightjs/core-team


  Version: 2021.09.0


*/pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}.hljs{color:#f8f8f2;background:#272822}.hljs ::selection,.hljs::selection{background-color:#49483e;color:#f8f8f2}.hljs-comment{color:#75715e}.hljs-tag{color:#a59f85}.hljs-operator,.hljs-punctuation,.hljs-subst{color:#f8f8f2}.hljs-operator{opacity:.7}.hljs-bullet,.hljs-deletion,.hljs-name,.hljs-selector-tag,.hljs-template-variable,.hljs-variable{color:#f92672}.hljs-attr,.hljs-link,.hljs-literal,.hljs-number,.hljs-symbol,.hljs-variable.constant_{color:#fd971f}.hljs-class .hljs-title,.hljs-title,.hljs-title.class_{color:#f4bf75}.hljs-strong{font-weight:700;color:#f4bf75}.hljs-addition,.hljs-code,.hljs-string,.hljs-title.class_.inherited__{color:#a6e22e}.hljs-built_in,.hljs-doctag,.hljs-keyword.hljs-atrule,.hljs-quote,.hljs-regexp{color:#a1efe4}.hljs-attribute,.hljs-function .hljs-title,.hljs-section,.hljs-title.function_,.ruby .hljs-property{color:#66d9ef}.diff .hljs-meta,.hljs-keyword,.hljs-template-tag,.hljs-type{color:#ae81ff}.hljs-emphasis{color:#ae81ff;font-style:italic}.hljs-meta,.hljs-meta .hljs-keyword,.hljs-meta .hljs-string{color:#c63}.hljs-meta .hljs-keyword,.hljs-meta-keyword{font-weight:700}




 plugin/highlight/monokai-sublime.min.css


Neue Datei


@@ -0,0 +1 @@


pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}.hljs{background:#23241f;color:#f8f8f2}.hljs-subst,.hljs-tag{color:#f8f8f2}.hljs-emphasis,.hljs-strong{color:#a8a8a2}.hljs-bullet,.hljs-link,.hljs-literal,.hljs-number,.hljs-quote,.hljs-regexp{color:#ae81ff}.hljs-code,.hljs-section,.hljs-selector-class,.hljs-title{color:#a6e22e}.hljs-strong{font-weight:700}.hljs-emphasis{font-style:italic}.hljs-attr,.hljs-keyword,.hljs-name,.hljs-selector-tag{color:#f92672}.hljs-attribute,.hljs-symbol{color:#66d9ef}.hljs-class .hljs-title,.hljs-params,.hljs-title.class_{color:#f8f8f2}.hljs-addition,.hljs-built_in,.hljs-selector-attr,.hljs-selector-id,.hljs-selector-pseudo,.hljs-string,.hljs-template-variable,.hljs-type,.hljs-variable{color:#e6db74}.hljs-comment,.hljs-deletion,.hljs-meta{color:#75715e}