Good programmers to share classified CSS tags, and display mode, type label (display mode) HTML tags are generally divided into Blocks and inline labeling are two types, they are also known within the block elements and inline elements.
A block-level element (block-level)
Each block element alone usually occupy an entire row or entire rows may be provided on its width, height, alignment and other attributes, commonly used in the building structure of pages and page layout. Common block elements have <h1> ~ <h6>, <p>, <div>, <ul>, <ol>, <li> etc., wherein <div> tag is the most typical block element.
Features : (important)
1, father exclusive line, the default width of the container is 100%;
2, height, line height, from the outer and the inner margins can be controlled; (width and height is provided to support)
3, the height is not provided, the height determined by the contents;
4, can be accommodated inline block elements and other elements;
Two, inline element (inline-level)
Inline elements (inline elements) not occupy separate areas, only by their size and font size of the image to the support structure, generally can not set the width, height, alignment and other attributes, used to control page of this Chinese style. Common inline elements have <a>, <strong>, <b >, <em>, <i>, <del>, <s>, <ins>, <u>, <span> etc., wherein <span> the most typical label inline elements.
Important characteristics :()
1, and the adjacent rows of elements on one line, there will be voids wrap;
2, height, width invalid, but the padding and margin may be provided in the horizontal direction, the vertical direction valid; (width and height are not supported)
3, the default width is the width of its own content;
4, the line element can only receive the text or other inline elements. (A special)
Tips：
1, only the text can be grouped together into paragraphs so p can not put block level elements inside the same token there are these tags h1, h2, h3, h4, h5, h6, dt, they are writing class block-level tag, which can not put other blocks level elements.
2, the link which can not recapture link.
Third, the row within the block elements (inline-block)
There are several elements within the row of special labels - <IMG />, <INPUT />, <TD> , width and height can be provided to them and alignment properties, they are called block elements within a row .
Features:
1, and the elements (rows within the block) in the adjacent row on one line, but there is a gap between the blank;
2, the default width is the width of its own content;
3, height, line height, margins and padding can be controlled.
Fourth, the label display mode switching display
In the design of web pages, you may need to set a different label different display modes. It can be achieved by display.
1, the switch block: display: inline;
2, row 转块: display: block;
3, a block, inline element row within the block is converted to: display: inline-block;