css div_html/css_WEB-ITnose

Foreword: width and height do not interact and work independently!

1. When the div is set to a fixed length and width

Both height and width are fine! : Regardless of whether there is content inside (you can ignore the content), the div is just a frame there (borderless by default)! Even if the content exceeds the size, the size remains unchanged!

#select_box {
WIDTH: 330px; HEIGHT: 40px; border:2px solid red;
}

Display effect:

2. If the div is set to a percentage

The width will work no matter what! ：width:50%;It works! Ignore the content! Even if the content exceeds the width of the width box, it is still 50%, and the content exists beyond the box;

The height does not work in any case! : Heigth: 50% will not work. The height is the height of the content. If you want to set the height, you need to use height: 50px. Then it is OK. At this time, a frame will appear even if there is no content!

Note that width is always based on the outer object!

3. Nested div form

Most cases are:

Father and son do not interfere with each other. Two boxes appear at the same time!

The added content will be displayed

4. If BACKGROUND is set in the div: url(../images/ubox-select.gif) no-repeat 0px 0px

4.1. When the div is very small, only a fixed area of ​​the image will be displayed!

4.2. When the div is very large, the specific situation of the image depends on the no-repeat 0px 0px parameter!