It is reasonable to go deep into the css structure and explore how to use div and span!

Source: Internet
Author: User

There are many sayings about div. I think div is the most widely used layout element, such as "using div instead of table for layout", "practical CSS + DIV layout", etc. There are too many ideas, many people use Dreamweaver to define div as a layer and use it according to the concept of Photoshop layer ...... A friend simply calls div and span as the auxiliary layout element.
What should I do? Although I would like to say that div is not a layout element and no tag is used for layout, is it true? I don't know. Almost everyone promotes divs in a layout, either 'folk 'or 'official'. However, if we look for the root cause, div is a structured tag in Chinese, is a block-level element. Well, let's first look at the semantics of div, division (separated). By semantics, it is used to separate the two parts. Then let's go back to w3 to see how to define div and span: The DIV and SPAN elements, in conjunction with the id and class attributes, offer a generic mechanic for adding structure to documents. these elements define content to be inline (SPAN) or block-level (DIV) but impose no other presentational idioms on the content.
Have you noticed the rough sentence above? W3 is not for layout, but for structure. It is a structure! A code structure is generated (defined) by separation. I think the structure and layout should be two concepts. Perhaps, because the table is indeed used for layout, this deep-rooted layout idea is naturally passed on to the div, which I have understood for a long time. But now I want to say that this is definitely an error and it is an extremely serious error !!! This is purely personal opinion, and I have chosen it myself.
Why is it serious? An understanding error directly leads to a usage error. If you use div as a layout element based on this idea, I think:
You can never fix xhtml! Always trapped in the strange circle of css! Never think about and understand the structure! Never wipe the marks of the table! Never be close to God (the god of separation, haha )......
It is possible that div is called a layout element to better implement the standard, but it leads people from one mistake to another. Two years ago, when I first came into contact with the standard, I confused about the new version in the first article "beauty of refactoring". Although I had made a breakthrough in understanding it, I did not change it after I wrote the xhtml, then, the css technique is used to complete the new layout. Such as the famous csszengarden. But soon I was confused again. It seems that there is no problem for a person to do this. What about the team? For example, if the same content is designed into two la s and then handed over to two different people to write xhtml, will it be the same? Just like if we put the csszengarden form upside down, would it be the same if we made 100 design drafts based on the same data and asked 100 people to write 100 xhtml copies based on the design draft? I want to follow the div layout mode. For the same layout, different people and different page analyses will produce different xhtml. What's more, different la s? However, since the representation has nothing to do with the structure, the same content should not have more than two pieces of xhtml. Don't underestimate this issue. This is the key to effective separation and quick collaboration between the front and back ends of the team! I put forward a point in the training: the ideal realm is that the front-end can know what xhtml structure code is output in the background with its eyes closed. So where is the problem? Div layout! Especially after understanding the unreasonable tags of the h series, I feel more profound.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.