内联元素和块元素的区别以及转换

1.内联元素和块元素

       内联元素：p、 div、 h1~h6

       块级元素：span、a

  区别：内联元素占空间全部宽度，自动换行；

       块元素必须首先设置其相应的宽度，不会自动换行。

2.两者的相互转换

       a.diaplay:inline;

       内联元素转化为块元素，即将p元素设置占同一行，中间不显示换行。

  代码如下：

    <style>
       p {display:inline;}
    </style>
    <body>
      <p> display属性的值为 "inline"的结果</p>
      <p>两个元素之间没有距离.</p>
    </body>

   b.display:block;

    块元素转化为内联元素，即将span元素设置为自动换行。

  代码如下：

    <style>
        span {display:block;}
    </style>

    <body>
        <span> display属性的值为 "block"的结果</span> <span>两个元素之间有换行符距离.</span>
    </body>

 

posted @ 2018-03-16 12:37  vichang  阅读(597)  评论(0)  编辑  收藏  举报