Correct understanding of DIV + CSS layout

Many netizens are talking about div + CSS layout, which is used to compare with table layout. It560 considers that div is not used for layout. div is only used to represent a block area where other elements cannot accurately express semantics. Only CSS is used for layout, therefore, there is no such thing as div + CSS layout. In turn, table layout often relies on CSS to define the layout attribute of a cell, so it can be said that it is a table + CSS layout. That is to say, the two mainstream layout methods we discuss should be pure CSS layout and table + CSS layout. If you think you are using div + CSS layout, you may also have obsessive-compulsive disorder.

Next, let's talk about how to perform a pure CSS layout. Because CSS layout depends on XHTML, we should first talk about how to write a CSS-independent XHTML. In fact, it is not difficult to write CSS-independent XHTML. Although you can no longer concentrate on the most important visual effects as you write table layout code, it is just as difficult as the middle school students write compositions.

How do middle school students write compositions? First, let's look at the question, and then think about the major sections in the entire article, what each section says, and what you want to say. For XHTML, this is equivalent to using div to cut the document into several blocks. At this time, you should not think about how these divs will build a DOM, CSS, how to choose the DOM element setting rules to implement layout and so on, just divide the large area of the document.

Then, of course, some common techniques are used to express feelings or arguments. In XHTML, specific elements are used to organize common information. The following is a list of information organization forms and elements.

Img
Images that serve as content must be placed in img, so there is no better choice. However, if the image is not as the content but as the decoration, never use img. For non-content images, they should be referenced in CSS instead of appearing in XHTML. For example, if each navigation link has a leading arrow, these arrows should be added through the background-image attribute of CSS, rather than directly appearing as img.

A
This is also a very accurate definition of the element, the link needs to use it. Some people may have forgotten that the intention of a is the anchor. In fact, this is a very useful syntax. You can use it to mark some important references in the document.

Ul, ol
What does ul and ol respectively mean? If you cannot answer the question, but you know what they can do, it proves that you are spoiled by visualization tools. to convert them to compile the semantic-compliant XHTML, you need to add basic knowledge first, at this time, you 'd better first look for some XHTML books that look very basic and comprehensive, because without a solid foundation, you cannot build more knowledge on them. Ul and ol represent the unordered list and ordered list respectively, that is, the unordered list and the ordered list. In terms of semantics, they are all used to represent the content of a kind of parallel relationship. For example, a shopping list is at the top of the store for shopping. What we want to buy above is a parallel relationship, you can use the comma to separate Chinese characters.

Is there enough rest? Continue reading!

Ul is often used in navigation bars. Because the navigation elements conform to the parallel relationship mentioned above, the tree navigation structure can also be expressed by nested ul. Here, navigation can be our common horizontal or vertical navigation bar, or even map navigation. For example, on a map in China, different provinces have different hot zones. If I say that in mainstream browsers, users can see the map of China and click the province hot zone directly. In browsers that do not support CSS, users can see a list of province names in plain text, the same XHTML file is used, which is completely implemented through CSS and does not depend on JavaScript. Do you believe this?

In addition, if you want to display a thumbnail of a gallery, these images can also be placed in ul, because these images are also tied. They can be automatically lined up first, and the second row will be automatically arranged when the row is full. CSS can let them wait in line without setting the picture to a grid as if it were a table. In fact, table is used for layout, just like holding content in jail, locking the content in a grid won't let it run around. The semantic-compliant XHTML is like an open stage, as long as you know how to use CSS rules, the content will naturally find a suitable place to stand.

Dl
Have you heard of dl? Because the dl is never displayed in the code generated by those visualization tools? Dl indicates the definition list, that is, the definition list. It contains not li, but dt and dd, that is, definition term and definition description. Dl is designed as a dictionary word and interpretation list, for example:
<Dl>
<Dt> hehe </dt>
<Dd> Haha </dd>
<Dt> girl </dt>
<Dd> it560 </dd>
</Dl>

If the semantics you need to represent is similar, a list contains both definitions and explanations, you can also consider using dl.

Form, input
Form is also a form. There is nothing to say about it. Even if the semantic person does not take into account the influence of it and various inputs on the submitted data when writing XHTML, he or she should be careful.

Table
Table is used to represent tables! If it is a data table, you can use table to represent it, but if it is not, you 'd better not use table.

What about the name list? For example, a name list with three rows and four columns. If these 12 people are in a parallel relationship, I suggest you use ul and 12 li to represent them, and then use CSS to show them multiple in a row. What about the business card table? That is, three rows and eight columns, each of which has two columns. The left column shows the contact information, such as the telephone address, and the right column shows the contact information. I think dl can meet this requirement to a certain extent. dt puts people's names and dd puts contact information, but this involves the debate on dl abuse, this is because the definition and interpretation of personal names and contact information are far-fetched.

Next, I will ask you a little question about whether you have learned XHTML, that is, do you know what the caption, col, colgroup, thead, tbody, tfoot element, and summary attributes under the table are used to define, the other is whether you use thead and tbody when writing a table.

Div, span
Review the list again. If you need to indicate a block area, but you cannot find a more suitable element, then you can consider using the div and span elements with no semantics. The difference between div and span is not mentioned in history. Currently, div is usually used for large areas and span is used for small text fragments in rows. As I have mentioned above, div is generally used for global partitioning into several large areas, so it is generally not needed. In fact, span is rarely used, because in-row stresses can usually be used with more semantic elements such as strong and em.

After understanding so many common elements, writing an XHTML is as easy as a middle school student writing a composition. Now you understand what you are building, in the past, you only care about setting up the visual effects you want. Writing code is similar to writing a composition, because the more you write, the more skilled you are, the better you can write good things. After writing XHTML, we should begin to consider how to write CSS. We may also need to make slight modifications in XHTML to facilitate the selection and matching of CSS rules, but this will be discussed later, let's talk about it today.

Related Articles:

Advantages and disadvantages of using DIV + CSS website layout

Naming Conventions and specifications of IDs in div + css design

Css + Div layout Summary

Align horizontally and vertically using div + css