CSS Display and Visibility
In the usual development process, we always encounter some text that is displayed or hidden in specific scenarios to achieve the effect we want. Both the display and visibility syntax in CSS can hide and display html elements. They may look the same, but they still have certain differences.
display definition and usage
The display attribute specifies the type of box that the element should generate.
Description
This attribute is used to define the type of display box generated by the element when creating the layout. For document types such as HTML, using display carelessly can be dangerous, as it may violate the display hierarchy already defined in HTML. For XML, since XML doesn't have this kind of hierarchy built in, all display is absolutely necessary.
Possible values
Description
table-row This element will be displayed as a table row (similar to <tr>).
table-column-group This element will be displayed as a group of one or more columns (similar to <colgroup>).
table-column This element will be displayed as a cell column (similar to <col>)
table-cell This element will be displayed as a table cell (similar to <td> and <th>)
table-caption This element will be displayed as a table title (similar to <caption>)
inherit Specifies that the value of the display attribute should be inherited from the parent element.
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例</title>
<style type="text/css">
.inline{display:inline; width:100px; height:100px; padding:5px; background-color:#F00;}
.block{display:block; width:100px; height:100px; padding:5px;background-color:#0f0;}
.inline-block{display:inline-block; width:100px;height:100px; padding:5px;background-color:#00f;}
</style>
<body>
<span class="inline">
inline
</span>inline
<span class="block">
block
</span> block
<span class="inline-block">
inline-block
</span>inline-block
</body>
</html>visibility definition and usage
The visibility attribute specifies whether the element is visible.
Tip: Even invisible elements take up space on the page. Use the "display" attribute to create invisible elements that do not take up page space.
Description
This attribute specifies whether to display the element box generated by an element. This means that the element still occupies its original space, but can be completely invisible. The value collapse is used in tables to remove columns or rows from the table layout.
Possible values
Value Description
visible Default value. The element is visible.
hidden The element is invisible.
collapse When used in a table element, this value deletes a row or column, but it does not affect the layout of the table. The space occupied by rows or columns is made available for other content. If this value is used on other elements, it will be rendered as "hidden".
inherit Specifies that the value of the visibility attribute should be inherited from the parent element.
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例</title>
<style type="text/css">
.visibilityHidden { visibility: hidden; }
.visibilityVisible { visibility: visible; }
</style>
<body>
<!-- 注意第一个图片虽然隐藏了，但是位置还是被占据的 -->
<p>
<a href="#" class="visibilityHidden">
<img src="http://img.educity.cn/article_image/2013082620/321090200502.jpg" />
</a>
</p>
<p>
<a href="#" class="visibilityHidden">
<img class="visibilityVisible" src="http://img.educity.cn/article_image/2013082620/321090200502.jpg" />
</a>
</p>
</body>
</html>CSS Display - Block and Inline Elements
The block element is an element that takes up the full width and is preceded and followed by line breaks.
Examples of block elements:
<h1>
<p>
<div>
Inline elements Only necessary width is required, no line breaks are forced.
Examples of inline elements:
<span>
<a>
How to change the display of an element
You can change inline elements and block elements, and vice versa, to make the page look put together in a specific way and still adhere to web standards.
The following example displays list items as inline elements:
li {display:inline;}
The following example uses the span element as a block element:
span {display:block;}
Note: Changing the display type of an element depends on how the element is displayed and what kind of element it is. For example: an inline element set to display:block is not allowed to have nested block elements inside it.
