HTML & CSS summary notes

html-css-layout.md

How to change the layout of HTML elements?

1. Make use of display and position properties

2. What is the display property?

   • Allows you to adjust how the elements are placed on the web page

   • Some most commonly used values:

     none, inline, block, inline-block, flex (more on that later), (Bonus: grid)

     Value
     block	- starts on a new line
     	- takes up the entire width
     inline	- stays in the same line as the other elements
     	- does not start on a new line
     	- only takes up as much width as necessary
     	- width and height properties have no effect
     inline-block	- combination of both block and inline
     	- stays in the same line as the other elements, but you can apply width and height values
     none	- element does not show up
     flex	- displayed as a block-level flex container (more later)

3. What is the position property?

   • Allows you to adjust where the elements are placed on the web page

   • Use in conjuction with left/right/top/bottom/z-index to move your elements to where you want them at

   • Some commonly used values:

     static, relative, absolute, fixed, sticky

     Value
     static	- default value for most elements
     relative	- relative to its normal position
     absolute	- relative its nearest not static, parent element
     sticky	- positioned based on scroll position
     	- toggles between relative and fixed
     	- will stick to a specified location when scroll location reaches a specified threshold

   • static and relative keep their natural space in the flow of the document

   • absolute and fixed are removed from the flow