Keywords: block-level element row-level element inline block elementI. Overview html (Hyper Text Markup Language) as a markup language, all of the content of the Web page is written
inside the label, which is the
basic element that makes up the HTML page, so the label features The solution is more important in the process of HTML learning. II. Basic Classification
tags in HTML can be divided into closed labels and empty labels from a closed angle. While most of the HTML tags are closed tags, the other few are empty tags, often see empty tags are <input/>, , <area/>, <base/>, <link/> and so on.
another way to classify labels in HTML is to classify them according to their positional attributes in the document, which divides the elements into three categories: block-level elements, inline elements, row-level block elements (also called block-level row elements).
1. Block-level elements (blocks)
Features:
(1) can be set wide height, inner and outer margin;
(2) an exclusive line (i.e. there is a newline before and after);
(3) block-level elements if you do not set the width and height, the width defaults to the width of the parent element. The height is automatically populated based on the content size.
Common Block-level elements: Div, p, H1, H2......hn,ol,
ul, DL,
Li,
form, table
2. Row-level elements (inline)
Features:
(1) can not set the width of high, up and down inside, outside the distance.
(the left and right inner and outer margin settings are valid)
(2) Its width and height are automatically filled by its contents.
(2)
Other line-level elements coexist in one row
;
Common line-level elements: A, span, I, lable, etc.
3. Inline block Element (Inline-block)
Features: (1) can be set wide height, internal and external margins;
(2) can be in line with other inline elements, elements in the inline;
Common inline elements: input, img
4. Conversions between elements
You can change the display of elements in a inline style or CSS style to convert three elements.
display:block; (change element to block-level element)
Display:inline; (Changes the element to a row-level element)
display:inline-block; (Changes the element to a row-level block Element)
HTML tag types and features
