You should be familiar with most of the properties, but keep them organized as they may not be remembered during development.
Box Model Properties
| Propeties | Explanation | Example |
|---|---|---|
| width | Specify the width of the box model | width: 100px |
| height | Specify the height of the box model | height: 100px |
| box-sizing | Specifies the criteria for calculating the size of the box model | box-sizing : border-box / box-sizing : content-box |
| box-shadow | Adding a shadow effect to the box model | box-shadow : width height area color |
Border Properties
| Propeties | Explanation | Example |
|---|---|---|
| border-style | Designate border styles in 4 directions at once | border-style: solid |
| border-‘location’-style | Specify only the border style at the selected location | border-top-style: solid |
| border-width | Specify the thickness of the borders in 4 directions at once | border-width: 10px |
| border-‘location’-width | Specify only the thickness of the border at the selected location | border-top-width: 10px |
| border-color | Designate the color of the borders in 4 directions at the same time, up, down, left, and right | border-color: #000 |
| border-‘location’-color | Specify only the border color at the selected location | border-top-color: #f00 |
| border-radius | Round the vertices in four directions, top, bottom, left, and right | border-radius: 10px |
| border-‘location’-radius | Round only the vertices of the selected location | border-top=left-radius: 10px |
Margin Properties
| Propeties | Explanation | Example |
|---|---|---|
| margin | Specify margins at once | margin: 10px 10px 5px 5px |
| margin-‘location’ | Specify the margin of the specified position (top, left, bottom, right) | margin-top: 10px |
| padding | Specify padding all at once | padding: 10px 10px 5px 5px |
| padding-‘location’ | Specify the padding of a fixed position (top, left, bottom, right) | padding-top: 10px |
Layout Properties
| Propeties | Explanation | Example |
|---|---|---|
| display | Specify how to place elements on the screen (block, inline, inline-block, none) | display : block |
| float | Place web elements left or right. | float : left |
| clear | Turn off the float property | clear : both |
Position Properties
| Propeties | Explanation | Example |
|---|---|---|
| left, right, top, bottom | Specifies how far up, down, left, and right between the anchor and the element | left:10px |
| position | Positioning of web elements (static, relative, absolute, fixed) | position: relative |