CSS Tutorial: block element and inline element elements detailed

Block elements are generally container elements of other elements, and block elements are generally started from new rows, which can hold inline and other block elements, and common block elements are paragraph label ' P '. "Form" is a special block element that can only be used to accommodate other block elements.

If there is no CSS, the block elements will be sorted sequentially in the same way each time the other row. With CSS, we can change the HTML default layout pattern and place the block elements where you want to go. Instead of being stupid every time you start another line. It should be noted that table tags are also one of the block elements, table based layout and CSS based layout from the general user (excluding visually impaired, blind, etc.) in terms of these two layouts, in addition to the page load speed difference, no other difference. But if ordinary users inadvertently view the page source code button, the difference between the two is very large. Based on the concept of good refactoring design CSS layout page source code, at least can let the general users without web development experience to quickly read the content. From this perspective, CSS layout code should have a better aesthetic experience.

You can imagine a block container element div as a box, or it's easier to understand if you play a scrapbook. We first cut the articles we need from all kinds of newspapers and magazines. Each cut is a block. Then we put the pieces of paper back on a blank new piece of paper, in accordance with our own layout intent. This creates your own unique Digest Express. As an extension of technology, Web layout design follows the same pattern.

Inline elements (inline element) are generally basic elements based on semantic level (semantic). Inline elements can only hold text or other inline elements, often inline element "a".

Need to explain: inline element in Chinese name, there are a variety of inline elements, embedded elements, inline elements, direct-type elements. Basically there is no unified translation, love how to call it. In addition to the inline element, we would think that there is a display property that is display:inline; This property fixes the famous IE double floating boundary problem.

[1] [2] Next page