Jiangcheng Cheerful Pea: Personal homepage
Personal column :《VUE》《javaScript》
Personal website : “Jiangcheng Cheerful Pea”
The ideal of life is for an ideal life!
Table of Contents
? Column introduction
Article introduction
I. Introduction
2. Implementation method
display:none
visibility:hidden
opacity:0
Set the height and width properties to 0
position:absolute
clip-path
summary
3. Difference
?Write at the end
? Column Introduction
Welcome to the front-end entry journey! This column is created for readers who are interested in web development and have just started learning front-end. Whether you are a beginner or a developer with some basic knowledge, we will provide you with a systematic and friendly learning platform here. We update it in the form of questions and answers to present you with selected front-end knowledge points and best practices. By explaining concepts in simple and easy-to-understand terms and providing practical examples and exercises, you can gradually build a solid foundation. Whether it is HTML, CSS, JavaScript or the latest front-end frameworks and tools, we will provide you with rich content and practical skills to help you better understand and apply various technologies in front-end development.
At the same time, we will also pay attention to the latest front-end trends and developments. As Web technology continues to evolve, front-end development is also constantly innovating. We will introduce the latest front-end frameworks, tools and technologies in a timely manner so that you can stay at the forefront and keep pace with the times. By mastering the latest front-end technologies, you will be able to become more competitive in the highly competitive field of web development.
Article introduction
1. Foreword
In ordinary style layout, we often encounter scenes where a certain module is hidden
There are many ways to hide elements through
css, and they seem to achieve the same effect.But in fact, each method has slight differences, and these differences determine which method is used in certain situations.
2. Implementation method
The methods of hiding elements through css are as follows:
-
display:none visibility:hidden opacity:0 Set the height and width model properties to 0 position:absolute clip-path
display:none
Setting the element’s display to none is the most commonly used method of hiding elements.
.hide {
display:none;
}
After setting the element to display:none, the element will completely disappear from the page
The space occupied by the element itself will be occupied by other elements, which means it will cause the browser to reflow and redraw.
After disappearing, the events bound to itself will not be triggered and there will be no transition effect.
Features: The element is invisible, does not occupy space, and cannot respond to click events.
visibility:hidden
Setting the visibility of an element to hidden is also a common method of hiding elements.
If you just hide the element from the page, the DOM results will still exist, but it will be in an invisible state at the time. Reflow will not be triggered, but redrawing will be triggered.
.hidden{
visibility:hidden
}
The effect given to people is hidden, so his own events will not be triggered.
Features: The element is invisible, takes up page space, and cannot respond to click events.
opacity:0
The opacity attribute represents the transparency of the element. After setting the transparency of the element to 0, the element is also hidden in the eyes of our users.
It will not cause reflow, but will also cause redrawing under normal circumstances.
If you use animation animation to make changes to opacity (animation will trigger GPU acceleration by default), it will only trigger composite at the GPU level and will not trigger redrawing.
.transparent {
opacity:0;
}
Since it still exists on the page, its own events can still be triggered, but the elements blocked by it cannot trigger its events.
It should be noted that its child elements cannot be set to opacity to achieve the display effect.
Features: Change element transparency, make elements invisible, occupy page space, and can respond to click events
Set the height and width attributes to 0
Affect the element’s margin, border, padding, height and width The attributes of the box model are set to 0. If there are child elements or content within the element, its overflow:hidden should also be set to hide its child elements.
.hiddenBox {
margin:0;
border:0;
padding:0;
height:0;
width:0;
overflow:hidden;
}
Features: The element is invisible, does not occupy page space, and cannot respond to click events.
position:absolute
Move an element out of the visible area
.hide {
position: absolute;
top: -9999px;
left: -9999px;
}
Features: Elements are invisible and do not affect page layout
clip-path
by cropping
.hide {
clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);
}
Features: The element is invisible, takes up page space, and cannot respond to click events.
Summary
The most commonly used ones are display:none and visibility:hidden. Other methods can only be considered as strange tricks. Their real purpose is not to hide elements, so they are not It is recommended to use them
Three. Differences
Regarding the differences between display: none, visibility: hidden, and opacity: 0, the following table shows:
| display: none | visibility: hidden | opacity: 0 | |
|---|---|---|---|
| Does not exist in the page | Exists | Exists | |
| Reflow | Yes | No | No |
| Redraw | Yes | Yes | Not necessarily |
| Self-binding events | not triggered | Not triggered | Triggerable |
| transition | Not supported | Supported | Support |
| Sub elements can be restored | Cannot | Can | Cannot |
| Occluded elements can trigger events | Can | Can | Cannot |
? Write at the end
Please feel free to give me some advice, comment below or send me a private message. Thank you very much.
? I think a certain part of my design is too cumbersome. Is there a simpler or higher-quality packaging method?
? Think some of my code is too old and can provide new API or the latest syntax?
? Don’t understand some of the content in the article
?Answer some questions in my article
? Think that some interactions and functions need to be optimized, and find bugs
? Want to add new features and have better suggestions for the overall design and appearance?
Finally, thank you for your patience in watching. Now that we are here, click Like and go!
