Learnt about CSS Box Model and Positioning here are my biggest takeaways.
Css is simply known as cascading style sheet is one of the building languages of the web.
Css box model is simply a term used to refer to how the css sees various html (hypertext Markup language) elements. It sees them as cute little boxes. Check the image below out.
The box model which is what is applied when styling an html element is made up of 4 parts.
i) The content which refers to the html element eg h1 or h2
ii) The padding which is the space within an element. It can either be padding-top, padding-bottom, padding-left or padding-right.
iii) The border which is what surrounds each content and padding. It is also made up of 4 parts ie the top, bottom, left and right.
iv) The margin which is the space outside the element. It is also made up of 4 paths. The margin top, margin bottom, margin right, margin left.
With regard to positioning css elements, css elements can be positioned in 5 different ways using the position property. The 5 different position values includes :
relative, absolute, sticky, static, fixed
When positioning any element any of these values can be applied to an html element depending on what a programmer is trying to achieve.
Relative positioning:An element that is positioned relative to its normal position is affected with any changes made to the top, right, bottom, and left properties of a relatively-positioned element and will cause it to be adjusted away from its normal position. Other surrounding content will not be adjusted to fit into any gap left by the element.
Absolute positioning: An element with absolute positioning is positioned relative to the parent element. eg There is a div element which is the parent element while there a heading tag eg h3 that can be positioned absolutely to the div.
Static positioning: Html elements are positioned static by default. This means they are fixed in a particular spot. Static positioned elements are not affected by the top, bottom, left, and right properties.
Fixed positioning: An element with a fixed positioning is positioned relative to the viewport ie the device, which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element.
Sticky positioning: This element is a felixible one as it acts in-between the relative and absolutely positioned element.
I would love to keep this short and precise as possible. I hope you took something away from this. Thank you for taking the time to read. Here is a link to my github code base where I implemented these principles in building a simple form. https://github.com/kadijatokeowo/vgginternship
