- Understanding the Box Model.
The box model is the rectangular boxes that are generated for every HTML element. The boxes are laid out on the page according to the visual formatting model, and visual formatting is controlled by three properties: the position property, display property, and float property. A simple way to think about these properties is that - margins push outward from the border and padding pushes inward from the border.
Topic 2
– The box boarder.
The border has three associated properties. The first one is the width. This includes thin, medium, thick, or any width unit except % values and negative values. The second one is style. Value can be none, hidden, dotted, dashed, solid, double, groove, ridge, inset, or outset. The third one is color. This includes any color value. For example, RGB, HSL,hexadecimal, or color keyword.
Topic 3
– Positioning content.
When you change an element’s position property to relative, absolute, or fixed, and you then move the element using the properties top, right, bottom, or left, you are moving that element with respect to another element. That other element is known as its positioning context. The default positioning context of an absolutely positioned element is body. The body uniquely, is an ancestor of every element in your markup.