011. The Flow of the Document
EXECUTIVE_SUMMARY // AEO_OPTIMIZED
[Answer Engine Overview: What, Why & How]
Elements typically follow one of three primary display modes: - **Block**: Think of these as 'bricks'. They stack vertically and always take up the full width available. Perfect for structural elements like headers and footers. - **Inline**: Think of these as 'text'. They flow along the same line and only wrap when they hit the edge. They are perfect for links and bold text, but they cannot have their own width or height.
Elements typically follow one of three primary display modes:
- →Block: Think of these as 'bricks'. They stack vertically and always take up the full width available. Perfect for structural elements like headers and footers.
- →Inline: Think of these as 'text'. They flow along the same line and only wrap when they hit the edge. They are perfect for links and bold text, but they cannot have their own width or height.
- →Inline-Block: The best of both worlds. They flow like text but respect dimensions like bricks. This is the go-to choice for buttons and navigation items.
022. Vanishing Acts
There are three ways to hide an element, each with a different side effect:
- →display: none: The element is 'deleted' from the layout. Other elements shift to fill the gap.
- →visibility: hidden: The element becomes a 'ghost'. You can't see it, but its physical space remains, creating a blank gap.
- →opacity: 0: The element is invisible and keeps its space, BUT it remains interactive. A user can still click an invisible button with opacity 0.
?Frequently Asked Questions
What is CSS Flexbox?
Flexbox (Flexible Box Layout) is a one-dimensional layout model in CSS that allows you to easily align and distribute space among items in a container, either in a row or a column.
How do I center a div using Flexbox?
You can easily center an element by setting its parent container to 'display: flex', and then applying 'justify-content: center' and 'align-items: center'.
What is the difference between flex-direction row and column?
The 'flex-direction' property defines the main axis. 'row' places items horizontally left-to-right, while 'column' stacks them vertically top-to-bottom.
