1.  让图片填满一个固定宽高的div且图片不变形：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .div1{
            width: 100px;
            height: 100px;
        }
        .div1 img{
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    </style>
</head>
<body>
    <div class="div1">
        <img src="top.jpg">
    </div>
</body>
</html>

 

2.  解决父元素的第一个子元素的margin-top越界的问题：

　问题如下图：

 

　主要原因：div3是div2的第一个子元素！

　解决方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .a{
        width: 100px;
        height: 100px;
        background: red;
    }
    .b{
        width: 50px;
        height: 50px;
        background: pink;
        margin-top: 10px;
    }
    .c{
        width: 100px;
        height: 100px;
        background: yellow;
    }
    .c:before{
        content:" ";
        display:table; 
    }
    </style>
</head>
<body>
    <div class="a">我是div1</div>
    <div class="c">
        <div class="b">我是div1</div>
        <span>我的div2</span>
    </div>
</body>
</html>

 

3. 解决所有的子元素浮动后父元素高度为0（一个大div里有很多小div以浮动排列，大div就会没有高度，导致排版出现问题）

　解决方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .a:after{
            content: " ";
            display: table;
            clear: both;
        }
        .b{
            width: 100px;
            height: 100px;
            background: pink;
            float: left;
        }
        .c{
            width: 100px;
            height: 100px;
            background: greenyellow;
            float: left;
        }
        .d{
            width: 200px;
            height: 200px;
            background: yellow;
        }
    </style>
</head>
<body>
    <div class="a">
        <div class="b"></div>
        <div class="c"></div>
    </div>
    <div class="d"></div>
</body>
</html>

 

综合2和3，就有了bootstrap里的：after和：before。

4. css设置垂直居中：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .a{
            position: relative;
            width: 300px;
            height: 300px;
            background: yellow;
        }
        .b{
            width: 100px;
            height: 100px;
            background: pink;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }
    </style>
</head>
<body>
    <div class="a">
        <div class="b"></div>
    </div>
</body>
</html>

 

5. css设置鼠标的显示类型：

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

6. 实现响应式网页的必要知识：css3媒体查询

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        @media screen and (min-width: 990px){/*该代码只在媒体查询为真的情况下执行（屏幕最小宽度小于990px时执行）*/
            div{
                width: 300px;
                height: 300px;
                background: yellow;
            }
        }
    </style>
</head>
<body>
    <div class="a">
        <div class="b"></div>
    </div>
</body>
</html>