block: the object is rendered as a block element
inline: the object is rendered as an inline element
inline-block: the object is rendered as an inline-block element "implementing that inline elements on the same line can use the box model"
none: the object is rendered as "none", the implementation element "disappears" in the page
block, inline in order to facilitate the use of css box model properties
Swap html block elements and inline elements
HTML tags have their own default display settings:
1. Block elements: display: block (default)
2. Inline elements: display: inline (default)
Practical application of display:
Purpose: To adapt inline elements to box model properties
Task: Create a button-style hyperlink
Implementation idea: <a>:display:block
Ideas and steps to build a web page layout:
1. Use Box Model Thinking for Page or Section Analysis
2.html - structured with tags that conform to layout semantics
3. CSS controls the size and positioning of transitions