“这是我参与8月更文挑战的第15天，活动详情查看： 8月更文挑战”
CSS样式--转换
HTML给我们提供了丰富的标签，这些标签被定义成不同的类型，一般分为：块级元素和行内元素。
块元素
以区域块方式出现，每个块标签独自占据一行或多行，块结束会自动进行换行。
常见的块元素：<h1> <p> <div> <ul>等。
行内元素
根据内容多少来占用行内空间，不会自动换行。
常见的行内元素：<span> <a>等
display属性
display属性可以使元素在行内元素和块级元素之间进行相互转换。
display有三个属性，分别是：
block 将此元素转换为块级元素(块元素display默认的属性值)
inline 将此元素转换为行内元素(行内元素默认的display属性值)
none 将此元素隐藏，不再显示，也不占用页面空间。
显示与隐藏
display：none隐藏元素，并从布局中删除元素。
h1.hidden {
display: none;
}
除此之外我们还可以使用visibility属性来隐藏元素。
visibility：hidden隐藏元素，但是元素仍然占据空间并影响布局。
h1.hidden {
visibility: hidden;
}
块级元素和行内元素相互转换
块元素尝试获取整个宽度，并在布局中开始新行。一些HTML元素是块元素或块级元素。
<h1>, <p>, <li>, <div>都是块元素的示例。
行内元素与其他行内元素保持在同一行中，并且不会开始新行。
<a>, <span> 是行内元素的示例。
我们可以使用display属性来更改块或内联函数。
以下代码使li元素显示为行内元素。不是开始一个新行作为正常li元素，它显示li元素在同一行。
li {
display: inline;
}
以下代码使span元素显示为块元素。现在每个span元素将像div元素，默认情况下它是一个块元素。
span {
display: block;
}
行内元素和块级元素混合
Inline-Block（内联块）
inline-block值混合块和内联特性。
盒子的外部被视为内联元素。因此，不会为元素创建新行。
框的内部被视为块元素，并应用诸如宽度，高度和边距的属性。
以下代码显示如何使用inline-block值。
<style >
span {
display: inline-block;
border: medium double black;
margin: 2em;
width: 10em;
height: 2em;
}
</style>
<body>
<p>盒子外面被视为行内元素，框的内部被视为块元素，并应用诸如宽度，高度和边距的属性。 <span>这是inline-block混合</span>
</p>
</body>
写在最后
好了，关于CSS样式中的行内元素和块级元素之间的转换我们就学习到这里，亲自动手试一试吧！
以上内容如有不正之处，欢迎掘友们批评指正。
