Common display properties Display and visible properties Visibility in CSS
The display property sets how an element should be displayed, and the visibility property specifies whether an element should be visible or hidden.
hidden element - display:none or visibility:hidden
An element can be hidden by setting the display property to "none", or the visibility property to "hidden". but please note
Note that the two methods produce different results.
visibility:hidden can hide an element, but the hidden element still needs to occupy the same space as before it was not hidden. That is to say,
Although the element is hidden, it still affects the layout.
display:none can hide an element, and the hidden element will not take up any space. In other words, the element is not only hidden, but the space originally occupied by the element will also disappear from the page layout.
CSS Display - block and inline elements
A block element is an element that takes up the full width and has line breaks before and after it.
display displays the display type of the setting element:
- inline
- block block
- inline-block inline block
- none do not display
Elements set to none and their descendants will not be displayed on the page, nor will they take up document flow
visibility visible attribute:
- visible visible
- hidden
Features: The element still occupies the original position (equivalent to the element becoming transparent), and cannot be selected, but if the sub-element is set with visibility:visible, the sub-element is still visible
opacity opacity:
- Value between 0 and 1
- 0 is transparent 1 is opaque
- When the parent element is set to transparent, the child element will also have the same transparency, even if the child element has a separate transparency
- Set to transparent can still be selected
color set transparency
rgba(red,green,blue,alpha)
#RRGGBBAA
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* span{ display: block;} */
div{display: inline-block; width: 100px ;height: 50px;background-color: #CCAAAA80;}
/* .div2{visibility: hidden;} */
.div2{opacity: 0.5;}
img{ display: block;}
</style>
</head>
<body>
<!-- <span>行内标签</span> -->
<div class="div1">块标签1</div><div class="div2">块标签2<span style="opacity: .5">111</span></div><div class="div3">块标签3</div>
</body>
</html>Hurry up, like, collect and run it!