What are the values ​​of the css display attribute?

The values ​​of the display attribute are: 1. none, which can hide the element; 2. block, which can set the element as a block-level element; 3. inline, which can set the element as an inline element; 4. inline- block, you can set the element as an inline block element; 5. table, you can set the element as a block element-level table; 6. table-cell, you can set the element as a cell of the table; 7. table-row, you can set the element as a table cell. The elements are set to rows of the table; 8. flex, the object can be set to a flexible box.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

The display attribute specifies the type of box the element should generate.

The display attribute can control the formatting context of an element and its sub-elements. You should know when you first learn CSS that some elements are block-level elements and some are inline elements.

With the display attribute, you can switch between different states of the element. For example, normally an h1 element is a block-level element, but by toggling it, it can be displayed as an inline element.

Value of the display attribute

##table-column-groupSet the element as a table Grouping of one or more columns in (similar to )table-header-groupSet the element to the table Header (similar to ) table-footer-group Sets the element to the footer of the table (similar to )A new attribute value in CSS3, indicating that the object is set to a flexible box (the oldest version of the flexible box )A new attribute value in CSS3, indicating that the object is set to an inline element-level elastic box (the oldest version of the elastic box )The new property value in CSS3 means setting the object as a flexible box (a transitional version of the flexible box)The new attribute value in CSS3 means setting the object as an inline element-level elastic box (a transitional version of the elastic box)The new attribute value in CSS3 means setting the object as an elastic retractable box (the latest version of the retractable box) The new attribute value in CSS3 means setting the object as an inline element-level elastic box (the latest version of the elastic box)Determine whether to set the element as a block-level element or an inline element based on the contextInherit the value of the display attribute from the parent element

Value	Description
none	Hide element
block	Set the element as a block-level element
inline	Set the element as an inline element
list-item	Set the element as a list item
inline-block	Set the element as an inline block element
table	Set the element as a block element-level table (similar to <table>)<tr> <td>inline-table</td> <td> Set the element to an inline element-level table (similar to <code><table>) <tr> <td>table-caption</td> <td> Set the element to the title of the table (similar to <code><caption></caption>)
table-cell	Set the element to the cell of the table (similar to <td> and <code><th>)</th>
table-row	Set the element to the row of the table (similar to <tr>)</tr> <tr>##table -row-group<td></td> Set the element to the content part of the table (similar to <td> </td> </tr> <tbody> <code>)##table-column
Set the element as a column of the table (similar to
)
##box
	inline-box
	flexbox
	inline-flexbox
	flex
	inline-flex
	run-in
	inherit
	Telescopic box (flexible box) is a new layout mode in CSS3. The purpose of introducing the flexible box is to provide a more effective way to arrange, align and allocate space for elements on the page. When This layout method ensures that elements are appropriately sized and positioned when the page needs to adapt to different screen sizes and device types. The following uses several commonly used attribute values ​​to introduce the use of the following display attributes: <span style="font-size: 16px;"><strong>display: none</strong></span> display attribute value none can be used to hide elements, which is similar to visibility: hidden;. The difference is that display: none; When hiding an element, it also hides the position occupied by the element. display: none;It is usually used in combination with JavaScript to hide or show an element. Here is an example to demonstrate: <!DOCTYPE html> <html> <head> <style> div { width: 350px; height: 100px; background-color: #AAA; } </style> </head> <body> <div id="box"> </div> <button onclick="change_box(this)">隐藏</button> <script> function change_box(obj){ var box = document.getElementById(&#39;box&#39;); if(box.style.display == &#39;none&#39;){ box.style.display = ""; obj.innerHTML = "隐藏"; }else{ box.style.display = "none"; obj.innerHTML = "显示"; } } </script> </body> </html> Run the above code and click "Show" on the page ” or “Hide” button to display or hide the specified elements on the page, as shown in the following figure: <span style="font-size: 16px;">##display : block<strong></strong></span> The attribute value block of the display attribute can force the element to be a block-level element. The sample code is as follows: <!DOCTYPE html> <html> <head> <style> a{ display: block; width: 150px; height: 50px; background-color: #ACC; line-height: 50px; text-align: center; text-decoration: none; } </style> </head> <body> <a href="">这是一个链接</a> </body> </html> <strong>display: inline<span style="font-size: 16px;"></span></strong> The attribute value inline of the display attribute can force the element to be an inline element, so that the element has an inline element Features, such as being able to share a row with other inline elements, etc. The sample code is as follows: <!DOCTYPE html> <html> <head> <style> div { width: 50px; height: 50px; background-color: #ACC; border: 1px solid black; } .inline { display: inline; } </style> </head> <body> <div></div> <div></div> <div class="inline">display: inline;</div> <div class="inline">display: inline;</div> </body> </html> <span style="font-size: 16px;">display: inline-block<strong> </strong></span> The attribute value of the display attribute inline-block can force the element to be converted into an inline block element. Inline-block has both the feature of block being able to set the width and height and the feature of inline not occupying an exclusive line. , the sample code is as follows: <!DOCTYPE html> <html> <head> <style> div { width: 130px; height: 50px; background-color: #ACC; border: 1px solid black; } .inline-block { display: inline-block; text-align: center; margin-top: 10px; } </style> </head> <body> <div></div> <div></div> <div class="inline-block">display: inline-block;</div> <div class="inline-block">display: inline-block;</div> </body> </html> (Learning video sharing: web front-end)

The above is the detailed content of What are the values ​​of the css display attribute?. For more information, please follow other related articles on the PHP Chinese website!