forked from rvsp/HTML-CSS
-
Notifications
You must be signed in to change notification settings - Fork 0
/
003.html
94 lines (77 loc) · 2.55 KB
/
003.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!--
Margin and Padding(Box Model)
Float property
Position Property
Static - appear in the document flow
Fixed - positioned relative to the browser window
Relative - positioned relative to its normal position
Absolute - positioned relative to its first positioned
Sticky - positioned based on scroll position
-->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML & CSS-2</title>
<link rel="stylesheet" href="003-positions.css">
<style>
.float-prop {
float: left;
font-weight: bolder;
width: 0.7em;
font-size: 80px;
}
.box-model {
width: 320px;
border: 5px solid gray;
margin: 10px;
padding: 30px;
}
</style>
</head>
<body>
<div>
<h1>Padding & Margin</h1>
<div class="box-model">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Tempora eaque rerum facere sequi sunt autem earum,
aliquam omnis voluptate reprehenderit incidunt aperiam ipsam magnam alias eos obcaecati impedit rem hic!
</div>
</div>
<br>
<hr>
<br>
<div>
<h1>Float property</h1>
<span class="float-prop">L</span>orem, ipsum dolor sit amet consectetur adipisicing elit. Aliquid atque odit
culpa minus earum voluptate asperiores accusantium sit eos. Possimus natus eveniet vel maiores illum dolores
ratione, rerum et incidunt?
</div>
<br>
<hr>
<br>
<h1>The position property</h1>
<div id="stat-pos">
<h2>position: static;</h2>
position: static.
</div>
<div id="rel-pos">
<h2>position: relative;</h2>
</div>
<div id="abs-pos">
<h3>position: absolute;</h3>
</div>
<div id="fixed-pos">
<h3>position: fixed;</h3>
</div>
<div id="stick-pos">
<h3>i will stick to top</h3>
</div>
<div style="padding-bottom: 200%;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, officiis neque culpa dolorem repudiandae non
debitis distinctio minus unde ea ex est architecto incidunt corrupti tenetur in blanditiis omnis fuga! Lorem
ipsum dolor sit amet consectetur adipisicing
elit. Repellat omnis unde, vitae aspernatur, eos facilis, voluptas sint magni sunt consequuntur modi? Esse neque
voluptatum minima voluptatem dolorem perspiciatis voluptas voluptatibus.
</div>
</body>
</html>