block、inline和inline-block的区别

display:block将元素设置为块级元素

block元素的特点：

• 前后都有换行，和前后元素都不在一行
• 宽度、行高、边距都可以自行设置
• 宽度缺省是它的容器的100%，除非设置一个宽度
• ,

  ,

  ,

  ,

  和
  • 是块元素的例子。

  示例一：

  HTML:
  
    
  hello world
  
  CSS:
  div{
    background-color:red;
    height:200px;
  }
  

  效果：

  

  示例二：

  HTML：
  
  
  CSS：
  input{
    display:block;
    height:50px;
    width:100px;
  }
  

  上面例子中的input就成了一个块级元素了。
  效果：

  

  display:inline将元素设置为行内元素

  inline元素的特点：

  • 和其他元素都在一行上
  • 高，行高及顶和底边距不可改变
  • 宽度就是它的文字或图片的宽度，不可改变
  • , , , , , 和是inline元素的例子。

  例子：

  HTML：
  
      
  hello
      
  world
  
  CSS:
  h1{
    display:inline;
  }
  

  例子中的h1具有了行内元素的特点

  效果：

  

  display:inline-block

  inline-block元素的特点：

  • 将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。(应用此特性的元素呈现为内联对象，周围元素保持在同一行，但可以设置宽度和高度地块元素的属性)

  例子：

  HTML：
  
    
  hello
    world
  
  CSS:
  h1{
    display:inline-block;
    width:100px;
    height:50px;
    background-color:red;
  }
  

  效果：