div不会被文字大小所影响

最近要做一个div里面放非常大的字，但是简单的设置font-size 就发现div本身的样式 被文字所修改。

于是研究一段时间。发现还是比较好玩的。

css：

        #div1{
        width: 100px;
        height: 200px;
        overflow: hidden;
        background-color: yellow;
        }
        #div2{
        width: 100%;
        height: 100%;
        font-size:200px;
        line-height: 200px;

        }

html:

    <div id="div1">
    <div id="div2">
    7
    </div>

    </div>

效果就是这样，相当好玩。