<style>
        * {
            margin: 0;
            padding: 0;
            color:#fff;
            
        }
        .parent {
            width: 1000px;
            height:800px;
            background: #aaa;           
        }

       
        a{
            background:red;
        }
        span{
          background:blue;
          width:300px;
            
        }
        img{
            vertical-align: middle;
        }
        input{
            width:150px;
            height:30px;
            background:grey;
            border:1px solid #09f;
        }
        h2{
            color:green;
        }
        .a{
           
        }
     
    </style>
</head>

<body>
    <div class="parent">
                  <h2>1:块级元素独占一行</h2>
        <h2>2:块级元素可设width,height</h2>
        <h2>3:块级元素可用margin/padding:left/right/top/bottom</h2>
        <h3>h3   块级元素</h3>
        <p>p  块级元素</p>  
        <ul>
            <li>ul li 块级元素</li>
            <li>ul li 块级元素</li>
        </ul>
        <ol>
            <li>ol li 块级元素</li>
            <li>ol li 块级元素</li>
        </ol>
        <dl>
            <dt>dl dt dd 块级元素</dt>
            <dd>dl dt dd 块级 元素</dd>
        </dl>


        
        <h2>1:行级元素不独一行，相互连接</h2>
        <h2>2:行级元素不可设width,height</h2>
        <h2>3:行级元素可用margin/padding:left/right。不可用margin/padding:top/bottom</h2>

        <a href="">第一个a inline行级元素</a><a href="">第二个a inline行级元素</a>
        <a href="" class="a">第三个a inline行级元素</a>   <a href="" class="a">第四个a inline行级元素</a>
        <input type="text" value="input inline行级元素"/>
        <input type="text" value="input inline行级元素"/>
        <h2>1:行级元素，行块级元素标签不紧凑连接中间有空格时会显示在网页上</h2>
        <h2>2:解决方法：浮动行级，行块级元素

        <h2>1:行块级元素不独占一行，可相互连接</h2>
        <h2>2:行块级可设width,height</h2>
        <h2>3:行块级元素可rgin/padding:left/right/top/bottom</h2>
       
        <span>span 行级元素</span><span>span 行级元素</span>
        <img width="100px" height="50px" title="行块级元素" src="https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=1682403853,827686528&fm=173&s=4D280BD068B37C9E05A0D15A0300D0D3&w=640&h=418&img.JPEG">        
        <img width="100px" height="50px" title="行块级元素" src="https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=1682403853,827686528&fm=173&s=4D280BD068B37C9E05A0D15A0300D0D3&w=640&h=418&img.JPEG">        
        
     
        
    </div>


</body>

</html>