Summary of div css web page layout [Transfer]_html/css_WEB-ITnose

1. ul: The default margin and padding of ul are not 0. If a left-floating li is used in navigation, it will often expand the external div, causing the page to deform. Change it to: ul{margin :0px; padding:0px;}


2. img:

① The problem of different browsers involved here is that the height of the image displayed in ie6 is always larger than the accurate value. Here we need to remember the following point: img{display:block};

②It is best not to use large backgrounds on the page. Those that can be tiled must be tiled, otherwise it will be very slow to load and will not It is conducive to future optimization and expansion. Of course, some large websites now try to put the background on one picture and use background-postion to obtain the background.

③The best format is the gif format, which ensures that the background is transparent and there will be no shadows in ie6. Sometimes the gif image will be jagged, which requires us to save it in web format and set the matter. The closer the matter value is to the background color value, the better.


3. Overflow: Sometimes the registration agreements of some companies are very long, so overflow is used. You can add this to the style of the div: overflow: auto



4. Float: Sometimes some divs will be squeezed to the top of the page. This may be caused by floating. You can add clear: both.


5. div: A div with height equal to 1px may not be 1px in IE6. Add font-size: 1px to the style of this div; this will be ok.


6. id and class: When a style is used multiple times on the page, do not use id, use class. When using js, it is best not to use id for the style, because the id Leave it to js. The ID appears only once in a page. Excessive use will lose the reusability feature of the style, and the maintainability of the page will also be greatly reduced.



7. Table and div: Most web pages on the Internet are now written in tables, which can be said to be non-standard! Tables are nested layer by layer. The disadvantage is that they are very cumbersome and troublesome to modify. According to w3c web standards, the real purpose of tables is to display data, not for layout. The advantage of div layout is that it complies with w3c web page standards. div is really used to lay out web pages. If you want to change the layout during future maintenance, it is very easy to modify. Nowadays, domestic websites such as sina, 163 and most foreign websites use it. div layout, if you really want to be a web designer, I suggest you take the div route, but the prerequisite is to learn CSS well and master it! You can set the CSS properties of the body, or set the CSS properties of the elements in the Body, such as P tags, Table tags, Div tags, etc. They all have text-align attributes. Just set them to center. In addition, you need to pay attention to It is best to use a Table to locate the content in the center of the entire web page, which is the easiest and most convenient to operate.


7. link: .link: link{}, .link: visited{}, .link:hover{}, .link: active{}. One thing is that the order of visited and hover must not be reversed, otherwise there will be big problems in ie6.



8. Web page layout methods: There are two methods of web page layout, the first is paper layout; the second is software layout. Size selection: Currently, the resolution of 800X600 is generally the conventional browsing mode.



9. Application of Cascading Style Sheets:
In the new HTML4.0 standard, CSS (Cascading Style Sheets) is proposed, which can completely and accurately position text and picture. CSS may seem a bit complicated for beginners, but it is indeed a good layout method. Ideas that you have never been able to realize can be realized with CSS. Currently on many sites, the use of cascading style sheets is an excellent reflection of a site. You can find many introductions and usage methods of CSS online. Of course, the increasingly popular WEB standard (XHTML CSS) initially strongly advocates the separation of content and presentation, and serves as a transition for the next generation of data exchange XML (i.e., XHTML).

10. DTD: If the display results of different browsers are still different no matter how you adjust it, then you can check whether you forgot to write the following line of DTD at the beginning of the page



11. Float: 1) The element must specify the width attribute: many browsers have bugs when displaying float elements without specifying width. So regardless of the content of the float element, the width attribute must be specified for it. In addition, try to use em instead of px as the unit when specifying elements. 2) Float elements cannot specify attributes such as margin and padding: IE has a bug when displaying float elements with margin and padding specified. Therefore, do not specify margin and padding attributes on float elements (you can nest a div inside the float element to set margin and padding). You can also use hacks to specify special values ​​for IE. 3) The sum of the widths of float elements must be less than 100%. If the sum of the widths of float elements is exactly 100%, some ancient browsers will not be able to display it properly. Therefore, please ensure that the sum of the widths is less than 99%. 4) The parent element of a float element cannot specify the clear attribute: If the clear attribute is used on the parent element of a float element under MacIE, the layout of the surrounding float elements will be confused. This is a famous bug of MacIE. If you don't know it, you will take detours.



12. Default style: Different browsers will have different interpretations of certain attributes such as margin, padding, etc. Therefore, it is best to set all margin and padding to 0, list style to none, etc. before development.



13. Use the border attribute to determine the layout characteristics of the error element: Using the float attribute layout will cause errors if you are not careful. At this time, add the border attribute to the element to determine the element boundary, and the cause of the error will be revealed.



14. Use clear floating elements: Stop writing such as

, and element:after {content:”.” ;clear:both;visibility:hidden;height:0;display:block} These are hacks and not the best approach. It should be as follows:
#container {overflow:hidden}

#container {display:inline-block} #container {display:block}

Why use overflow:hidden, because it It has magical power. Please refer to the W3C documentation for specific explanations.



15. Appropriate use of units: Do not use px to define font size. Using px to define font size should be an old habit in the table layout era. Correspondingly, pixel fonts are in 1024 *768 resolution looks OK, but times are constantly changing, and now the share of 1024 resolution is declining, which means that the characters will feel very small on a 1920 monitor. How to solve it? Define it in em units, such as font-size:1.2em, which means that the font is 1.2 times the default font, which is equivalent to 16px under Firefox and IE. The advantage of using em is that you can change the body tag or any other external tag Use the font size to control the font size of the entire site, making the font flexible, which is not possible with px unless you use the zoom function of the browser. In addition, fonts should not be defined in units such as pt, cm, etc. Avoid using percentages. 1em and 100% are equivalent, but the latter takes up more space and has its own quirks.



16. Position: Float is the main one, Position is the auxiliary one! ! ! If position is used to lay out the page, the position attribute of the parent element must be relative. For elements positioned at a certain position inside the parent, it is best to use absolute, because it is not affected by the padding attribute of the parent element. Of course, you can also You can use position, but don't forget the value of padding when calculating. However, positioning has a disadvantage. It does not adapt to the height of internal elements. KwooJan recommends that when laying out the page, you should still use Float as the main method and Position as a supplement! Only in this way can you create high-quality pages.

http://blog.sina.com.cn/s/blog_879890300100wnmb.html