In page layout, we often use knowledge points that are not visible, such as secondary menus, web page title logos, and so on. Today I will summarize the commonly used element hiding methods
<div class="w">
12345789
</div>
.w{
width: 100px;
height: 100px;
background-color: pink;
line-height: 100px;
text-align: center;
}
Opacity
.w{
opacity: 0; }
Note that although it is not visible, it still exists
Change rgba
.w{
background-color: rgba(255, 255, 255, 0); }
Only change the background transparency box still exists
display: none;
.w{
display: none; }
display: none; will make the box disappear and empty the position
Positioning
.w{
position: absolute;
left: -1000000px;
top: -1000000px;}
Directly throw the box out of the visible area
visibility: hidden;
.w{
visibility: hidden; }
Make the element invisible but the box still exists like opacity
Web page title logo text
.w{
text-indent: -9999px;
overflow: hidden; }
or
.w{
font-size: 0; }
The above methods can make the title logo text invisible to users, only for search engines