前端小知识（记录工作中遇到的小知识点）

一、图片固定宽高（这种情况比较适合在不知道图片宽高比例的情况下的图片列表）

1. 不考虑拉伸只考虑固定宽高直接使用css给图片固定宽高。
2. 在考虑拉伸不考虑固定宽高的情况下也就是需要等比的情况下，只需要给图片一个宽度就行了，会自适应一个高度。
3. 两者都考虑的情况目前有两种办法：
   ①、使用img做载体给一个固定宽高，使用css中的object-fit:cover属性，注意: Internet Explorer/Edge 15 或更早版本的浏览器不支持 object-fit 属性。
   ②、使用div做载体给一个固定宽高，使用css的背景图片

{
    background-image:url('');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
}

二、图片和文字垂直居中显示

<div class='center'>
    <img src=''>
    <span>这里是文字</span>
</div>
<style>
    .center *{
        display:inline-block;
        vertical-align: middle;
    }
</style>

三、子元素在父元素中垂直水平居中显示

{
    display: flex;
    align-items: center;
    justify-content: center;
}

四、父元素伪类方法清除浮动

.clearFix:after{
    content: "020";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearFix {
    zoom: 1;
}