This is the 26th day of my participation in the August Text Challenge.More challenges in August
What is element display mode
Before we get to the elemental display pattern, let’s take a bad example: if there are billions of people in the world, then ultimately there are only two types of people: men and women, and occasionally there may be a third type of people — ladyboys. No matter men, women or even ladyboys, although they are all human, different people also have different characteristics or different division of labor.
Just like us, HTML has a variety of element tags, but they can be divided into two main categories: block elements and inline elements. And different elements have different characteristics and roles, to understand their characteristics we can be a good layout of the web page.
When it comes to the layout of a web page, it comes down to how elements are displayed. HTML has so many elements and is generally divided into block elements and inline elements, and the way these elements are displayed on a web page is the way the elements are displayed. For example, div can have a single line, while SPAN can have multiple lines.
HTML elements are divided into block elements and inline elements. What are block elements and inline elements?
Block element (Man)
The commonly used block elements are H1 ~ H6, P, div, OL, ul, Li and so on, among which div is the most typical block element
Characteristics of block elements:
- More domineering, exclusive line
- You can set width, height, padding, and margins
- The default width is 100% of the container (parent element width)
- Is a container and box that can release internal or block-level elements
Note:
- Text elements in different block level elements, such as H series, P, etc
- The P tag is used primarily for text, so you can’t put block-level elements, especially divs, inside it
Line element (woman)
Common inline elements include a, I, strong, B, em, INS, del, S, U, and SPAN, among which span tag is the most typical inline element and is also called inline element in some places.
Features of inline elements:
- If the elements in adjacent rows are on the same row, more than one row can be displayed
- Width and height Settings are not valid
- The default width is the width of its own content
- Inline elements can only hold text or other inline elements
Note:
- You can’t put link A in the link
- You can put block-level elements in links, but it’s safer to convert A to block-level mode.
Inline block elements (ladyboy)
HTML elements are originally divided into two categories of inline and block-level elements, but there are several special tags in inline elements, img, input, and TD, which have the characteristics of both block elements and inline elements. We call them inline block elements.
Features of inline block elements:
- Is on the same line as adjacent inline elements (inline blocks), but there are gaps between them. One line can display multiple inline elements.
- The default width is the width of its own content (inline elements)
- Width, height, line height, and margins can be set (block-level element features)
The element displays a schema summary
| Element model | Elements are arranged | Set the style | The default width | contains |
|---|---|---|---|---|
| Block-level elements | Only one block element can be placed in a row | You can set the width and height | 100% of the container width | Container classes can contain any tag |
| Inline elements | A row can contain multiple inline elements | Width height cannot be set directly (convert required) | The width of the content itself | Contains text or other inline elements |
| Inline block elements | A row can contain multiple inline block elements | You can set the width and height | Intrinsic content width |
Element display mode conversion
In special cases, we need a transformation of the element schema. Simply put, elements of one schema need features of another schema, and this is when element transformation is required.
For example, if you want to set the width and height of the row element A, you need to convert a to a block element so that you can set the width and height.
Display: Using display in the CSS, you can convert element modes to each other, so that one element mode has the characteristics of another mode
- Blocks are converted to block elements
- Inline converts to inline elements
- Inline-block converts to inline block elements