forked from mdn/css-examples
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
fa20174
commit a00d904
Showing
9 changed files
with
590 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,86 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="utf-8" /> | ||
| <title>Box Model: Block</title> | ||
| <link rel="stylesheet" href="../styles.css" /> | ||
| <style></style> | ||
|
|
||
| <style class="editable"> | ||
| p, | ||
| ul { | ||
| border: 2px solid rebeccapurple; | ||
| padding: 0.5em; | ||
| } | ||
|
|
||
| .block, | ||
| li { | ||
| border: 2px solid blue; | ||
| padding: 0.5em; | ||
| } | ||
|
|
||
| ul { | ||
| display: flex; | ||
| list-style: none; | ||
| } | ||
|
|
||
| .block { | ||
| display: block; | ||
| } | ||
| </style> | ||
| </head> | ||
|
|
||
| <body> | ||
| <section class="preview"> | ||
| <p>I am a paragraph. A short one.</p> | ||
| <ul> | ||
| <li>Item One</li> | ||
| <li>Item Two</li> | ||
| <li>Item Three</li> | ||
| </ul> | ||
| <p> | ||
| I am another paragraph. Some of the | ||
| <span class="block">words</span> have been wrapped in a | ||
| <span>span element</span>. | ||
| </p> | ||
| </section> | ||
|
|
||
| <textarea class="playable playable-css" style="height: 400px;"> | ||
| p, | ||
| ul { | ||
| border: 2px solid rebeccapurple; | ||
| padding: .5em; | ||
| } | ||
|
|
||
| .block, | ||
| li { | ||
| border: 2px solid blue; | ||
| padding: .5em; | ||
| } | ||
|
|
||
| ul { | ||
| display: flex; | ||
| list-style: none; | ||
| } | ||
|
|
||
| .block { | ||
| display: block; | ||
| } | ||
| </textarea> | ||
|
|
||
| <textarea class="playable playable-html" style="height: 180px;"> | ||
| <p>I am a paragraph. A short one.</p> | ||
| <ul> | ||
| <li>Item One</li> | ||
| <li>Item Two</li> | ||
| <li>Item Three</li> | ||
| </ul> | ||
| <p>I am another paragraph. Some of the <span class="block">words</span> have been wrapped in a <span>span element</span>.</p> | ||
| </textarea> | ||
|
|
||
| <div class="playable-buttons"> | ||
| <input id="reset" type="button" value="Reset" /> | ||
| </div> | ||
| </body> | ||
| <script src="../playable.js"></script> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,68 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="utf-8" /> | ||
| <title>Box Model: Borders</title> | ||
| <link rel="stylesheet" href="../styles.css" /> | ||
| <style> | ||
| .container { | ||
| margin: 40px; | ||
| padding: 20px; | ||
| } | ||
|
|
||
| .box { | ||
| padding: 20px; | ||
| background-color: lightgray; | ||
| } | ||
| </style> | ||
|
|
||
| <style class="editable"> | ||
| .container { | ||
| border-top: 5px dotted green; | ||
| border-right: 1px solid black; | ||
| border-bottom: 20px double rgb(23,45,145); | ||
| } | ||
|
|
||
| .box { | ||
| border: 1px solid #333333; | ||
| border-top-style: dotted; | ||
| border-right-width: 20px; | ||
| border-bottom-color: hotpink; | ||
| } | ||
| </style> | ||
| </head> | ||
|
|
||
| <body> | ||
| <section class="preview"> | ||
| <div class="container"> | ||
| <div class="box">Change my borders.</div> | ||
| </div> | ||
| </section> | ||
|
|
||
| <textarea class="playable playable-css" style="height: 220px;"> | ||
| .container { | ||
| border-top: 5px dotted green; | ||
| border-right: 1px solid black; | ||
| border-bottom: 20px double rgb(23,45,145); | ||
| } | ||
|
|
||
| .box { | ||
| border: 1px solid #333333; | ||
| border-top-style: dotted; | ||
| border-right-width: 20px; | ||
| border-bottom-color: hotpink; | ||
| } | ||
| </textarea> | ||
|
|
||
| <textarea class="playable playable-html" style="height: 80px;"> | ||
| <div class="container"> | ||
| <div class="box">Change my borders.</div> | ||
| </div> | ||
| </textarea> | ||
|
|
||
| <div class="playable-buttons"> | ||
| <input id="reset" type="button" value="Reset" /> | ||
| </div> | ||
| </body> | ||
| <script src="../playable.js"></script> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="utf-8" /> | ||
| <title>Box Model: Standard and Alternate Box Models</title> | ||
| <link rel="stylesheet" href="../styles.css" /> | ||
| <style></style> | ||
|
|
||
| <style class="editable"> | ||
| .box { | ||
| border: 5px solid rebeccapurple; | ||
| background-color: lightgray; | ||
| padding: 40px; | ||
| margin: 40px; | ||
| width: 300px; | ||
| height: 150px; | ||
| } | ||
|
|
||
| .alternate { | ||
| box-sizing: border-box; | ||
| } | ||
| </style> | ||
| </head> | ||
|
|
||
| <body> | ||
| <section class="preview"> | ||
| <div class="box">I use the standard box model.</div> | ||
| <div class="box alternate">I use the alternate box model.</div> | ||
| </section> | ||
|
|
||
| <textarea class="playable playable-css" style="height: 280px;"> | ||
| .box { | ||
| border: 5px solid rebeccapurple; | ||
| background-color: lightgray; | ||
| padding: 40px; | ||
| margin: 40px; | ||
| width: 300px; | ||
| height: 150px; | ||
| } | ||
|
|
||
| .alternate { | ||
| box-sizing: border-box; | ||
| } | ||
| </textarea> | ||
|
|
||
| <textarea class="playable playable-html" style="height: 80px;"> | ||
| <div class="box">I use the standard box model.</div> | ||
| <div class="box alternate">I use the alternate box model.</div> | ||
| </textarea> | ||
|
|
||
| <div class="playable-buttons"> | ||
| <input id="reset" type="button" value="Reset" /> | ||
| </div> | ||
| </body> | ||
| <script src="../playable.js"></script> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,58 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="utf-8" /> | ||
| <title>Box Model: Inline boxes</title> | ||
| <link rel="stylesheet" href="../styles.css" /> | ||
| <style> | ||
| p { | ||
| border: 2px solid rebeccapurple; | ||
| width: 300px; | ||
| } | ||
| </style> | ||
|
|
||
| <style class="editable"> | ||
|
|
||
| span { | ||
| margin: 20px; | ||
| padding: 20px; | ||
| width: 80px; | ||
| height: 50px; | ||
| background-color: lightblue; | ||
| border: 2px solid blue; | ||
| display: inline-block; | ||
| } | ||
| </style> | ||
| </head> | ||
|
|
||
| <body> | ||
| <section class="preview"> | ||
| <p> | ||
| I am a paragraph and this is a <span>span</span> inside that paragraph. A span is an inline element and so does not respect width and height. | ||
| </p> | ||
| </section> | ||
|
|
||
| <textarea class="playable playable-css" style="height: 180px;"> | ||
| span { | ||
| margin: 20px; | ||
| padding: 20px; | ||
| width: 80px; | ||
| height: 50px; | ||
| background-color: lightblue; | ||
| border: 2px solid blue; | ||
| display: inline-block; | ||
| } | ||
| </textarea> | ||
|
|
||
| <textarea class="playable playable-html" style="height: 120px;"> | ||
| <p> | ||
| I am a paragraph and this is a <span>span</span> inside that paragraph. A span is an inline element and so does not respect width and height. | ||
| </p> | ||
| </textarea> | ||
|
|
||
| <div class="playable-buttons"> | ||
| <input id="reset" type="button" value="Reset" /> | ||
| </div> | ||
| </body> | ||
| <script src="../playable.js"></script> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="utf-8" /> | ||
| <title>Box Model: Inline boxes</title> | ||
| <link rel="stylesheet" href="../styles.css" /> | ||
| <style> | ||
| p { | ||
| border: 2px solid rebeccapurple; | ||
| width: 300px; | ||
| } | ||
| </style> | ||
|
|
||
| <style class="editable"> | ||
|
|
||
| span { | ||
| margin: 20px; | ||
| padding: 20px; | ||
| width: 80px; | ||
| height: 50px; | ||
| background-color: lightblue; | ||
| border: 2px solid blue; | ||
| } | ||
| </style> | ||
| </head> | ||
|
|
||
| <body> | ||
| <section class="preview"> | ||
| <p> | ||
| I am a paragraph and this is a <span>span</span> inside that paragraph. A span is an inline element and so does not respect width and height. | ||
| </p> | ||
| </section> | ||
|
|
||
| <textarea class="playable playable-css" style="height: 180px;"> | ||
| span { | ||
| margin: 20px; | ||
| padding: 20px; | ||
| width: 80px; | ||
| height: 50px; | ||
| background-color: lightblue; | ||
| border: 2px solid blue; | ||
| } | ||
| </textarea> | ||
|
|
||
| <textarea class="playable playable-html" style="height: 120px;"> | ||
| <p> | ||
| I am a paragraph and this is a <span>span</span> inside that paragraph. A span is an inline element and so does not respect width and height. | ||
| </p> | ||
| </textarea> | ||
|
|
||
| <div class="playable-buttons"> | ||
| <input id="reset" type="button" value="Reset" /> | ||
| </div> | ||
| </body> | ||
| <script src="../playable.js"></script> | ||
| </html> |
Oops, something went wrong.