CSS设置百分比值的问题

当给元素设置width：100%；height：100% 的时候没有反应

　　因为，元素的宽高是根据内容来自动适应的，当设置百分比值时，是根据这个元素的父元素来确定百分比的

如果父元素没有固定的值，那就需要设置值才能正常显示如：

    .box{
            width: 100%;
            height: 100%;
            background: #333;
        }
    </style>

    <div class="box">

    </div>

　　此div在页面中没有任何效果，所以要把div的上级元素body设设置了

body{
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
        }
        .box{
            width: 100%;
            height: 100%;
            background: #333;
        }
    </style>

    <div class="box">

    </div>
</body>

　　设置了body还是没有反应，body上还有一个html元素

</head>
<body>

    <style>
        html,body{
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
        }
        .box{
            width: 100%;
            height: 100%;
            background: #333;
        }
    </style>

    <div class="box">

    </div>
</body>
</html>

这样就好了！整个页面都变成灰色的了