css hide and show

In web design, hiding and showing elements is a very common requirement. In order to hide and show elements, we usually use the display property of CSS. This article will introduce the commonly used hiding and showing methods in CSS.

1. Display attribute in CSS

The display attribute is one of the most commonly used attributes in CSS. It can control the display or hiding of elements, and can also change the expression of elements. The display attribute has many values. Here we only introduce a few commonly used values.

1. display: none

display:none is the most commonly used method of hiding elements. It completely removes the element from the document flow and does not occupy any space. Even if you view the element's HTML code in a browser, you won't be able to see the hidden element. The advantage of using display:none is that the element can be hidden without changing the layout, and the element does not take up space.

For example, we can use the following CSS code to hide an element:

div {
  display: none;
}

2. display: block

display:block is most commonly used to display elements Methods. The block element will start on a new line and occupy the entire width of the parent element. It can set the width and height and can accommodate inline elements and text nodes by default.

For example, the following CSS code sets the div element to a block element:

div {
  display: block;
}

3. display: inline

display:inline is to make the element display inline , appearing as adjacent elements. It does not start a new line before or after the text, but shares a line with other elements. It sets the width and height of the element, but does not wrap it automatically.

For example, we can use the following CSS code to set the span element to an inline element:

span {
  display: inline;
}

4. display: inline-block

display:inline- Block allows elements to have some characteristics of inline (the element will not start a new line) and some characteristics of block (the width and height can be set). It is often used to achieve some layout effects, such as the effect of mixed graphics and text.

For example, we can use the following CSS code to set the div element to an inline-block element:

div {
  display: inline-block;
}

2. The visibility attribute in CSS

In addition to the display attribute, there is also There is a commonly used attribute that can be used to show and hide elements, and that is the visibility attribute. The visibility attribute is used to control the visibility of an element and can be set to two values: visible (default value, element is visible) and hidden (element is hidden).

1. visibility: visible

visibility: visible is the default value, which is the value that makes the element visible. This is very similar to the case of display:block or display:inline. However, elements with visibility: visible maintain their position in the document and are not affected by CSS layout like elements with display:block or display:inline. Even if an element is hidden, you can still use JavaScript or other techniques to get the element's position and size.

For example, the following CSS code sets the div element to a visible state:

div {
  visibility: visible;
}

2. visibility: hidden

visibility: hidden is the option to hide the element value. This has the same effect as display:none, but instead of removing the element from the document flow, it retains the element's space. Therefore, if an element is hidden, other elements will take its position, and events and animations triggered by the element will still work.

For example, the following CSS code sets the div element to an invisible state:

div {
  visibility: hidden;
}

3. The opacity attribute in CSS

In addition to using the display and visibility attributes to hide and hide elements In addition to display, you can also use the opacity attribute to adjust the transparency of an element.

1. opacity: 1 (opacity)

opacity: 1 is the default value of the element, which means that the element is completely opaque, that is, nothing can be seen through the element The following content.

For example, the following CSS code sets an opaque div element:

div {
  opacity: 1;
}

2. opacity: 0 (fully transparent)

opacity: 0 means the element Fully transparent, that is, the background is completely shown through the element. In practice, opacity: 0 is often used to hide elements and preserve the element's footprint.

For example, the following CSS code sets a fully transparent div element:

div {
  opacity: 0;
}

3. opacity: 0.5 (semi-transparent)

opacity: 0.5 means The element is translucent, which means that the background can show through the element, but the content of the element can still be seen.

For example, the following CSS code sets a translucent div element:

div {
  opacity: 0.5;
}

Summary

This article introduces the commonly used hiding and display methods in CSS, including display and visibility properties, and the opacity property. In actual development, we can choose different methods to hide and display elements according to specific needs. Hope this article can be helpful to you.

The above is the detailed content of css hide and show. For more information, please follow other related articles on the PHP Chinese website!