Article directory
1. Show and hide elements
In development, it is often necessary to use the display and hiding of elements ,
-
By default, there is nothing below the button;
-
After moving the mouse to the red button, a dialog layout is displayed;
There are three styles for controlling the display and hiding of elements:
- display
- visibility
- overflow
Two, display hidden objects
1. Display hidden object syntax description
set for label elements
display: none
The element can be hidden ;
If you want to display the object , set the element
display: block
can;
2. display display element code example
Set display: blockto display elements, and this style can also convert elements into block elements;
Code example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用 diaplay 显示 / 隐藏元素</title>
<style>
.one {
/* 显示元素 / 转为块元素 */
display: block;
width: 200px;
height: 200px;
background-color: pink;
}
.two {
width: 300px;
height: 300px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
</body>
</html>
display effect :
3. Display hidden element code example
Use display to hide the element, the element will be separated from the standard flow, and the following elements will be on top;
Code example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用 diaplay 显示 / 隐藏元素</title>
<style>
.one {
/* 隐藏元素 */
display: none;
width: 200px;
height: 200px;
background-color: pink;
}
.two {
width: 300px;
height: 300px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
</body>
</html>
display effect :
Enter the debug mode, you can see that the element is still in the interface, but it is hidden;
Three, visibility hidden objects
1. Visibility hidden object syntax description
The attribute value of visibility defaults to inherit , inherited from the parent element , and is generally visible by default; under normal circumstances, the parent element is set to be invisible, and the child element is also invisible;
visibility sets the attribute value visible, indicating that the element is visible;
visibility sets the attribute value hidden, indicating that the element is hidden;
2. Visibility display object code example
visibility displays the object, just set the visible attribute value for it, and the general object is also displayed by default;
Code example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用 visibility 显示 / 隐藏元素</title>
<style>
.one {
/* 显示元素 */
visibility: visible;
width: 200px;
height: 200px;
background-color: pink;
}
.two {
width: 300px;
height: 300px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
</body>
</html>
display effect :
3. Visibility hidden object code example
visibility hides the object, but the position is still preserved, and subsequent elements cannot cover their original position;
Code example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用 visibility 显示 / 隐藏元素</title>
<style>
.one {
/* 隐藏元素 */
visibility: hidden;
width: 200px;
height: 200px;
background-color: pink;
}
.two {
width: 300px;
height: 300px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
</body>
</html>
Results of the :
Four, overflow hidden objects
1. Syntax description of overflow hidden objects
overflow can only hide the code for the excess part;
The value that overflow can set:
- visible : The part of the child element beyond the parent container is still displayed;
- hidden : The part of the child element beyond the parent container is hidden;
- scroll : Regardless of whether the child element exceeds the parent container, a scroll bar is displayed;
- auto : If the child element exceeds the parent container, the scroll bar is displayed, and if the child element does not exceed the parent container, the scroll bar is not displayed;