Standard Layout FAQs and Solutions

Css2.0 box model hierarchical plane and 3D

3 pixel Problems and Solutions

When float floating containers are used, 3px space is generated in IE6. It is interesting that 3px is inside the right container when no height is set in the right container, when the height is set, the container is displayed on the left. For more information about the layout accuracy, see solutions for example 29 and 31.

After the above container floats, the lower container floats, causing page disorder

For example, in the preceding example, footer must take a single row, but when the content height is smaller than the sidebar height after the sidebar float, footer also floats to the right of the sidebar, causing page disorder. The solution is to insert a container between maincontent and footer and set the style clear: Both; Height: 0; font-size: 1px; line-Height: 0px; clear with clear: both, to make the page normal

How can the parent container adapt to the height of the child element when the child element is floating and unknown?

In this case, you can add the overflow: auto; ZOOM: 1; style attributes in the parent window. overflow: auto; enables the parent container to adapt to the height of the internal container. Zoom: 1; CSS hack is used to be compatible with IE6. Zoom: 1; it is a pity that it cannot pass W3C verification. Fortunately, ie supports <! -- [If IE]> This method can be used to write a separate style for IE. Therefore, you can write this attribute in the <! -- [If IE]>.

Relative and absolute positioning

When planning a page, you often need to use relative positioning or absolute positioning. There is a skill in it. After you have mastered it, you don't need to worry about tedious Js. When the parent container uses relative positioning, the child element then uses absolute positioning, and the position is relative to the parent element. If the parent element is not located, the absolute positioning of the child element is relative to that of the browser.

IE6 double margin bug

When multiple consecutive fluctuations exist on the page, for example, the icon list on this page uses the left floating mode. When the left-side margin value of Li is set, the left-side display doubles. For example, if the outer margin is set to 10px, and the left side shows 20px, the solution is to add the display: inline; style to the floating element to avoid the double margin bug.