开发者社区开发与运维文章正文

display:contents

2023-11-23 23

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： display:contents

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

MDN：https://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>