div标签里面没有内容 就不显示 加了border会显示（并不）

11.25更新：
div中是被div中的内容撑开的，如果没有内容，那么就没有高度，因此也不会显示。如果要让空空的div显示，需要设置高宽height、width。
done。
===========================原文===========================

        .simple {
            width: 500px;
            margin: 20px auto;
            background-color: #7f7f7f;
            
        }

        .fancy {
            width: 500px;
            margin: 20px auto;
            padding: 20px;
            border-width: 10px;
            border-style: solid;
            border-color: #000;
            background-color: #7f7f7f;
        }
    <div class="simple">我小</div>
    <div class="fancy">我大</div>

这样就会显示，

我小 我大

删掉div标签中的“我小”，然后div就不显示了？？？

    <div class="simple"></div>
    <div class="fancy">我大</div>

为啥.simple就显示了

但是我学了border之后，又发现，如果加上border，div.simple就又出现了？？？

        .simple {
            width: 500px;
            margin: 20px auto;
            background-color: #7f7f7f;
            
        }

        .fancy {
            width: 500px;
            margin: 20px auto;
            padding: 20px;
            border-width: 10px;
            border-style: solid;
            border-color: #000;
            background-color: #7f7f7f;
        }
    <div class="simple">我小</div>
    <div class="fancy">我大</div>

但只有边框，没有里面的内容

？？？
重新把“我小”加上后：

正常了许多

emm还是不是很明白的。
庆幸的是做实验很快，改改代码就又有新的hack。