css:
.div{
    width:100px;
    height:100px;
}
.div1 img{
    width:100%;
    height:100%;
    object-fit:cover;//控制图片不变形的样式                
}

css:
div2:befor{
    content:" ";//有空格
    display:table;      
}

css：
<style>
    .a:after{
        content: " ";
        display: table;
        clear: both;
    }
    .b{
        width:100px;
        height: 100px;
        float: left;
    }
    .c{
        clear: both;
    }
    .d{
        width: 200px;
        height: 200px;
        background: greenyellow;
    }
</style>

HTML：
<div class="a">//设置它的：after（...）
    <div class="b">我是div1</div>
    <div class="b">我是div2</div>
    <div class="c"></div>//加入一个空div清除浮动
</div>
<div class="d"></div>

css:
<style>
    .a{
        position: relative;
        width:300px;
        height: 300px;
        background: yellow;
    }
    .b{
        width: 100px;
        height: 100px;
        background: pink;
        position: absolute;
        top:50%;//设置top为父元素的50%高度
        transform:translateY(-50%);//向上偏移自身的50%高度
    }
</style>

HTML：
<div class="a">
    <div class="b">我是div1</div>
</div>    

css:
cursor: pointer;//一只手
cursor: wait;//一只表或是沙漏
cursor: help;//一个问号或气球
cursor: text;//文本
cursor: crosshair;//十字线
cursor: move;//可被移动

css:
<style>
    @media screen and (min-width: 990px){//该代码只在媒体查询为真的情况下执行（屏幕最小宽度大于990px时执行）
        div{
            width:300px;
            height: 300px;
            background: yellow;
        }
    }
</style>