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

This article mainly shows you "what are the common tasks of DIV", which is easy to understand and well organized. I hope it can help you solve your doubts. Let the editor lead you to study and learn the article "what are the common tasks of DIV?"

1.div display scroll bar

This is a very common task, basically through CSS to implement the scroll bar.

(1) Vertical scroll bar

Setting whether or not to display scroll bars mainly sets the following properties in CSS:

The code is as follows:

Overflow:visible | auto | hidden | scroll

Overflow-x: horizontal scroll bar

Overflow-y: vertical scroll bar

The meaning of the parameter:

Visible: do not cut the content or add scroll bars. If you explicitly declare this default value, the object will be cut to the size of the window or frame that contains the object. And the clip property setting will be invalidated.

Auto: this is the default value for body objects and textarea. Cut the content and add scroll bars as needed

Hidden: does not display content that exceeds the object size

Scroll: always show scroll bar

Overflow:auto; this means that when your content exceeds the height of the div, a vertical scroll bar appears.

So we want to display a vertical scroll bar when needed, which can be done like this:

The code is as follows:

...

Or

The code is as follows:

...

(2) horizontal scroll bar

If you only want to have a horizontal scroll bar, you should generally match the setting that forbids line wrapping, for example:

The code is as follows:

(3) the appearance of the scroll bar

In IE, you mainly use various color attributes:

The code is as follows:

Scrollbar-3dlight-color:color; sets or retrieves the bright border color of the scroll bar

Scrollbar-highlight-color:color; sets or retrieves the bright edge color of the 3D interface of the scroll bar

Scrollbar-face-color:color; sets or retrieves the color of the 3D surface of the scroll bar

Scrollbar-arrow-color:color; sets or retrieves the color of the scroll bar direction arrow; this property becomes invalid when the scroll bar appears but is not available

Scrollbar-shadow-color:color; sets or retrieves the dark edge color of the 3D interface of the scroll bar

Scrollbar-darkshadow-color:color; sets or retrieves the dark border color of the scroll bar

Scrollbar-base-color:color; sets or retrieves the base color of the scroll bar. Other interface colors will be automatically adjusted accordingly.

Scrollbar-track-color:color; sets or retrieves the drag area color of the scroll bar

In Chrome, you basically use webkit-specific property settings:

The code is as follows:

::-webkit-scrollbar-track-piece {

Background color of background-color:#fff;/* scroll bar * /

-fillet width of the webkit-border-radius:0;/* scroll bar * /

}

::-webkit-scrollbar {

Width of the width:8px;/* scroll bar * /

Height of height:8px;/* scroll bar * /

}

::-webkit-scrollbar-thumb:vertical {/ * style of vertical scroll bar * /

Height:50px

Background-color:#999

-webkit-border-radius:4px

Outline:2pxsolid#fff

Outline-offset:-2px

Border:2pxsolid#fff

}

::-webkit-scrollbar-thumb:hover {/ * hover style of scroll bar * /

Height:50px

Background-color:#9f9f9f

-webkit-border-radius:4px

}

::-webkit-scrollbar-thumb:horizontal {/ * style of horizontal scroll bar * /

Width:5px

Background-color:#CCCCCC

-webkit-border-radius:6px

}

two。 Prohibition of bubbling of div events

This basically uses the standard event.stopPropagation () method to prevent events from bubbling, with the exception of IE:

The code is as follows:

FunctionBigDiv (event) {

If (event.stopPropagation) {

Event.stopPropagation (); / / supports the practice stopPropagation in browsers based on firefox kernel

} else {

How to write event.cancelBubble=true;// based on ie

}

/ / othercodes...

}

3. Prevent div from performing the default behavior

This is actually a common problem, for elements with default behavior, such as submit button submit form behavior, element hyperlink behavior, etc., if we apply events to these elements, we often want to cancel their default behavior, which is achieved by calling event.preventDefault (); in the callback function of the event.

4. Dynamically calculate the location of the div (such as the common location of the div pop-up layer)

(1) DOM attribute mode

OffsetTop: the distance from the current object to the top of its parent layer. It cannot be assigned, and the style.top property is required to set the distance from the object to the top of the parent object.

OffsetLeft: the distance to the left of the current object from its parent. It cannot be assigned, and setting the distance from the object to the left of the parent object requires the style.left property.

Note the difference between offsetTop and style.top here (offsetLeft and style.left are the same):

OffsetTop returns a number, while style.top returns a string, in addition to the number with a unit: px, which usually needs to be converted to a numeric value using parseInt.

OffsetTop is read-only, while style.top is read-write.

If no top style has been assigned to the HTML element, style.top returns an empty string.

Note: in FireFox, when assigning a value to style.top, it should also be in the form of a string (with px).

(2) the influence of position attribute on position in CSS

The default attribute value of position is static, static. But the most critical attribute values in position are relative (relative) and absolute (absolute).

Often we will combine absolute attributes with left and top to create related "suspension layer" effects. Sometimes, however, we need to target the suspension effect of a container, not the window. At this time, the calculation of height and width is not only troublesome, but also almost impossible to achieve perfect results. In fact, all you have to do is to set the style property position one level above to relative. That is, the effect of the property value of position is directly affected by the value of the position property in its container style. For example, the nested structure of Amurb is as follows

The code is as follows:

When the position of An is relative, the position of B is absolute. At this point, left:0 and top:0 are no longer for window documents, but for this div with an id of A. But if you padding= "50px" in A, others in A that do not set postion to absolute will change with the value of A's padding, but B will not change its position is relatively higher.

Let's talk a little bit about the four attribute values of position: relative,absolute,fixed,static. Take the above code as an example:

Relative

The relative value means that the element is offset relative to its own position. For example, in the above code, if setting B sets the relative value, for example, set the following CSS code:

The code is as follows:

# B {

Position:relative

Padding:5px

Top:5px

Left:5px

}

We can understand that if the relative property is not set, the position of B follows the normal document flow, and it should be somewhere. However, when the position of B is set to relative, it will be offset according to the value of top,right,bottom,left according to its proper position, and the meaning of "relative" of relative is also reflected in this.

Note: the offset of the relative is based on the upper-left side of the object's margin.

Absolute

This attribute is always misled. It is wrong to say that when the position property is set to absolute, it is always located according to the browser window. In fact, this is a feature of the fixed attribute.

When the position of B is set to absolute, who is the object to offset? There are two situations here:

When the parent object of B (or great-grandfather, as long as it is a parent object) parent also sets the position property, and the property value of position is absolute or relative, that is, if it is not the default value, B is positioned according to this parent.

When B does not have a parent object with a position attribute, then it will take body as the positioning object and locate it according to the browser's window, which is easier to understand.

Fixed

Fixed is a special absolute, that is, fixed always takes body as the positioning object and locates according to the browser's window.

Static

The default value of position. When the position property is not set, it will be arranged according to the normal document stream.

(3) Jquery mode

Prompt pop-up box is a common way, the most important task is to calculate the location of the pop-up box. The event source is obtained through the event object, and then you can use the offset () function to calculate the location of the event source relative to document:

The code is as follows:

Vartop=$ (event.target). Offset (). Top

Varleft=$ (event.target). Offset (). Left

Because it is relative to document, the location of the upper-left corner of the page, you need to place the pop-up layer on the first layer in the Body element, that is, the parent class is body. If included in other elements, you need to make sure that the position style of any parent class is set to relative. The calculated top and left are the location of the event source, where the display obscures the event source object. So you usually need to make some offsets by hand, such as top+20.

5. Hide div elements

There are two ways to hide elements in css: display:none or visibility:hidden. The difference between the two ways is that after setting the value of display, the element is completely hidden, the position occupied by the element is gone, and the following element is moved up. After setting the visibility, the position occupied by the element is still there, but it is not visible.

The child elements of 6.div are arranged horizontally and vertically

Control using the float property. Div is vertical by default, and its width is 100%. After setting float:left in CSS, it becomes horizontal. If you want to disconnect from the middle of the horizontal row and restore the latter to a vertical row, you need to use clear:both to modify it. Look at the following example:

The code is as follows:

Aaaaaaaaaaaaaa

Bbbbbbbbbbbbbb

The above two div are arranged horizontally.

This thing is very important, it clears the floats of the upper two layers, which means that the lower layers continue to be arranged vertically.

This layer is arranged vertically.

This layer is arranged vertically.

The above is just a simple application of the float attribute.

The float attribute is mainly used to control the flow of the element, that is, to move closer to the right or to the left. Here, take a look at the syntax of the float attribute:

The code is as follows:

Float:none | left | right

None: default value. The object does not float

Left: text flows to the right of the object

Right: text flows to the left of the object

To achieve some effect, we usually need to unfloat at some point so as not to affect other objects, which is achieved through the clear property described above:

The clear property has four values:

The code is as follows:

Clear:both | left | right | none

In a nutshell, the function of the clear property is to "clear" floats. If an element is set to clear:left;, it means that there is no floating element on the left side of the element; accordingly, clear:right; means that there is no floating element on the right side of the element; clear:both; means that there are no floating elements on either side of the element. Clear:none means that floating elements are allowed on both sides.

7. Set the font of Chinese characters in div

First take a look at the list of attributes that control the text in CSS:

The code is as follows:

Word-spacing: defines the spacing between words. Value: Normal |.

Letter-spacing: defines the spacing between each letter. Value: Normal |.

Text-decoration: defines the "decoration" style of text. Value range: None | underline | overline | line-through | blink.

Vertical-align: defines the vertical position of the element. Value: Baseline | sub | super | top | text-top | middle | bottom | text-bottom |.

Text-transform: converts text to other forms. Value: Capitalize | uppercase | lowercase | none.

Text-align: defines the text alignment. Value: Left | right | center | justify.

Text-indent: defines the indentation of the first line of the text. Value: |.

Line-height: defines the line height of the text. Value: Normal |.

We can see from the above that you can define text spacing, letter spacing, decoration, alignment, indentation, and line higher attributes of the text. For example, let's take a look:

The code is as follows:

We see that after the text attribute processing, there is more spacing between words, more line heights between lines, alignment becomes aligned at both ends, and the beginning of the paragraph is indented by two more squares.

Letter-spacing sets the word spacing to 5px, where 5px is a unit of length; text-align sets the alignment to be aligned at both ends; and indent sets the indent lattice to 4em. line height sets the line height to 17pt. From the above example, we can see that the text in the page can be easily typeset by using the text properties of CSS.

Line spacing depends on the size of the font, generally speaking, a small font size requires a larger line spacing to facilitate reading, if there is no line spacing setting for Chinese fonts on the web page, it is a disaster for readers to read large pieces of text, so appropriate setting of line-height is very necessary. In general, line-height should be 1. 5 to 2 times the font size in web design. In Word and other text editing software, 120% of the font is generally set as the default line spacing. The line-height setting in css is evenly divided and added to the top and bottom of each line, that is, if line-height is set to 20px, there is a 10px spacing between the top and bottom of each line.

8. Set the tooltip branch display of div

In html for links and pictures, we can add the title attribute to display some description text, in general, these text are displayed as one line, is there any way to make it display in a multi-line way? There are two solutions:

(1)。 Divide the title attribute into several lines, such as:

The code is as follows:

Building station learning

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.