[css] concept

# base
css (cascading style sheets)

# box model
block box
inline box
=> ref: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model

# stacking context
=> ref: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context

# property
## text-decoration (shorthand)
text-decoration-line // able to assign multiple values at once
text-decoration-style
text-decoration-color
text-decoration-thickness

## line-height
when the value is set <percentage>, it is relative to the font size of the element itself

## vertical-align
TODO

## overflow-x
if overflow-y is hidden, scroll or auto and overflow-x is visible, overflow-x will implicitly compute to auto

# pseudo-class
a css pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s)

## :enabled
an element is enabled if it can be activated (selected, clicked on, typed into, etc.) or accept focus

# [note] vertically center
- flexbox
- position and transform
- line-height // for a fixed height
- vertical-align // for inline elements
=> ref: https://www.sitepoint.com/atoz-css-quick-tip-vertical/
=> ref: https://css-tricks.com/centering-css-complete-guide/

# [note] in flex container, a div which position is absolutely still be calculated
TODO
=> ref: https://stackoverflow.com/questions/39673822/how-to-position-absolutely-a-div-within-a-flex-box-without-influencing-the-posit

# [note] if the parent is set opacity, the child will be affected
TODO
=> ref: https://css-tricks.com/forums/topic/opacity-of-child-element/

# [note] learn
=> ref: https://developer.mozilla.org/en-US/docs/Web
=> ref: https://developer.mozilla.org/en-US/docs/Learn/CSS
=> ref: https://css-tricks.com/