1.width:0;/height:0;
The disadvantage of this method is that the text cannot be hidden. If you need to hide the text, then:
2. For textfont-size:0;
3. For textcolor:transparent;
4. The opacity:0;
principle is to set the element to be transparent. The opacity attribute means to set the transparency of an element. It is not designed to change the bounding box of an element. This person sets opacity to 0 only to hide the element visually. While the element itself still occupies its own place and affects the layout of the web page, it will also respond to user interaction.
5. By positioning, move the element out of the screen. Suppose there is an element that you want to interact with, but you don't want it to affect the layout of your web page. There is no suitable attribute to handle this situation (opacity and visibility affect the layout and mdisplay does not affect the layout but cannot directly interact). In this case, only consider moving the element out of the visible area. This method will not affect the layout, and it is possible to keep the elements operable.
div{
position:absolute;
left:-999999px;
}
6. By text-indentachieving the text hiding effect, indenting through negative values, beyond the visible area
div {
text-indent:-999999px;
}
Applicable to: Add a logo to the page, and cover the text you want to be searched by search engines under the logo, you can use this method.
7. By z-indexhiding.
div{
z-index:-9999;
}
8. Pass overflowto hide part.
<style>
p{
width:16ch;
overflow:hidden;
white-space:pre;
text-overflow:ellipsis;
}
</style>
<p>这是一段文字这是一段文字这是一段文字这是一段文字</p>
Write picture description here
The part beyond 7 Chinese characters will be hidden!
9. By visibalitysetting the element to be invisible, like the opacity property, the hidden element will still work on our web page layout. The only difference from opacity is that it does not respond to any user interaction. In addition, the element will be hidden in the screen reader.
Note that if the visibility of an element is set to hidden and you want to display one of its descendants at the same time, you only need to explicitly set the visibility of that element to visible.
Visibality hides the box and takes up position.
div{
visibality:hidden;
}
10. By displaycompletely hiding the elements, and not occupying positions. The display attribute actually hides the element according to the meaning of the word. Setting the display property to none ensures that the element is invisible and even the box model is not generated. With this attribute, the hidden element does not occupy any space. Not only that, once the display is set to none, any direct user interaction operations on the element cannot take effect. In addition, the screen reader software will not read the content of the element. The effect produced in this way is like the element does not exist at all.
任何这个元素的子孙元素也会被同时隐藏。为这个属性添加过度动画是无效的，他的任何不同状态值之间的切换总是会立即生效。
不过请注意，通过DOM依然可以访问到这个元素。因此你可以通过DOM来操作它。
div{
display:none;
}
11. max-widthOr max-heightset to 0
12. Move the element out of the screen through transformthe translatesame principle as the left of position;
div{
transform:translate(-99999px);
}
13. Set the zoom of the element scaleto 0;
div{
transform:scale(0);
}
14. By skewletting elements overlap (spatial imagination, rotation), the principle is similarwidth:0;
div{
transform:skew(90deg);
}
15. Set marginto a negative value
div{
margin:-99999px;
}
16. Cut the elements:
div{
-webkit-clip-path:polygon(0px,0px,0px,0px,0px,0px,0px,0px);
}
type=”hidden”Form element- Both width and height are explicitly set to 0
- An ancestor element is hidden, the element will not be displayed on the page
This article is reprinted by other bloggers, if there is any infringement, please contact to delete the
source of reprint: https://www.jianshu.com/p/af5e4e9a4f50