Shulou(Shulou.com)06/03 Report--

This article mainly explains the "CSS tag classification and tag display mode conversion", the article explains the content is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "CSS tag classification and tag display mode conversion" bar!

I. Block-level elements (block-level)

Each block element usually occupies a whole row or more, and its width, height, alignment and other attributes can be set, which is often used in the construction of web page layout and web page structure. Common block elements are ~,

, and so on, in which the tag is the most typical block element.

Features: (important)

1. Monopolize the father line, and the width is 100% of the container by default.

2. Height, row height, outer margin and inner margin can be controlled; (width and height settings are supported)

3. Do not set the height, which is determined by the content

4. Can accommodate inline elements and other block elements

II. Inline elements (inline-level)

Inline elements (inline elements) do not occupy independent areas, only rely on their own font size and image size to support the structure, generally can not set width, height, alignment and other attributes, often used to control the style of the text in the page. Common inline elements are, and so on, among which the label is the most typical inline element.

Features: (important)

1. If the elements in the adjacent lines are on one line, there will be gaps in the line wrapping.

2. Height and width are invalid, but padding and margin in horizontal direction can be set, while those in vertical direction are invalid. (width and height are not supported)

3. The default width is the width of its own content

4. Inline elements can only hold text or other inline elements. (a Special)

Tips:

1. Only text can form a paragraph, so there can be no block-level elements in p. Similarly, there are these tags, h _ 2 ~ H _ 3, h _ 3, h _ 4, h _ 5, and h6, h7, DT. They are all text-type block-level tags, and no other block-level elements can be put in them.

2. There can be no more links in the links.

Third, inline block elements (inline-block)

There are several special tags in the inline elements--

You can set width, height and alignment attributes on them, and call them inline block elements.

Features:

1. On one line with adjacent inline elements (inline blocks), but there will be gaps between them

2. The default width is the width of its own content

3. Height, row height, outer margin and inner margin can be controlled.

Fourth, label display mode conversion display

When designing a web page, you may need to set different display modes for different tags. It can be implemented through display.

1. In-line block: display:inline

2. Inline block rotation: display:block

3. Convert blocks and inline elements into inline blocks: display: inline-block

Thank you for your reading, the above is the content of "CSS tag classification and tag display mode conversion". After the study of this article, I believe you have a deeper understanding of the classification of CSS tags and tag display mode conversion, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.