今天来聊聊块级元素，行内块级和行内元素吧~代码效果图分析从上面的效果图我们能观察到元素div是独占一行的，并且可以

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视频播放</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: #df4c98;
        }

        span{
            width: 200px;
            height: 200px;
            background-color: #d07b2c;
        }

        input{
           width: 200px;
           height: 200px;
        }
    </style>
</head>
<body>
    <div>块级元素</div>
    <p>块级元素</p>
    <span>行内元素</span>
    <a href="https://www.baidu.com">去百度</a>
    <input type="text" placeholder="行内块级">
</body>
</html>

效果图

分析

从上面的效果图我们能观察到元素div是独占一行的，并且可以自行设置宽高；
元素p也是独占一行的，标签a没有独占一行；
元素input也没有独占一行，但是可以自行设置宽高；
元素span没有独占一行，但是我们可以发现我们給其设置的宽高并没起作用；
接下来我们给元素span添加一个display: inline-block;

    span{
            width: 200px;
            height: 200px;
            background-color: #d07b2c;
            display: inline-block;
        }

效果图：

我们可以观察到元素span的宽高有效果了。

总结

块级元素 (设置display:block可以变成块级元素)
1. 默认占据一整行
2. 可以设置宽高
行内块级 (设置display:inline-block可以变成行内块级)
1. 不会默认占据一整行
2. 可以设置宽高
行内元素
1. 不会默认占据一整行
2. 不可以设置宽高