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
##Value
Description
none This element will not be displayed.
block This element will be displayed as a block-level element, with line breaks before and after this element.
inline Default. This element will be displayed as an inline element with no line breaks before or after the element.
inline-block Inline block element. (New value in CSS2.1)
list-item This element will be displayed as a list.
run-in This element will be displayed as a block-level element or an inline element depending on the context.
compact There is a value compact in CSS, but it has been removed from CSS2.1 due to lack of widespread support.
marker There is a value marker in CSS, but it has been removed from CSS2.1 due to lack of widespread support.
table This element will be displayed as a block-level table (similar to <table>), with line breaks before and after the table.
inline-table This element will be displayed as an inline table (similar to <table>), with no line breaks before and after the table.
table-row-group This element will be displayed as a group of one or more rows (similar to <tbody>).
table-header-group This element will be displayed as a group of one or more rows (similar to <thead>).
table-footer-group This element will be displayed as a group of one or more rows (similar to <tfoot>).
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.
Next Section