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

In this issue, the editor will bring you what are the common problems and skills about the use of CSS. The article is rich in content and analyzes and narrates it from a professional point of view. I hope you can get something after reading this article.

Have you ever encountered any thorny problems in the process of using CSS? here are some common questions and techniques used by CSS, such as the vertical center of div, the problem of doubling margin, the double distance generated by floating IE, the double distance generated by floating IE, and so on.

Common problems and skills in using CSS

The problem of vertical centering of 1.div

Vertical-align:middle; increases the line spacing to the same height as the entire DIV line-height:200px; and then inserts the text, which is centered vertically. The disadvantage is to control the content and not to change the line.

The problem of doubling 2.margin

Div set to float doubles the margin set under IE. This is a bug where all IE6 exists. The solution is to add display:inline to the div

For example, the corresponding css is

VIEwplaincopytoclipboardprint?

# imfloat {float:left; margin:5px;/*IE is understood as 5px*/} # imfloat {float:left; margin:5px;/*IE is understood as 10px*/ display:inline;/*IE and then 5px*/}

3. Double distance generated by floating IE

# box {float:left;width:100px;margin:000100px;// in this case the IE will generate the distance display:inline;// of the 200px to make the float ignore}

Let's talk about block and inline in detail: the characteristic of the block element is that it always starts on the new line, and the height, width, line height and margin can be controlled (block element). The characteristic of the Inline element is that it is on the same line as other elements and cannot be controlled (embedded element).

VIEwplaincopytoclipboardprint?

# box {display:block;// can simulate embedded elements as block elements display:inline; / / to achieve the effect of the same line arrangement diplay:table; # box {display:block;// can simulate the embedded elements as block elements display:inline; / / to achieve the effect of the same line arrangement diplay:table

4.IE and width and height problems

IE doesn't recognize the definition of min-, but in fact it treats normal width and height as if there were min. This is a big problem. If you only use width and height, these two values will not change in normal browsers. If you only use min-width and min-height, the width and height will not be set under IE at all.

For example, to set the background picture, this width is more important. To solve this problem, you can do this:

VIEwplaincopytoclipboardprint?

# box {width:80px;height:35px;} html > body # box {width:auto;height:auto; min-width:80px;min-height:35px;} # box {width:80px;height:35px;} html > body # box {width:auto;height:auto; min-width:80px;min-height:35px;}

5. The minimum width of the page

Min-width is a very convenient CSS command that specifies that the element must not be less than a certain width, so that typesetting is always correct. But IE doesn't recognize this, and it actually uses width as the minimum width. To make this command work on IE, you can put a < div > under the < body > tag, then specify a class for div, and then CSS designs it like this:

VIEwplaincopytoclipboardprint?

# container {min-width:600px; width:_expression (document.body.clIEntWidth? "600px": "auto");} # container {min-width:600px; width:_expression (document.body.clIEntWidth? "600px": "auto");}

* min-width is normal; but the width on line 2 uses Javascript, which is recognized only by IE, which can also make your HTML documents informal. It actually achieves the minimum width through the judgment of Javascript.

6.DIV floating IE text produces a 3-pixel bug

The object on the left floats, the right uses the left margin of the external patch to locate, and the text in the object on the right has 3px spacing from the left.

VIEwplaincopytoclipboardprint?

# box {float:left;width:800px;} # left {float:left;width:50%;} # right {width:50%;} * html#left {margin-right:-3px;// is the key} # box {float:left;width:800px;} # left {float:left;width:50%;} # right {width:50%;} * html#left {margin-right:-3px;// is the key}

The problem of 7.IE playing hide-and-seek

When the div application is complex, there are some links in each column, such as DIV, it is easy to play hide-and-seek.

Some of the content cannot be displayed, and when the mouse selects this area, it is found that the content is indeed on the page. Solution: use the line-height attribute for # layout or use fixed height and width for # layout. The page structure is as simple as possible.

These are the common problems and skills in the use of CSS shared by the editor. If you happen to have similar doubts, you might as well refer to the above analysis to understand. If you want to know more about it, you are welcome to follow the industry information channel.

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.