码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2018-03-16 13:31:29      阅读:200      评论:0      收藏:0      [点我收藏+]

标签:换行符   bsp   iap   nbsp   blog   ack   dia   splay   round   

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>

 

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

标签:换行符   bsp   iap   nbsp   blog   ack   dia   splay   round   

原文地址:https://www.cnblogs.com/viczcj/p/8580434.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!