Skip to content

Commit a00d904

Browse files
rachelandrewrachelandrew
committed
Box model examples
1 parent fa20174 commit a00d904

File tree

9 files changed

+590
-0
lines changed

9 files changed

+590
-0
lines changed

‎learn/box-model/block.html‎

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Box Model: Block</title>
6+
<link rel="stylesheet" href="../styles.css" />
7+
<style></style>
8+
9+
<style class="editable">
10+
p,
11+
ul {
12+
border: 2px solid rebeccapurple;
13+
padding: 0.5em;
14+
}
15+
16+
.block,
17+
li {
18+
border: 2px solid blue;
19+
padding: 0.5em;
20+
}
21+
22+
ul {
23+
display: flex;
24+
list-style: none;
25+
}
26+
27+
.block {
28+
display: block;
29+
}
30+
</style>
31+
</head>
32+
33+
<body>
34+
<section class="preview">
35+
<p>I am a paragraph. A short one.</p>
36+
<ul>
37+
<li>Item One</li>
38+
<li>Item Two</li>
39+
<li>Item Three</li>
40+
</ul>
41+
<p>
42+
I am another paragraph. Some of the
43+
<span class="block">words</span> have been wrapped in a
44+
<span>span element</span>.
45+
</p>
46+
</section>
47+
48+
<textarea class="playable playable-css" style="height: 400px;">
49+
p,
50+
ul {
51+
border: 2px solid rebeccapurple;
52+
padding: .5em;
53+
}
54+
55+
.block,
56+
li {
57+
border: 2px solid blue;
58+
padding: .5em;
59+
}
60+
61+
ul {
62+
display: flex;
63+
list-style: none;
64+
}
65+
66+
.block {
67+
display: block;
68+
}
69+
</textarea>
70+
71+
<textarea class="playable playable-html" style="height: 180px;">
72+
<p>I am a paragraph. A short one.</p>
73+
<ul>
74+
<li>Item One</li>
75+
<li>Item Two</li>
76+
<li>Item Three</li>
77+
</ul>
78+
<p>I am another paragraph. Some of the <span class="block">words</span> have been wrapped in a <span>span element</span>.</p>
79+
</textarea>
80+
81+
<div class="playable-buttons">
82+
<input id="reset" type="button" value="Reset" />
83+
</div>
84+
</body>
85+
<script src="../playable.js"></script>
86+
</html>

‎learn/box-model/border.html‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Box Model: Borders</title>
6+
<link rel="stylesheet" href="../styles.css" />
7+
<style>
8+
.container {
9+
margin: 40px;
10+
padding: 20px;
11+
}
12+
13+
.box {
14+
padding: 20px;
15+
background-color: lightgray;
16+
}
17+
</style>
18+
19+
<style class="editable">
20+
.container {
21+
border-top: 5px dotted green;
22+
border-right: 1px solid black;
23+
border-bottom: 20px double rgb(23,45,145);
24+
}
25+
26+
.box {
27+
border: 1px solid #333333;
28+
border-top-style: dotted;
29+
border-right-width: 20px;
30+
border-bottom-color: hotpink;
31+
}
32+
</style>
33+
</head>
34+
35+
<body>
36+
<section class="preview">
37+
<div class="container">
38+
<div class="box">Change my borders.</div>
39+
</div>
40+
</section>
41+
42+
<textarea class="playable playable-css" style="height: 220px;">
43+
.container {
44+
border-top: 5px dotted green;
45+
border-right: 1px solid black;
46+
border-bottom: 20px double rgb(23,45,145);
47+
}
48+
49+
.box {
50+
border: 1px solid #333333;
51+
border-top-style: dotted;
52+
border-right-width: 20px;
53+
border-bottom-color: hotpink;
54+
}
55+
</textarea>
56+
57+
<textarea class="playable playable-html" style="height: 80px;">
58+
<div class="container">
59+
<div class="box">Change my borders.</div>
60+
</div>
61+
</textarea>
62+
63+
<div class="playable-buttons">
64+
<input id="reset" type="button" value="Reset" />
65+
</div>
66+
</body>
67+
<script src="../playable.js"></script>
68+
</html>

‎learn/box-model/box-models.html‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Box Model: Standard and Alternate Box Models</title>
6+
<link rel="stylesheet" href="../styles.css" />
7+
<style></style>
8+
9+
<style class="editable">
10+
.box {
11+
border: 5px solid rebeccapurple;
12+
background-color: lightgray;
13+
padding: 40px;
14+
margin: 40px;
15+
width: 300px;
16+
height: 150px;
17+
}
18+
19+
.alternate {
20+
box-sizing: border-box;
21+
}
22+
</style>
23+
</head>
24+
25+
<body>
26+
<section class="preview">
27+
<div class="box">I use the standard box model.</div>
28+
<div class="box alternate">I use the alternate box model.</div>
29+
</section>
30+
31+
<textarea class="playable playable-css" style="height: 280px;">
32+
.box {
33+
border: 5px solid rebeccapurple;
34+
background-color: lightgray;
35+
padding: 40px;
36+
margin: 40px;
37+
width: 300px;
38+
height: 150px;
39+
}
40+
41+
.alternate {
42+
box-sizing: border-box;
43+
}
44+
</textarea>
45+
46+
<textarea class="playable playable-html" style="height: 80px;">
47+
<div class="box">I use the standard box model.</div>
48+
<div class="box alternate">I use the alternate box model.</div>
49+
</textarea>
50+
51+
<div class="playable-buttons">
52+
<input id="reset" type="button" value="Reset" />
53+
</div>
54+
</body>
55+
<script src="../playable.js"></script>
56+
</html>

‎learn/box-model/inline-block.html‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Box Model: Inline boxes</title>
6+
<link rel="stylesheet" href="../styles.css" />
7+
<style>
8+
p {
9+
border: 2px solid rebeccapurple;
10+
width: 300px;
11+
}
12+
</style>
13+
14+
<style class="editable">
15+
16+
span {
17+
margin: 20px;
18+
padding: 20px;
19+
width: 80px;
20+
height: 50px;
21+
background-color: lightblue;
22+
border: 2px solid blue;
23+
display: inline-block;
24+
}
25+
</style>
26+
</head>
27+
28+
<body>
29+
<section class="preview">
30+
<p>
31+
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.
32+
</p>
33+
</section>
34+
35+
<textarea class="playable playable-css" style="height: 180px;">
36+
span {
37+
margin: 20px;
38+
padding: 20px;
39+
width: 80px;
40+
height: 50px;
41+
background-color: lightblue;
42+
border: 2px solid blue;
43+
display: inline-block;
44+
}
45+
</textarea>
46+
47+
<textarea class="playable playable-html" style="height: 120px;">
48+
<p>
49+
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.
50+
</p>
51+
</textarea>
52+
53+
<div class="playable-buttons">
54+
<input id="reset" type="button" value="Reset" />
55+
</div>
56+
</body>
57+
<script src="../playable.js"></script>
58+
</html>

‎learn/box-model/inline-box-model.html‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Box Model: Inline boxes</title>
6+
<link rel="stylesheet" href="../styles.css" />
7+
<style>
8+
p {
9+
border: 2px solid rebeccapurple;
10+
width: 300px;
11+
}
12+
</style>
13+
14+
<style class="editable">
15+
16+
span {
17+
margin: 20px;
18+
padding: 20px;
19+
width: 80px;
20+
height: 50px;
21+
background-color: lightblue;
22+
border: 2px solid blue;
23+
}
24+
</style>
25+
</head>
26+
27+
<body>
28+
<section class="preview">
29+
<p>
30+
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.
31+
</p>
32+
</section>
33+
34+
<textarea class="playable playable-css" style="height: 180px;">
35+
span {
36+
margin: 20px;
37+
padding: 20px;
38+
width: 80px;
39+
height: 50px;
40+
background-color: lightblue;
41+
border: 2px solid blue;
42+
}
43+
</textarea>
44+
45+
<textarea class="playable playable-html" style="height: 120px;">
46+
<p>
47+
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.
48+
</p>
49+
</textarea>
50+
51+
<div class="playable-buttons">
52+
<input id="reset" type="button" value="Reset" />
53+
</div>
54+
</body>
55+
<script src="../playable.js"></script>
56+
</html>

0 commit comments

Comments
 (0)