内联元素与块元素

内联元素(inline)

• 内联元素(inline)不会独占一行，相邻的内联元素会排在同一行。其宽度随内容的变化而变化。
• 内联元素不可以设置宽高
• 内联元素可以设置margin，padding，但只在水平方向有效。

常用内联元素

<a></a>
<img></img>
<iframe>
    
</iframe>
<span></span>
<font></font>
....

块级元素(block)

• 块级元素会独占一行，默认情况下宽度自动填满其父元素宽度
• 块级元素可以设置宽高
• 块级元素可以设置margin，padding

常用块级元素

<div>
    
</div>
<h1>
    
</h1>
<p>
    
</p>
<form>
    
</form>
...

内联块状元素(inline-block)

就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素。

• 和其他元素都在一行上；
• 元素的高度、宽度、行高以及顶和底边距都可设置。

注意：

• 块级元素主要用来做页面的布局，内联元素主要用来选中文本设置的样式。

• 一般情况下只使用块级元素包含内联元素，而不会使用内联元素去包含一个块级元素。

• a元素可以包含任意元素，除了它本身

• p元素不可以包含任何其他块级元素

相互之间的区别

1. 块级元素会独占一行，而内联元素和内联块元素则会在一行内显示。
2. 块级元素和内联块元素可以设置 width、height 属性，而内联元素设置无效。
3. 块级元素的 width 默认为 100%，而内联元素则是根据其自身的内容或子元素来决定其宽度。

相互转换

关于块级元素与内联元素之间的转换我们可以使用css解决，使用CSS以后块元素和内联元素的这种属性差异就不成为差异了。

比如，我们完全可以把内联元素加上display:block这样的属性，让它也有每次都从新行开始的属性，即成为块元素同样我们可以把块元素加上display:inline这样的属性，让它也在一行上排列。

display:inline

display:inline：显示为内嵌，使快元素转换为内联元素同时具备内联元素标签的特征。

display:block

display:block：显示为块，使内联元素转换为块级元素同时具备块元素标签的特征。

<div style="display:inline">块变内联</div>
<span style="display:block">内联变块</span>