-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcss_group_properties_box_model.html
129 lines (112 loc) · 2.98 KB
/
css_group_properties_box_model.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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
margin: 10px;
padding: 10px;
font-family: 'Courier New', Courier, monospace;
background-color: #f0f0f0;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
.container {
padding: 20px;
border: 2px solid #333;
}
.title {
margin-bottom: 20px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 2px;
text-decoration: underline;
}
section {
margin: 20px 0;
padding: 20px;
border: 1px solid #ccc;
border-radius: 8px;
background-color: #fafafa;
}
.box-sizing-demo {
width: 100px;
height: 100px;
margin: 10px;
padding: 10px;
border: 2px solid #000;
background-color: #ddd;
}
.dimensions-demo {
width: 200px;
height: 100px;
margin: 10px auto;
background-color: #ccc;
}
.spacing-demo {
margin: 20px;
padding: 20px;
border: 1px solid #000;
background-color: #bbb;
}
.borders-demo {
width: 150px;
height: 150px;
margin: 10px auto;
border: 5px solid #000;
outline: 3px dotted #333;
background-color: #aaa;
}
</style>
</head>
<body>
<div class="container">
<h1 class="title">CSS Properties Demonstration : Box Model</h1>
<section class="box-model">
<div class="box-sizing-demo">Box Sizing Demo</div>
<div class="dimensions-demo">Dimensions Demo</div>
<div class="spacing-demo">Spacing Demo</div>
<div class="borders-demo">Borders and Outlines Demo</div>
</section>
</div>
</body>
</html>
<!--
Each group includes related properties that affect similar aspects of styling or behavior in web.
These groups are essential for better organization, readability, navigation, and maintainance of CSS.
01. Box Model
Box Sizing: box-sizing
Dimensions: width, height
Spacing: margin, padding
Borders and Outlines: border, outline
02. Typography
Font Properties: font
Text Alignment: text-align
Text Transformations: text-transform, letter-spacing
Text Decoration: text-decoration
03. Painting
Text and Background Colors: color, background-color
Border Colors: border-color
SVG Fill: fill
Shadows: text-shadow, box-shadow
04. Layout
Display Type: display
Flexbox Layout: flex, flex-direction, justify-content, align-items
Grid Layout: grid, grid-template-rows, grid-template-columns, grid-gap
05. Positioning
Position Type: position
Position Offsets: top, bottom, right, left
Stacking Order: z-index
06. Visual Effect
Visibility and Opacity: visibility, opacity
Overflow and Clipping: overflow, clip-path
Transformation, Transitions and Animation: transform, transition, animation
07. Miscellaneous
User Interaction: cursor, pointer-events, user-select
Filters: filter, backdrop-filter
Scrolling and Resizing: scroll-behavior, resize
-->