3. Important tags for CSS layout??div_html/css_WEB-ITnose

As mentioned at the beginning, to understand CSS, you can start by understanding the div tag. In fact, the core tag of the layout is div, and it is also the one we will come into contact with the most in the next step.
1. The meaning of div:
div is a container, which exists in the form of

when used.
In XHTML, each tag can be called a container and can place content. But div is a container object specifically used for layout design in XHTML.
In the traditional table layout, it relies entirely on the table object table to draw multiple cells on the page and place content in the table to achieve layout purposes.
In the page layout with div object as the core, you only need to use DIV and css to implement the layout, so it is customary to call css layout div css layout.

2. The div is just a region identifier. If the div is used but the css style of the div is not applied, it means that you only see the content of the div without any style changes. This is a little different from using table layout. For example, when implementing left and right columns, the table can see the column effect, but the div without CSS is only used as a region identifier and there is no change. Look at the comparison of the effects achieved by the following code:

Program code

Super baby, step by step, practical div css series tutorials

Super baby, step by step, practical div css series tutorials

Display rendering:

The table displays left and right columns, and the border is displayed according to its default border thickness of 1.
The css style is not applied to the div, the two lines will not be displayed in columns, and there is no visible effect. As mentioned above, div is just a region identifier that delimits an area, and the responsibility of style is handed over to css.

So how can we show the effect of sorting?
Careful friends will find that the content in the div container has not changed, but in the DW editor, it can be seen that the default div is displayed in the entire row, and another div is arranged below, and each div is 100% width. According to W3C official terms, div is a block object. In XHTML, almost all objects are of two default types:
block Block object: Block object refers to the current object displayed as a block. The default is to display the entire line, and the next object is displayed on the next line.
in-line object (inline object): This type is the opposite of the former, which allows the next object to be displayed in a line with itself.

It is precisely because the content of the div has no effect, and CSS is needed to implement the style, that the separation of content and style is achieved. Such separation makes the final effect of the div written by CSS. CSS can achieve left and right columns, as well as top and bottom columns, but tables do not have such flexibility. The irrelevance between CSS and div content determines that div has great flexibility in design and is not constrained by the fixed mode of cells.
Therefore, to implement CSS layout, first mark the content with div in XHTML, and then use CSS to write the style.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn