display:contents

简介: display:contents

多少人以友谊的名义,爱着一个人。——电影《One Day》

MDNhttps://developer.mozilla.org/zh-CN/docs/Web/CSS/display-box

首先是一段代码:

<!DOCTYPE html>
<head>
    <title>display</title>
    <style>
        .outer {
            border: 2px solid red;
            width: 300px;
        }
        .outer>div {
            border: 1px solid green;
        }
</style>
</head>
<body>
    <div class="outer">
        <div>Inner div.</div>
    </div>
</body>


渲染效果为:

当我们给外部的outer添加一个display:contents;

<!DOCTYPE html>
<head>
    <title>display</title>
    <style>
        .outer {
            border: 2px solid red;
            width: 300px;
            display: contents;
        }
        .outer>div {
            border: 1px solid green;
        }
</style>
</head>
<body>
    <div class="outer">
        <div>Inner div.</div>
    </div>
</body>

可以看到外部的元素消失,只保留了子元素

目录
打赏
0
0
1
0
29
分享
相关文章
|
10月前
|
android.view.InflateException: Binary XML file line #0: Attempt to invoke virtual
android.view.InflateException: Binary XML file line #0: Attempt to invoke virtual
62 0
成功解决OSError: cannot open resource self.font = core.getfont(font, size, index, encoding, layout_engin
成功解决OSError: cannot open resource self.font = core.getfont(font, size, index, encoding, layout_engin
Latex "Error: Extra alignment tab has been changed to \cr. "
Latex 编译时出现 Error: Extra alignment tab has been changed to \cr.  是因为\begin{tabular}后面的参数指定为7列,而实际排了8列数据。
4264 0