[散修弟子]CSS-3188|2017年04月20日的日报-技能树.IT修真院

发表于： 2017-04-20 22:12:34

4 742

今天完成的事情：

用flex对顶栏和底栏固定

遇到的问题：

1.用如下代码来写header

.header{
    position: fixed;
    width: 100%;
    height:7.1vh;
    background: #5FC0CD;
}
img{
    position: absolute;
    top: 50%;
    height:3vh;
    margin-top: -1.5vh;
}

发现将position：fixed去掉时，则img不在div内垂直居中，而是在页面内垂直居中

不明白原因

2.用flex写header时，加入display:flex图片的高度为什么自动变成div的高度？

<head>
    <style type="text/css">
    .header{
        display: flex;
        width: 100%;
        height:7.1vh;
        background: #5FC0CD;
    }
</style>
</head>
<body>
<div class="header">
       <img src="images/task5-1.png">
</div>
</body>