Shulou(Shulou.com)06/03 Report--

This article will explain in detail what are the common questions about the layout of CSS web pages. The editor thinks it is very practical, so I share it with you for reference. I hope you can get something after reading this article.

3-Pixel problem of ◆ float and its solution

When using the float floating container, the 3px gap will be generated under the IE6. What is interesting is that when the height of the right container is not set, the 3px is inside the right container, and when the height is set, it runs to the left side of the container, so if the layout precision is high, you can add the attributes "_ margin-right" and "* html" for IE6 in the float floating container style, such as:

# sidebar {float:left; width:200px; _ margin-right:-3px;}

Or

# sidebar {float:left; width:200px;} * html # sidebar {margin-right:-3px;}

After the upper container of ◆ floats, the lower container floats, causing the page to be messed up.

As shown in the layout in the figure: footer must occupy a separate line, but when sidebar floats and the height of content is less than that of sidebar, footer floats to the right of sidebar, resulting in page confusion. 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

Bug with double margin caused by float floating under ◆ IE6

When there are multiple consecutive floats in the page, such as the icon list on this page is floating on the left, when the left margin value of li is set, the situation is double on the far left. If the outer margin is set to 10px and the left side presents 20px, the solution is to add the style of display:inline; to the floating element, so that double-margin bug can be avoided.

◆ how to adapt the parent container to the height of the child element when the child element is floating and the height is unknown?

In this case, two style attributes, overflow:auto;zoom:1;, can be added to the parent window. Overflow:auto; allows the parent container to adapt to the height of the internal container, and zoom:1; is a CSS used for compatibility with IE6.

HACK . Zoom:1; can not pass the W3C verification, which is also a pity. Fortunately, IE supports this writing, and you can write a separate style specifically for IE, so you can write this attribute in the page, so it should be able to pass the verification.

Relative and absolute Positioning of ◆ CSS layout

When planning the page, many times need to use relative positioning or absolute positioning, there is a CSS skill, after mastering some places do not need cumbersome js. That is, when the parent container uses relative positioning, the child element then uses absolute positioning, which is relative to the parent element. If the parent element is not positioned, the absolute positioning of the child element is relative to the browser

This is the end of this article on "what are the common problems in CSS web layout?". I hope the above content can be helpful to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.