Why use div css layout

Why use div css layout?

I have just come into contact with the front end, and I always feel that table layout looks neater in code than div css. Pages with div css layout have a lot of< ;div>

...

seems to make people suffer from trypophobia, so why are the mainstream websites still enjoying it? Why has div CSS become a mainstream layout method?

After analyzing the advantages and disadvantages of DIV CSS, you can understand why DIV CSS layout is used.

Advantages of DIV CSS

1. Comply with W3C standards. This ensures that your website will not be obsolete due to future web application upgrades.

2. More friendly to viewers and browsers. Because CSS is rich in styles, it makes the page more flexible. It can achieve unified and non-deformed display effects according to different browsers. This supports browser backward compatibility, which means that no matter who wins the browser war in the future, your website will be well compatible.

3. Make the page load faster. The page size becomes smaller and the browsing speed becomes faster. Since most of the page code is written in CSS, the page size and capacity become smaller. Compared with the table nesting method, DIV CSS separates the page into more areas, which are loaded layer by layer when the page is opened. Instead of enclosing the entire page in a large table like table nesting, the loading speed is very slow.

4. Maintain visual consistency. In the past, the production method of nested tables would cause deviations in the display effect between pages or between regions. Using the DIV CSS production method, all pages or all areas are uniformly controlled by CSS files, which avoids effect deviations reflected in different areas or different pages.

5. More efficient when modifying the design. Due to the use of the DIV CSS production method, the content and structure are separated, making it easier to save time when modifying the page. According to the regional content tag, find the corresponding ID in CSS, which makes it more convenient to modify the page, and will not destroy the layout style of other parts of the page. It is easier to divide labor and reduce interdependence in team development.

6. Search engines are more friendly. Compared with the traditional table,

web pages using DIV CSS technology write most of the HTML code and content styles into the CSS file, which makes the code in the web page more concise and the text part more prominent. Obviously, it is easy to be collected and included by search engines.

Defects of CSS+DIV website design

Although DIV CSS has certain advantages, the problems existing in CSS DIV website construction at this stage are also relatively obvious, mainly reflected in:

1. High reliance on CSS makes web design more complicated. Compared with the table layout (table) in HTML4.0, although CSS DIV is not out of reach, it is at least much more complicated than table positioning. Even for website design experts, it is easy to have problems, let alone beginners. To a certain extent, it has affected the popularization and application of XHTML website design language.

2. Abnormal CSS files will affect the normal browsing of the entire website. The design elements produced by CSS websites are usually placed in one or several external files. These files may be quite complex or even large. If the CSS file is called abnormally, the entire website will become miserable.

3. The browser compatibility issue with CSS website design is quite prominent. Although searches say that DIV CSS solves most browser compatibility issues, there are also exceptions when used in some browsers. CSS DIV still needs further support from various browser manufacturers.

4. Whether CSS DIV is optimized for search engines depends on the professional level of web design rather than CSS DIV itself. CSS DIV web design does not guarantee that the web page will be optimized for search engines, or even ensure that it will have a simpler code design than the HTML website. Because for search engines, factors such as website structure, content, and related website links are always the most important indicators for website optimization.

How to use WEB2.0 design standards more effectively and reasonably requires a long time of study and exercise. How to use DIV CSS better requires continuous practice and physical examination, and accumulation of rich design experience in order to master this technology well.

The above is the detailed content of Why use div css layout. For more information, please follow other related articles on the PHP Chinese website!