dispaly :inline、block、inline-block的区别

1，在说这个区别之前必须首先明确HTML的块级元素和内联元素。

   块级元素包括：<div>、<form>、<table>、<p>、<h1>、<ol>、<li>、<ul>等

   内联元素有：<span>、<a>、<input>、<img>、<label>、<em>、<strong>等

2，block元素的特点是：

• block元素会独占一行，多个block元素会各自新起一行，默认情况下，block元素宽度自动填满其父元素的宽度
• block元素可以设置width、height属性，块级元素即使设置了宽度，仍然独占一行
• block元素可以设置margin和padding

3，inline元素的特点是：

• inline不会独占一行，多个相邻的inline元素会排列在同一行里，直到一行排不下，才会换一行，其宽度随元素的内容而变化
• 不能改变元素的height、width值，大小由其内容撑开
• 可以使用padding，margin的left和right产生边距效果，但是top和button不行

4，inline-block元素的特点是：

    将对象呈递为内联对象，但是对象的内容作为块级对象呈递，旁边的内联对象会被呈递在同一行内，允许空格

  （应用此特性的元素呈现为内联对象，周围元素保持在同一行，但是可以设置宽度和高度）

    并不是所有浏览器都支持这个特性，目前支持的有：opera\safsri

5,需要将块级元素和内联元素切换的情形：

• 让一个inline元素从新行开始
• 让块元素和其他元素保持在一行上
• 控制inline元素的宽度和高度
• 无须设定宽度即可为一个块元素设定与文字同宽的背景色