【CSS3】-block-level elements, inline elements_html/css_WEB-ITnose

Document flow

Divide the form into rows from top to bottom, and arrange the elements in each row in order from left to right, which is document flow.

Each non-floating block-level element occupies its own line, and floating elements float at one end of the line as required. If the current row cannot accommodate it, a new row will be created and then floated.

Inline elements will not occupy a line of their own. Almost all elements (including block-level, inline and list elements) can generate sub-rows for placing sub-elements.

There are three situations that will cause elements to exist out of the document flow, namely floating, absolute positioning, and fixed positioning. But in IE, floating elements also exist in the document flow (which makes me think this is reasonable><).

Floating elements do not occupy any normal document flow space, and the positioning of floating elements is still based on the normal document flow, and then extracted from the document flow and moved as far as possible to the left or right. The text content will be wrapped around the floated element. When an element is extracted from the normal document flow, other elements still in the document flow ignore the element and fill its original space.

The concept of floating is confusing because of the browser’s interpretation of the theory. It can only be said that many people use IE as the standard, but in fact it is not.

Based on the document flow, we can easily understand the following positioning modes:

Relative positioning, that is, offset relative to the position of the element in the document flow. But keep the original place.

Absolute positioning, that is, completely out of the document flow, offset relative to the nearest parent element with a non-static value for the position attribute.

Fixed positioning, that is, completely out of the document flow and offset relative to the viewport.

A few questions

Inline elements are one of the three basic elements. What is the main difference between it and block-level elements?

How to understand when the Clear attribute takes the right value? It seems that the experimental situation is always inconsistent with the theory.

What does the inline element mean? What are block-level elements?

"CSS Definitive Guide" Chinese text shows: 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 line, and there will be a thin black line below each line. 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. These elements are displayed as a piece of content; Strong. Elements such as 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)

Inline is within one line. Elements can only be placed within a row; block-level elements are just a four-square box and can be placed anywhere on the page.

To put it bluntly, an inline element is like a word; a block-level element is like a paragraph. If not otherwise defined, it will appear on its own line.

General block-level elements such as paragraph

, title

..., list.

1. , table, form, DIV
   and BODY and other elements. Inline elements are such as: form element , hyperlink , image , .....

   Block-level elementless The salient feature is that each block-level element is displayed starting from a new line, and subsequent elements also need to be displayed on a new line.

   is an inline element in the CSS definition, while

   is a block-level element.

   For those who have learned CSS, they can understand it immediately. But it is difficult for novices to understand. I mainly want to make it more familiar to novices!

   Using the word container will make it easier to understand their existence and purpose. Inline elements are equivalent to small containers, and < div> is equivalent to a large container. Of course, a small container can be placed in a large container. It is a small container. This way you may have a preliminary impression in your mind. If we want to put some clean water in a large container. But what if I also want to put some ink in it? It's very simple. We take out the small container, fill it with ink and put it into the clean water in the large container.

   Block elements are generally container elements for other elements

   Block elements generally start on a new line and can accommodate inline elements and other block elements. A common block element is the paragraph tag 'P". The "form" block element is special. It can only be used to accommodate other block elements.

   Without the effect of css, the block elements will be arranged sequentially on a new line each 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 variable 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.

   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 problem.

   block element

   address - address

   blockquote - block quote

   center - alignment block

   dir - Directory list

   div - Commonly used block level is easy, and it is also the main tag of css layout

   dl - Definition list

   fieldset - form control group

   form - Interactive form

   h1 - Heading

   h2 - Subtitle

   h3 - Level 3 heading

   h4 - Level 4 heading

   h5 - Level 5 heading

   h6 - Level 6 heading

   hr - Horizontal separator line

   isindex - input prompt

   menu - Menu list

   noframes - frames optional content (this block content is displayed for browsers that do not support frames)

   noscript - optional script content (this content is displayed for browsers that do not support scripts)

   ol - sorted list

   p - paragraph

   pre - formatted text

   table - table

   ul - unsorted list

   inline element

   a - anchor

   abbr - abbreviation

   acronym - first word

   b - bold ( Not recommended)

   bdo - bidi override

   big - big font

   br - line break

   cite - quote

   code - computer Code (required when quoting source code)

   dfn - definition field

   em - emphasis

   font - font setting (not recommended)

   i - italic

   img - picture

   input - input box

   kbd - define keyboard text

   label - table label

   q - short quotes

   s - underscore (not recommended)

   samp - definition sample computer code

   select - item selection

   small - small font text

   span - commonly used inline container, defining blocks within text

   strike - underline

   strong - bold emphasis

   sub - subscript

   sup - superscript

   textarea - multi-line text input box

   tt - telex text

   u - underline

   var - Define variables

   Variable elements

   Variable elements determine whether the element is a block element or an inline element according to 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

   Welcome to join the IT exchange group:

   Statement：

   The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
   Previous article：Another gradient color generation algorithm_html/css_WEB-ITnoseNext article：Another gradient color generation algorithm_html/css_WEB-ITnose

   Related articles

   See more

   • Summary of Html knowledge
   • How to learn HTML quickly
   • The difference between html xhtml xml
   • The difference between src and href attributes
   • About HTML5 and CSS replacement use
   

   Public welfare online PHP training，Help PHP learners grow quickly！

   About usDisclaimerSitemap

   © php.cn All rights reserved