重新认识块级元素和内联元素（display属性）

块级元素(block-level)

1. 块级元素相当于一个容器盒子，通常用于展示页面上结构化的内容，例如段落、列表、导航菜单、页脚等等。一个以block形式展现的块级元素不会被嵌套进内联元素中，但可以嵌套在其它块级元素中。在CSS中，可以添加样式调整块级元素的高度、宽度、外边距以及内边距等等。如：

<style>
    div{
    width:200px;
    height:200px;
}
</style>

块级元素宽度默认是容器（父级宽度）的100%，你可以利用width属性进行调整

1. 值得注意，有些块级元素不能随意嵌套。比如文字类块级标签h1,h2,h3,h4,h5,h6,dt,p里面不能嵌套其他块级元素（特别是 div 元素）。

内联元素(inline-level)

1. 内联元素通常出现在块级元素中并环绕文档内容的一小部分，而不是一整个段落或者一组内容。内联元素不会导致文本换行。常见的内联元素有：

<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等

• 内联元素默认宽度就是它本身内容的宽度，高度和宽度无法直接设置。
• 行内元素只能容纳文本或则其他行内元素。

行内块元素（inline-block）

1. 在行内元素中有几个特殊的标签、、，可以对它们设置宽高和对齐属性。例如：

<style>
    img{
    width:200px;
}
</style>

1. 行内块元素在一行内可以显示多个。但是在显示时，相邻行内块元素之间会 有空白缝隙 。

三类元素模式总结

元素模式转换（display）

• 转成行内元素：display:inline;
• 转成块级元素：display:block;
• 转成行内块元素：display: inline-block;

实例：将 a 元素转换为行内块元素

点击查看【codepen】