Correctly understand DIV CSS layout_html/css_WEB-ITnose

Many netizens are talking about using div CSS layout to compare with table layout. it560 believes that actually div is not used for layout. div is just used to represent a block area that cannot accurately express the semantic meaning of other elements. Only CSS is used for layout, so there is no such thing as div CSS layout. In turn, table layout often relies on CSS to define the layout properties of a cell, so it can be said to be table CSS layout. In other words, 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, then you may also have obsessive-compulsive disorder.

Next let’s talk about how to perform pure CSS layout. Because CSS layout depends on XHTML, we first talk about how to write a CSS-independent XHTML. In fact, writing CSS-independent XHTML is not difficult. Although you can no longer concentrate on the most important visual effects like writing table layout code, the difficulty is only as difficult as writing a composition for middle school students.

How do middle school students write essays? First, look at the title, and then think about how many major paragraphs the entire article is divided into, and what each major paragraph says, so that you can clearly explain what you want to say. For XHTML, this is equivalent to using divs to cut the document into large chunks. At this time, you should not think about what kind of DOM these divs will build, or how CSS selects the element setting rules in the DOM to implement layout, etc., just roughly divide the large area of ​​the document.

Then of course, some commonly used techniques are used to express emotions or demonstrate issues. In XHTML, specific elements are used to complete some common information organization. The following is a corresponding list of information organization forms and elements.

img

Images as content must be placed in img. There is no better choice. However, if the image is not used as content, but as decoration, never use img. For non-content images, they should be referenced in CSS and not appear in XHTML. For example, each navigation link has a leading arrow indicator, then these arrows should be added through the background-image attribute of CSS instead of appearing directly as img.

a

This is also a very precisely defined element, and all links need to use it. Perhaps many people have forgotten that the original meaning of a is an anchor point. In fact, this is a very useful semantic. You can use it to mark some important reference locations in the document.

ul, ol

What do ul and ol mean respectively? If you can't answer, but you know what they can be used for, it proves that you are spoiled by visual tools. To convert to write semantically-compliant XHTML, you need to supplement basic knowledge first. At this time, you'd better find some tools that look very good. Check out XHTML books with a very comprehensive foundation, because without a solid foundation, it will be unstable for you to build more knowledge on it. ul and ol actually represent unordered list and ordered list respectively, that is, unordered list and ordered list. Semantically, they are used to express a type of parallel relationship. For example, before we go to the store to go shopping, we make a shopping list. The things we want to buy on it are parallel relationships. In Chinese, they can be separated by commas.

Have you rested enough? Continue reading!

ul is often used in navigation bars, because the navigation elements comply with the parallel relationship mentioned above, and the tree navigation structure can also be expressed by nested uls . Here, the navigation can be our common horizontal or vertical navigation bar, or even map navigation. For example, on the Chinese map, the hot spots of different provinces are actually different li. If I say that on mainstream browsers users see a map of China and can directly click on province hotspots, on browsers that do not support CSS they can see a plain text list of province names using the same XHTML. And this is entirely achieved through CSS, not even relying on JavaScript, can you believe it?

In addition, if you want to display thumbnails of a gallery, these pictures can also be placed in ul, because these pictures are also juxtaposed. They can automatically be arranged horizontally first, and then automatically arranged in the second row when one row is full. CSS can allow them to queue up obediently, without having to lock the images in a grid like a table. In fact, using tables for layout is like using a prison to imprison content, locking the content in a grid and preventing it from running around; XHTML that conforms to the semantics is like an open stage. As long as you know how to use CSS rules, the content will be natural. Will find a suitable place to express myself.

dl

Haven’t heard of dl? Because dl never appears in the code generated by those visualization tools? dl means definition list, which is the definition list. The sub-elements it contains are not li, but dt and dd, that is, definition term and definition description. dl itself is designed with semantics such as dictionary words and explanation lists, for example:

hehe

Haha

girl

it560

If you need to express the semantics are similar, a list contains both The definition also contains an explanation, so you can also consider using dl.

form, input

Form is also a form. There is nothing to say about this. Even people who don’t care about semantics will consider the impact of it and various inputs on submitted data when writing XHTML, so be careful.

table

table is naturally used to represent tables, this is no nonsense! If it is a data table, of course it can be represented by table, but if not, it is best not to use table.

What about the list of names? For example, a list of names with 3 rows and 4 columns. If these 12 personal names are in a parallel relationship, I suggest you use ul and 12 li to represent them, and then use CSS to display multiple of them side by side in one line. What about the business card list? That is, there are 3 rows and 8 columns. In every two columns, the left column displays the name of the person and the right column displays the telephone address and other contact information. I think dl can meet this need to a certain extent. dt puts the name of the person and dd puts the contact information. However, this time involves the debate about the abuse of dl, because the name and contact information are a bit far-fetched as definitions and explanations.

Next, there is a small question about whether you have systematically studied XHTML, that is, do you know what the caption, col, colgroup, thead, tbody, tfoot elements and summary attributes under the table are used to define respectively? , and whether you will use thead and tbody when writing table.

div, span

Review the above list again. If you need to represent a block but cannot find a more suitable element above, then you can consider using div and span, the two least semantic elements. . The difference between div and span is not mentioned in history. Nowadays, div is usually used for large areas, and span is used for small text fragments in lines. I have said above that div is generally used to divide the world into several large areas, so it is generally not necessary to use it. In fact, span is rarely used, because inline emphasis can usually be used with stronger semantic elements such as strong and em.

After understanding so many common elements mentioned above, writing an XHTML is as easy as a middle school student writing a composition. Now you understand what you are building, whereas before you only cared about building what you want The visual effects come. Writing code is similar to writing essays in that the more you write, the more proficient you become and the better you can write. After writing XHTML, we have to start thinking about how to write CSS. We may also need to make slight modifications in XHTML to facilitate the selection and matching of rules in CSS, but this is something we will talk about later, so we will stop here today.

This article is reproduced from http://www.it560.com/design/htmlcss/0MMDAwMDAwMzk0MA.html