"The Definitive Guide to CSS" in Chinese: Any visible element that is not a block-level element is an inline element. The characteristic of its performance is the form of "row layout". The "row layout" here means that its form of expression is always displayed in rows. For example, when we set an inline element border-bottom:1px solid #000;, it will be repeated in each row, and there will be a thin black line below each row. If it is a block-level element, the black line displayed will only appear below the block.
Elements such as p, h1, or div are often called block-level elements, and these elements are displayed as a block of content; elements such as Strong and span are called inline elements, and their content is displayed in the line, that is, "inline box". (You can use display=block to convert inline elements into block elements. display=none means that the generated element has no frame at all, neither displays the element nor takes up space in the document)
A: Inline elements are elements within a row and can only be placed within a line; block-level elements are just a four-square box and can be placed anywhere on the page.
B: To put it bluntly, an inline element is like a word; a block-level element is like a paragraph. If it is not otherwise defined, it will appear on its own line.
C: General block-level elements such as paragraph <p>, title <h1><h2>..., list, <ul><ol><li>, table <table>, form <form>, DIV<div> and BODY <body> and other elements. Inline elements are such as: form elements <input>, hyperlinks <a>, images <img>, <span>…..
D: The notable feature of block-level elements is that each block-level element starts displaying on a new line, and subsequent elements also need to be displayed on a new line.
E: <span> is an inline element in the CSS definition, while <div> is a block-level element.
Using the word container will make it easier to visually understand their existence and purpose. Inline elements are equivalent to small containers, while <div> is equivalent to a large container. Of course, a small container can be placed in a large container. <span> is a small container.
A block element is generally a container element for other elements. Block elements generally start on a new line. It can accommodate inline elements and other block elements. A common block element is the paragraph tag 'P'. The block element "form" compares Special, it can only be used to contain other block elements.
Without the help of CSS, block elements will be arranged one row at a time. With CSS, we can change the default layout mode of this HTML and place the block elements where you want. Instead of stupidly starting a new line every time. It should be pointed out that the table tag is also a type of block element. Table based layout and css based layout look at these two layouts from the perspective of ordinary users (excluding visually impaired people, blind people, etc.), except for page loading speed. Except for the difference, there is no other difference. However, if an ordinary user inadvertently clicks the view page source code button, the difference between the two will be very large. The CSS layout page source code designed based on good reconstruction concepts can at least allow ordinary users without web development experience to quickly understand the content. From this perspective, css layout code should have a better aesthetic experience.
You can think of the block container element div as boxes, or if you have played with clipping, it will be easier to understand. We first cut out the necessary articles from various newspapers and magazines. Each piece of cut content is a block. Then we glued these pieces of paper onto a new piece of blank paper according to our layout intention. This will form your own unique abstract. As an extension of the technology, web layout design follows the same pattern.
Inline elements are generally based on basic elements at the semantic level. Inline elements can only hold text or other inline elements, and the common inline element "a" is.
Block element (block element) and inline element (inline element) are concepts in the HTML specification. The basic difference between block elements and inline elements is that block elements generally start on a new line. When CSS control is added, this attribute difference between block elements and inline elements no longer becomes a difference. For example, we can add an attribute such as display:block to the inline element cite, so that it also has the attribute of starting from a new line every time.
The basic concept of a mutable element is that it needs to determine whether the element is a block element or an inline element based on the context. Variable elements still belong to the above two element categories. Once the context determines its category, it must follow the rules of block elements or inline elements. See full text for rough element classification.
ps: Regarding the Chinese name of inline element, there are many kinds of inline elements, inline elements, inline elements, and inline elements. Basically there is no unified translation, just call it whatever you want. In addition, when talking about inline elements, we will think of a display attribute called display:inline; this attribute can fix the famous IE double floating border (float margin) problem.
block element
* address - address
* blockquote - block quote
* center - center alignment block
* dir - directory listing
* div - commonly used block level is also the main tag of css layout
* dl - definition list
* fieldset - form control group
* form - interactive form
* h1 - Headline
* h2 - subtitle
*h3 - Level 3 heading
*h4 - Level 4 heading
*h5 - Level 5 heading
*h6 - Level 6 heading
*hr - horizontal divider
* isindex - input prompt
*menu - menu list
* noframes - frames optional content, (display this block content for browsers that do not support frames
*noscript -) Optional script content (display this content for browsers that do not support script)
*ol - sort form
* p - paragraph
* pre - formatted text
* table - table
* ul - unsorted list inline element (inline element)
* a - anchor point
*abbr - abbreviation
*acronym - initial word
* b - bold (not recommended)
* bdo - bidi override
* big - big font
* br - line break
*cite - quote
* code - computer code (required when citing source code)
* dfn - define fields
*em - emphasis
* font - font settings (not recommended)
* i - italic
* img - image
* input - input box
* kbd - define keyboard text
* label - table label
*q - short quote
* s - dash (not recommended)
* samp - defines sample computer code
* select - item selection
* small - small font text
* span - commonly used inline container to define blocks within text
* strike - center line
*strong - Bold emphasis
* sub - subscript
* sup - superscript
* textarea - multi-line text input box
*tt - telex text
* u - underscore
* var - defines a variable variable element - a variable element is a block element or an inline element depending on the context.
* applet - java applet
* button - button
* del - delete text
* iframe - inline frame
* ins - inserted text
* map - image block (map)
* object - object object
* script - client script
Popularity: 26% [?]