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
| and | )
table-caption This element will be displayed as a table title (similar to inherit Specifies that the value of the display attribute should be inherited from the parent element.
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 ValueDescription 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:
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: Inline elements Only necessary width is required, no line breaks are forced. Examples of inline elements:
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.
||
上海银监局召集辖内机构高层开会，发出严控房地产贷款风险的警示。 据新华社电住建部通报杭州、深圳楼市散布谣言案例，要求各地依法严肃查处散布谣言扰乱房地产市场秩序的违法违规行为。 香港市场成全球募资王 混改试点望启动
The courseware is not available for download at the moment. The staff is currently organizing it. Please pay more attention to this course in the future~
Students who have watched this course are also learning
|
|---|
