解决头部使用 position:fixed； 固定定位后遮住下方内容的问题

今天在做一个页面的时候，有一个效果是要让头部固定，但是在给了position:fixed; 后，继续往下写会发现下方内容有部分被头部遮住了，有两个办法可以解决这种问题

1.在头部下面给一个空的 div

给这个div设置高度，把页面撑开，这种方法是让头部刚好遮住的是这个空div，把内容放出来。

但是这种方法需要一点点调试高度，所以不推荐。

2.把整个要使用 position:fixed; 的盒子，用另一个盒子包起来

比如说我有一个头部区域，需要固定

 <div class="head">
            <span class="iconfont icon-shouyeshouye"></span>
            <h1>演出列表</h1>
        </div>

.head{
    width: 100%;
    height: 55px;
    position: fixed;
}

这时候再向下写内容就会被头部遮住一部分，因为整个头部的高度为 55px ，所以用一个盒子把整个头部包起来，设置等高，就可以解决了

 <div class="box">
        <div class="head">
            <span class="iconfont icon-shouyeshouye"></span>
            <h1>演出列表</h1>
        </div>
    </div>

.box{
    height: 55px;
}