Understanding HTML element Classifications

HTML contains a large number of tags, these tags in our use found there will be a small difference, and some labels will not have too large layout changes, just semantics, and some labels will be re-line, the equivalent of a return to the same time, this is the different label elements of different classification result.

Block-level elements

in HTML, <div>, <p>,

1, each block-level element begins with a new row, and the subsequent element also starts a row. (That is, block-level elements to occupy their own line, the back of the way)

2, the element's height, width, row height, and top and bottom margins can all be set.

3, the element width is not set, it is 100% of its own parent container, or it can be set individually.

Inline elements

Distinct from blocky elements, <span>, <a>, <label>, <strong>, <em> is a typical inline tag (inline element) element, People in the use of the process in fact there is not much change in the layout, they modify the line is just some of the visual or click Effects and so on.

Of course, inline elements also have some of their own characteristics, these and block-level elements are one by one corresponding.

1, inline elements and other elements are on one line without crowding out other elements,

2, the height of the element, the width and the bottom margin of the top are not set (because the elements are all in line, if you set these, then the elements are not all messed up).

3, the width of the element is the width of the text or Picture it contains, and it cannot be changed.

Inline block elements

This element is very small, they both have the characteristics of two elements, <input> These two tags are inline block elements. It's not much of an introduction.

　　

These three elements can be converted to each other, that is, the CSS can be forced to modify its element type, only need to set the display properties, if you want to modify the inline elements <span> type as block-level elements, the code is as follows

span{

Display:block;

}

The same is true of the other. Property values are changed to block-level elements: block, modified to inline elements: inline, modified to inline block elements: Inline-block.

These three elements must be very accurate to grasp, because in the div + CSS layout, they occupy a pivotal position.

　　

Understanding HTML element Classifications