Differences between block-level elements and intra-row Elements

Differences between block-level elements and intra-row Elements

Standard Document Stream:It refers to the arrangement rules of various elements when no special CSS rules related to typographical and positioning are used. In other words, CSS defines the default arrangement of webpage elements.

 

Block-level elements

From the perspective of page layout and display appearance, the layout of a page is similar to the layout of a newspaper, which needs to be divided into multiple blocks, and the large blocks are subdivided into residential blocks, text, images, hyperlinks, and other content arranged in multiple rows. These blocks are generally called block-level elements, while text, images, or hyperlinks in the blocks are generally called row-level elements. The layout structure of pages is essentially organized by various HTML tags.

Compared with row-level elements, block-level elements have the following features:

(1) The line feed is displayed. The block-level elements are relatively overbearing. By default, the entire line is exclusive.

(2) block-level elements are often used as containers, that is, they can "accommodate" other block-level elements and row-level elements. Row-level elements are generally used to organize content, that is, it can only be used to "hold" text, images, hyperlinks, and other row-level elements.

(3) block-level elements have a certain height and width, which can be controlled by setting the width and height attributes of block-level elements. From the perspective of page layout, block-level elements can be subdivided into basic block-level elements and block-level elements commonly used in page layout.

 

Basic Block-level elements include:

1). Title label

2). Paragraph label <p>: indicates the content of a paragraph.

3). Horizontal line label

 

Block-level elements commonly used for Layout

1) ordered list <ol>-<li>: indicates multiple parallel list items, which have obvious order.

2) unordered list <ul>-<li>: indicates multiple parallel list items, but they are not sequential.

3). definition list <dl>-<dt>-<dd>: Describes the definition or interpretation of a term or product.

4). table <table>: used to describe a table, which is displayed using regular data.

5). form <form>: used to describe the page content that requires user input.

6) Partition <div>: indicates the content used to organize the cell blocks. To facilitate management, a large number of residential blocks need to be placed in a large block for layout. Partition tag <div> is usually used to divide blocks during page layout. It is equivalent to a large container that can hold unordered list, ordered list, definition list, and other block-level labels. It can also contain paragraphs, titles, text, images, and other content.

In actual development, <div> is often used for partitioning. ul-li or ol-li implements unordered or ordered project lists, and dl-dt-dd implements image and text mixing, table-tr-td is used to display normalized data. Therefore, the following four common partial Block Layout structures are formed in the partial page layout:

(1) div-ul (ol)-li: Used in classification navigation or menus.

(2) div-dl-dt-dd: used for text-and-image Mixing

(3) table-tr-td: used for displaying regular data

(4) form-table-tr-td: usually used in form la s

 

Row-level element

Row-level labels are also called inline labels and intra-Row labels. After you use block-level labels to "build an organizational structure" for the page, you need to use row-level labels when adding content to each cell block.

Line-level labels: similar to text display methods, which are displayed one by line. Commonly Used line-level labels include:

(1) image label : used to display images on a webpage.

(2) hyperlink label <a>:

(3) range label <span>: indicates a range used to identify a row. For example, special settings are implemented for a part of the row to distinguish other content.

(4) line feed label <br/>: force line feed display.

(5) input box label <input>

(6) multi-line text domain tags <textarea>