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

This article will explain in detail what the solutions to common problems in DIV CSS design are. The content of the article is of high quality, so the editor will share it with you for reference. I hope you will have a certain understanding of the relevant knowledge after reading this article.

As a front-end developer, it is inevitable to encounter problems of one kind or another in daily page production, and I selected some of them for summary and archiving.

Solutions to Common problems in DIV CSS Design

As a front-end developer, it is inevitable to encounter problems of one kind or another in daily page production. I selected some of them for summary and filing, hoping to be helpful to you:

1. How to define a container with a small height?

A container with a small height cannot be defined under IE6 because there is a default row height.

List 2 solutions: overflow:hidden | line-height:0

2. How many pixel gaps are there at the bottom of the picture in the DIV CSS design?

There are also a variety of solutions, such as defining img as display:block or defining the parent container as font-size:0. Individuals prefer to use vertical-align, whose value can be text-top | text-bottom | middle, etc.

3. IE6 double margin BUG?

Display:inline

4. Align the text vertically to the text input box?

The same is true of setting input to vertical-align:middle,textarea

5. Why can't ie set the color of the scroll bar under the web standard?

Define the style that sets the color of the scroll bar to the html tag selector

6. How to make the layer display on falsh in DIV CSS design?

No, except for a few very senior guys.

However, you can set flash to be transparent, and then the layer will be displayed through falsh, which is similar to overlaying flash, such as:

7. How to keep the text from wrapping?

Define the container that contains text as: width:xxx;white-space:nowrap

8. How to display the text that exceeds the width as an ellipsis in ie?

Define the container as: overflow:hidden;width:xxx;white-space:nowrap;text-overflow:ellipsis

9. How to select checkbox when clicking on text in DIV CSS design?

test

10. One div is margin-bottom:10px and the other div is margin-top:5px. Why is the spacing between the two div 10px instead of 15px?

In this case, the browser will automatically overlap the margin and only display a larger margin value.

Solution: set only one of the div's margin to 15px

11. How to solve the gap between li when there are two or more floats in li under ie?

Set the vertical-align of li. The value can be top | text-top | middle | bottom | text-bottom

12. How to avoid line breaks in English words in the design of DIV CSS?

Word-wrap:break-word

13. Why have the colors of the visited links not changed?

When defining the style of links, you need to follow the order of link,:visited,:hover,:active, which can be memorized using LoVeHAte (likes and dislikes)

14. How can a single line of text be centered vertically?

The height:xxx;line-height:xxx; height is the same as the row height.

15. How can a container of known height be centered horizontally and vertically in the page?

See: http://blog.doyoe.com/article.asp?id=74

16. How do the pictures of unknown size in DIV CSS design be centered horizontally and vertically?

See: http://blog.doyoe.com/article.asp?id=159

17. The difference between the box model in standard mode and weird mode?

In standard mode: actual width = width+padding+border

In weird mode: actual width = width-padding-border

What is the solution to the common problems in DIV CSS design is shared here. I hope the above content can be helpful to you and learn more knowledge. If you think the article is good, you can 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.