disable event bubbling, etc.)

As the most commonly used layout element, DIV plays a vital role in Web development. Here is a summary of the various operations I encountered when using DIV.
1.div displays scroll bar <br />This is a very common task, and the scroll bar is basically implemented through CSS.
(1) Vertical scroll bar setting Whether to display the scroll bar is mainly to set the following properties in CSS:

Copy code

The code is as follows:

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

The meaning of the parameters:
visible: Do not clip content and do not add scroll bars. If this default is explicitly stated, the object will be clipped to the size of the window or frame containing the object. And the clip property setting will become invalid.
auto: This is the default value for the body object and textarea. Clip content and add scrollbars when needed
Hidden: Do 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 will appear. So we want to display a vertical scroll bar when needed, which can be achieved like this:

Copy code

The code is as follows:

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

Copy code

The code is as follows:

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

(2) Horizontal scroll bar If you only want to display a horizontal scroll bar, you usually have to use the setting of disabling line breaks, for example:

Copy code

The code is as follows:

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

(3) The appearance of the scroll bar in IE mainly uses various color attributes:

Copy code

The code is as follows:

scrollbar-3dlight-color:color; Set or retrieve the scroll bar light border color;
scrollbar-highlight-color:color; Set or retrieve the bright edge color of the scrollbar 3D interface;
scrollbar-face-color:color; Sets or retrieves the color of the scrollbar 3D surface;
scrollbar-arrow-color:color; Set or retrieve the color of the scroll bar direction arrow; when the scroll bar appears but is unavailable, this property is invalid;
scrollbar-shadow-color:color; Set or retrieve the dark edge color of the scrollbar 3D interface;
scrollbar-darkshadow-color:color; Set or retrieve the scroll bar dark border color;
scrollbar-base-color:color; Sets or retrieves the scroll bar base color. Other interface colors will automatically adjust accordingly.
scrollbar-track-color:color; Set or retrieve the color of the scroll bar's drag area

In Chrome, it is basically set using webkit-specific properties:

Copy code

The code is as follows:

::-webkit-scrollbar-track-piece{
background-color:#fff;/*background color of the scroll bar*/
-webkit-border-radius:0;/*Scroll bar rounded corner width*/
}
::-webkit-scrollbar{
width:8px;/*Scroll bar width*/
height:8px;/*Scroll bar height*/
}
::-webkit-scrollbar-thumb:vertical{/*Vertical scroll bar style*/
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 the scroll bar*/
height:50px;
background-color:#9f9f9f;
-webkit-border-radius:4px;
}
::-webkit-scrollbar-thumb:horizontal{/*Horizontal scroll bar style*/
width:5px;
background-color:#CCCCCC;
-webkit-border-radius:6px;
}

2. Disable div event bubbling <br />This basically uses the standard event.stopPropagation() method to prevent event bubbling, except for IE:

Copy code

The code is as follows:

functionBigDiv(event){
if (event.stopPropagation) {
event.stopPropagation(); //Support stopPropagation in browsers based on Firefox kernel
}else{
event.cancelBubble=true; //Writing based on IE
}
//othercodes...
}

3. Prevent div from executing default behavior <br />This is actually a common problem. For elements with default behaviors, such as the submit form behavior of the submit button, the hyperlink behavior of the <a> element, etc., if we apply events to these elements, we also often want to cancel their default behaviors. This is achieved by calling event.preventDefault() in the event callback function.
4. Dynamically calculate the position of div (such as the common calculation of the position of div pop-up layer)
(1) DOM attribute method
offsetTop: The distance from the current object to the top of its parent layer. It cannot be assigned a value. To set the distance from the object to the top of the parent object, use the style.top property.
offsetLeft: The distance from the current object to the left side of its parent layer. It cannot be assigned a value. To set the distance from the object to the left of the parent object, use the style.left property.
Here we should pay attention to the difference between offsetTop and style.top (the same is true for offsetLeft and style.left):
•OffsetTop returns a number, while style.top returns a string, which contains the unit px in addition to the number. Usually, parseInt is needed to convert it into a numeric value.
• offsetTop is read-only, while style.top is read-write.
•If no top style is specified for an HTML element, style.top returns an empty string.
Note: In Firefox, when assigning a value to style.top, it must also be in the form of a string (with px).
(2) The influence of position attribute on position in CSS
The default property value of position is static. But the most critical attribute values in position are relative and absolute.
Often we will combine the absolute attribute with left and top to create a related "floating layer" effect. However, sometimes we need a floating effect for a container instead of a window. At this time, calculating the height and width is not only troublesome, but also almost impossible to achieve the perfect effect. In fact, all you need to do is set the style attribute position of the previous level to relative. In other words, the effect of the position attribute value is directly affected by the position attribute value in its container style. For example, the following nested structure AB

Copy code

The code is as follows:

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

When A's position is relative, B's position is absolute. At this time, left:0 and top:0 are no longer targeted at the window document, but at the div with id A. But if you set padding="50px" in A, other elements in A that do not set position to absolute will change with the padding value of A, but B will not change because its position is relative to the parent level.
Here I will briefly talk about the four attribute values of position: relative, absolute, fixed, and static. Let’s take the above code as an example:
relative
A relative value means that the element is offset relative to its own position. For example, in the above code, if B is set to a relative value, such as setting the following CSS code:

Copy code

The code is as follows:

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

We can understand it this way: if the relative attribute is not set, B's position should be at a certain position according to the normal document flow. But when the position of B is set to relative, it will be offset according to the values of top, right, bottom, and left according to where it should be. The "relative" meaning of relative is reflected here.
Note: The relative offset is based on the upper left side of the object's margin .
absolute
This attribute is always misleading. It is wrong to say that when the position attribute is set to absolute, it is always positioned according to the browser window. In fact, this is the characteristic of the fixed attribute.
When B's position is set to absolute, who is the object for the offset? There are two situations here:
•When B's parent object (or great-grandfather, as long as it is a parent object) parent also sets the position attribute, and the position attribute value is absolute or relative, that is, it is not the default value, then B is positioned according to this parent.
•When B does not have a parent object with a position attribute, then the body will be used as the positioning object and positioned according to the browser window. This is relatively easy to understand.
fixed
fixed is a special type of absolute, which means that fixed always takes body as the positioning object and is positioned according to the browser window.
static
The default value of position, when the position attribute is not set, is to arrange the elements according to the normal document flow.
(3) The Jquery prompt pop-up box is a common method. The most important thing about this task is to calculate the position of the pop-up box. The event source is obtained through the event object, and then the offset() function can be used to calculate the position of the event source relative to the document:

Copy code

The code is as follows:

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

Because it is relative to the document, that is, the upper left corner of the page, the pop-up layer needs to be placed in the first layer of the Body element, that is, the parent class is body. If it is contained 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 positions of the event source. Displaying at this position will cover the event source object. So usually you need to do some manual offset, such as top+20.
5. Hide div element
There are two ways to hide elements in CSS: display:none or visibility:hidden. The difference between the two methods is that after setting the display value, the element is completely hidden, the space occupied by the element disappears, and the element below moves up. After setting visibility, the position occupied by the element is still there, but it is invisible.
6. The horizontal and vertical arrangements of div's child elements are controlled using the float attribute. By default, div is arranged vertically and has a width of 100%. After setting float:left in CSS, it becomes horizontal. If you want to break the horizontal row in the middle and restore the rest to vertical row, you need to use the clear:both modification. Take a look at the following example:

Copy code

The code is as follows:

<div>
<divstyle="float:left">aaaaaaaaaaaaaaa</div>
<divstyle="float:left">bbbbbbbbbbbbbb</div>
The above two divs are arranged horizontally.
<divstyle="clear:both"></div>This thing is very important. It clears the float of the upper two layers, which means that the layers below continue to be arranged vertically.
<div>This layer is arranged vertically</div>
<div>This layer is arranged vertically</div>
</div>

The above is just a simple application of the float property.
The float attribute is mainly used to control the flow direction of the element, that is, whether to move to the right or to the left. Here is the syntax of the float property:

Copy code

The code is as follows:

float:none|left|right
none: The default value. Objects do not float
left: text flows to the right of the object
right: text flows to the left of the object

In order to achieve certain effects, we usually need to cancel the floating at some point to avoid affecting other objects. This is achieved through the clear property introduced above:
The clear property has four values:

Copy code

The code is as follows:

clear:both|left|right|none;

Simply put, the function of the clear attribute is to "clear" the float. If clear:left; is set for an element, it means that there is no floating element on the left side of the element; correspondingly, 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 both sides of the element. clear:none means floating elements are allowed on both sides.
7. Set the font of the text in div <br />First look at the list of attributes that control text in CSS:

Copy code

The code is as follows:

We can see from the above that we can define text properties such as text spacing, letter spacing, decoration, alignment, indentation, and line height here. Let’s take an example:

Copy code

The code is as follows:

<pstyle="letter-spacing:5px;text-align:justify;text-indent:4em;line-height：17pt">We can see that after the text attributes are processed, there is more spacing between words, more line height between lines, the alignment becomes justified, and the beginning of the paragraph is indented by two more spaces. </p>

letter-spacing sets the letter spacing to 5px, where 5px is a unit of length; text-align sets the alignment to justify; indent sets the indent to 4em; and line-height sets the line height to 17pt. From the above examples, we can see that using CSS text attributes can easily typeset the text on the page.
Line spacing depends on the font size. Generally speaking, smaller fonts require larger line spacing for easier reading. If there is no line spacing setting for Chinese fonts on a web page, it will be a disaster for readers who are reading long paragraphs of text, so it is very necessary to set the line-height appropriately. Generally speaking, 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 to say, if the line-height is set to 20px, then there will be a 10px space above and below each line of text.
8. Set the div’s tooltip to display in separate lines <br />In HTML, for links and pictures, we can add a title attribute to display some explanatory text. Generally, these texts are displayed in one line, so is there any way to display them in multiple lines? There are two solutions:
(1) Write the title attribute in several lines, for example:

Copy code

The code is as follows:

<ahref=#"title="Explanation 1Explanation 2Explanation 3">Website Building</a>

(2) The first line is not intuitive enough. We can also add 
 (& is half-width) or  where the line needs to be broken to achieve:

Copy code

The code is as follows:

<ahref=#"title="Explanation 1
Explanation 2
Explanation 3">Website Building</a>
<ahref=#"title="Explanation 1Explanation 2Explanation 3">Website Building</a>

9. Use the middle mouse button to control the horizontal scroll bar <br />In Chrome and FireFox, the middle mouse button is generally used to control the vertical scroll bar. If your DIV only has a horizontal control bar, the middle mouse button will not scroll by default. In this case, you need to implement it yourself.
First, hook up the mouse wheel event:

Copy code

The code is as follows:

//MousewheeleventforNonFireFox
element.onmousewheel=fireElementScrolled;
//MousewheeleventforFireFox
element.addEventListener('DOMMouseScroll',fireElementScrolled,false);

The special thing about FireFox here is that it needs to be hooked up using addEventListener.
Then, implement the fireElementScrolled method:

Copy code

The code is as follows:

fireElementScrolled = function (event) {
varrolled=0;
if (event.wheelDelta) {
rolled=event.wheelDelta;
}
else{
//Firefox: Need to process it
rolled=-event.detail*30;
}
varhtmlElement=document.getElementById('test');
htmlElement.scrollLeft=htmlElement.scrollLeft-rolled;
event.preventDefault();
returnfalse;
};

The principle is very simple, which is to get the scrolling distance of the scroll wheel, and then assign a value to the scrollLeft attribute of the div element.
10. Centering child elements
(1) Horizontal Centering It is easy to center ordinary text and images. Just set the CSS style of the parent container to include text-align:center;.
When the child element is a DIV or other element, the situation is a little more complicated. Take the div as an example. If there is only one child div, centering can be achieved by setting the CSS style of the child element to include margin:0auto;. For example, the following example:

Copy code

The code is as follows:

<divid="a" style="width:400px;height:300px;border:1pxsolidgreen;">
<divid="b"style="margin:0auto;width:200px;border:1pxsolidblue;">A simple sub-DIV centering problem</div>
</div>

If there are multiple child elements, I usually add an extra layer of div to achieve it, see the example:

Copy code

The code is as follows:

<divstyle="width:400px;height:300px;border:1pxsolidred;">
<divstyle="margin:0auto;position:relative;left:50%;float:left;">
<divstyle="position:relative;left:-50%;float:left">
<divstyle="border:1pxsolidblue;text-align:center;">1</div>
<divstyle="border:1pxsolidblue;text-align:center;">2</div>
<divstyle="border:1pxsolidblue;text-align:center;">3</div>
<divstyle="border:1pxsolidblue;float:left;">4</div>
<divstyle="border:1pxsolidblue;float:left;">5</div>
<divstyle="border:1pxsolidblue;float:left;">6</div>
</div>
</div>
</div>

(2) Vertical centering Vertical centering is a little more troublesome. There is a very simple method that can achieve both horizontal and vertical centering at the same time. First, write position:relative to the parent element. This is done so that when the child element is marked with position:absolute, it will not be positioned outside. Next, write the height and width of the child element. Some browsers will have unexpected misalignment when parsing without these two values. Then comes the core of the whole method, which is to give the child element top: 50%; left: 50% and margin-top: the negative number of half the height value; margin-left: the negative number of half the weight value. Of course, the width and height of the parent element must also be written first. See the example:

Copy code

The code is as follows:

<divstyle="width:600px;height:300px;position:absolute;top:50%;left:50%;margin-top:-150px;margin-left:-300px;border:1pxsolidred;">Centering method</div>

<<: Example code for implementing a simple search engine with MySQL

>>: Detailed process of installing logstash in Docker

How to change the mysql password on the Xampp server (with pictures)

DIV common tasks (Part 1) — General tasks (show scrollbars/hide divs/disable event bubbling, etc.)

How to change the mysql password on the Xampp server (with pictures)

Detailed explanation of the service problem reported by Ubuntu 20.04 using Xshell through SSH connection

Summary of common docker commands

Detailed explanation of Vue's commonly used built-in instructions

Example code for implementing ellipse trajectory rotation using CSS3

CSS screen size adaptive implementation example

Detailed graphic explanation of sqlmap injection

Vue two fields joint verification to achieve the password modification function

JavaScript canvas text clock

Use of Linux chkconfig command

Recommend

How to encapsulate timer components in Vue3

Solve the problem of importing Web projects into Idea and publishing them to Tomcat

Vue implements the magnifying glass effect of tab switching

20 CSS coding tips to make you more efficient (sorted)

MySQL 5.7.17 latest installation tutorial with pictures and text

What is the base tag and what does it do?

Implementation of static website layout in docker container

Detailed explanation of how to use the mysql backup script mysqldump

MySQL 5.5.56 version (binary package installation) custom installation path step record

Detailed tutorial on MySql installation and uninstallation

Angular Cookie read and write operation code

Calendar effect based on jQuery

Detailed explanation of the use of Docker commit

MySQL index failure principle

How to implement mobile web page size adaptation