Home >Web Front-end >CSS Tutorial >How to use CSS display: contents?
display: contents is a relatively unfamiliar property. Although display is basically the most common CSS property, the value of contents is rarely used. But it has been supported by Firefox since 2016.
This article will take a closer look at this interesting attribute value.
Basic usage
According to W3C’s definition of display: contents.
The element itself does not generate any boxes, but its children and pseudo-elements still generate boxes and text runs as normal. For the purposes of box generation and layout, the element must be treated as if it had been replaced in the element tree by its contents (including both its source-document children and its pseudo-elements, such as ::before and ::after pseudo-elements, which are generated before/after the element's children as normal) .
A simple translation means that the element itself with this attribute value set will not generate any boxes, but it will retain the normal display of its descendant elements.
Look at a simple example. There is a simple three-layer structure as follows:
<div class="container"> <div class="wrap"> <div class="inner"></div> </div> </div>
The simple CSS is as follows:
.container { width: 200px; height: 200px; background: #bbb; } .wrap { border: 2px solid red; padding: 20px; box-sizing: border-box; } .inner { border: 2px solid green; padding: 20px; box-sizing: border-box; }
The performance is as follows:
##This is very easy to understand, but If we add display: contents to the container of the middle layer, and look at the effect:<div class="container"> <div class="wrap" style="display: contents"> <div class="inner"></div> </div> </div>You can see that there is no border of the middle layer: 2px solid red With the red border, the entire .wrap div seems to not exist, but its child elements are rendered normally. The important point is that the element itself with display: contents set will not be rendered, but its child elements can be rendered normally. I have been thinking about what is a very suitable use point for this attribute. In summary, this attribute is suitable for some layout scenarios that act as wrappers. These elements themselves have no effect and can be ignored.
Acts as a semantic-less wrapping box
When I was writing React and Vue recently, I found that this attribute can play a very good role when writing JSX, and it is also very useful. In line with the positioning of this attribute itself. When we write React and RN, we often need to output a template.return ( <div class="wrap"> <h2>Title</h2> <div>...</div> </div> )We just want to output the content within the .wrap div, but due to framework requirements, the output JSX template must be included under a parent element, so as a last resort, we need to add a .wrap for wrapping, but this. wrap itself has no style. If the output elements are to be placed under other display: flex, display: grid containers, after adding a layer of meaningless .wrap, the entire layout needs to be readjusted, which is troublesome. One way is to use the container
return ( <div class="wrap" style="display: contents"> <h2>Title</h2> <div>...</div> </div> )In this way, it not only plays the role of wrapping, but in actual rendering, this div does not actually generate any box, killing two birds with one stone. And some flex layouts and grid layouts will not be affected. Codepen Demo -- display: contents | display: flex penetration effect
Make the code more semantic
Consider this very practical Scenario, now our pages are filled with a large number of clickable buttons, or text and other elements that trigger corresponding functions. However, semantically speaking, they should beThe above is the detailed content of How to use CSS display: contents?. For more information, please follow other related articles on the PHP Chinese website!