As the most common layout element, DIV plays an important role in Web development. Here summarize the various operations I met in the use of DIV.
1. Div displays scroll bars
code is as follows:


overflow: visible | auto | hidden | scroll
overflow - x: horizontal scroll bar
overflow - y: vertical scrollbar

the meaning of the parameters:
visible: don't shear content doesn't add a scroll bar. If explicitly declared this default value, an object will be cut to include objects the size of the window or frame. And clip property is set to fail.
auto: this a default value for the body objects, and textarea. Shear content and add a scroll bar when you want
hidden: don't show more than the content of the object size
scroll: always displays scroll bars
overflow: auto; This said when you content than div height in vertical scrollbar
so we want to when you need to show that vertical scroll bar, so to achieve:

  code is as follows:  


<Divstyle="overflow: auto;" >... </div>

or

  code is as follows:  


<Divstyle="overflow - y: auto;" >... </div>

(2) the horizontal scrollbar
if you want to appear horizontal scroll bar, usually with forbidden line Settings, such as:

  code is as follows:  


<Divstyle="overflow - x: auto; height: 40 px; width: 100 px; white - space: nowrap" ></div>

(3) the appearance of the scroll bar
in IE, main is to use all sorts of color attributes:

  code is as follows:  


scrollbar - 3 dlight - color: color; To set or retrieve the scroll bar on border color;
the scrollbar - highlight - color: color; To set or retrieve the scroll bar on side of the 3 d interface color;
the scrollbar - face - color: color; To set or retrieve the scroll bar on the surface of the 3 d color;
scrollbar arrow - color: color; The color of the set or retrieve the scroll bar arrows; When the scroll bar appear but is unavailable, this attribute the failure;
the scrollbar - shadow - color: color; 3 d interface to set or retrieve the scroll bar's dark side color;
the scrollbar - darkshadow - color: color; To set or retrieve the scrollbar dark border color;
scrollbar - base - color: color; Base color to set or retrieve the scroll bar. Other interface color will automatically adjust accordingly.
the scrollbar - track - color: color; To set or retrieve the drag of the scroll bar area color

in Chrome, basically is to use webkit special attribute set:

  code is as follows:  


: : webkit - scrollbar - track - piece {
background - color: # FFF; The background color of the scroll bar *//*
- webkit - border-radius: 0; The rounded corners of the scroll bar width *//*

} : : webkit - scrollbar {
width: 8 px;/* the width of the scroll bar */
height: 8 px;/* the height of the scrolling */

} : : -- webkit -- scrollbar thumb: vertical {/* the style of the vertical scroll bar */
height: 50 px;
background - color: # 999;
- webkit - border-radius: 4 px;
the outline: 2 pxsolid # FFF;
the outline - offset: - 2 px;
border: 2 pxsolid # FFF;

} : : -- webkit -- scrollbar thumb: hover {/* scrolling hover style */
height: 50 px;
background - color: # 9 f9f9f;
- webkit - border-radius: 4 px;

} : : -- webkit -- scrollbar thumb: horizontal {/* the style of the horizontal scroll bar */
width: 5 px;
background - color: # CCCCCC;
- webkit - border-radius: 6 px;
}

2. No div event bubbling
code is as follows:


functionBigDiv (event) {
the if (event. StopPropagation) {
event. StopPropagation ();//in the core based on firefox browser support practice stopPropagation
} else {
event. The cancelBubble=true; Based on ie//write

}//othercodes...
}

3. Prohibit div implement the default behavior
code is as follows:


<Divid="A" >
<Divid="B" >
</div>
</div>

when A position of relative position of B as the absolute is valid. At that time left: 0, top: 0 is no longer in view of the document window, but for this div with id A. But if you're in A padding=" 50 px " , the other is not set in A postion to absolute will change with the padding in the value of A, but B will not change its position is relative to the upper level.
here is obviously a little bit about the position of the four attributes value: relative and absolute, fixed, the static. Above or below the code, for example:
relative
relative value means that elements according to its position relative to the offset. In the code above, for example, if the set B set a relative value, such as setting up the following CSS:

  code is as follows:  


# {B
position: relative;
the padding: 5 px;
top: 5 px;
left: 5 px;
}

we can understand it, if you don't set the relative attributes, B's position according to the normal document flow, it should be in one location. But after the set B for relative position, based on the top, right, bottom, left of the offset value according to where it should be, &other relative; Relative &throughout; Meaning is also reflect on this.
note: the relative deviation is based on the object of margin of the upper left
code is as follows:


vartop=$(event. The target). Offset (). The top;
varleft=$(event. The target). Offset () left;

because it is relative to the document, that is the position of the left upper corner of the page, so you need to pop up the first layer in the layer on the Body element, the parent's Body. If included in the other elements, the need to make sure that any one style set position relative to the parent class. Calculated the top and the left is the location of the event source, in this location will be covered the event source object. So usually need to manually make some offset, such as top + 20.
5. Hidden div element
code is as follows:


<Div>
<Divstyle="float: left" >Aaaaaaaaaaaaaa