显示模式 -CSDN博客

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title>显示模式</title>
       <style>
           *{
               margin: 0;
               padding: 0;
           }
           .sy{
               width: 300px;
               height: 200px;
               border: 1px solid blueviolet;
               text-align: center; /* 文本水平居中 */
               line-height: 200px; /* 设置行高:行高的值等于盒子高度时垂直居中 */
           }
           a{
               display: block; /* 转化为块元素 */
           }
           p{
               display: inline; /* 转化为行内元素 */
           }
           span{
               display: inline-block; /* 转换为行内块元素 */
           }
       </style>
       
   </head>
   <body>
       <div class="sy">这是一个div标签</div>
       <p class="sy">这是一个p标签</p>
       <span class="sy">这是一个span标签</span>
       <a href="#" class="sy">这是一个链接标签</a>
       <h4 class="sy">4</h4>
       <img src="" class="sy"/>
       <input class="sy" type="text"/>
       <input class="sy" type="password"/>
   </body>
</html>