display几种样式的理解

在HTML标签中，存在着两种标签类型，即行内元素（或者说行内标签）和块内元素（或者块级标签）。这两种标签的特点分别是：
行内元素：元素结束默认不换行。内部只能包含行内元素或者文本内容，不能由块级元素。
块级元素：从新的一行开始，结束时接着一个断行。元素内部可以包含块级元素，行内元素，文本内容等。

下面来个简单例子来看一下：

<body>
    <p> Hello! 我是块级元素。 你知道我兄弟们都有<strong>谁吗？</strong></p>
    <p> Hello! 我是块级元素。 你知道我兄弟们都有<strong>谁吗？</strong></p>
</body>

结果：

Hello! 我是块级元素。你知道我兄弟们都有谁吗？
Hello! 我是块级元素。你知道我兄弟们都有谁吗？

可以看到，每个 标签输出的内容占一行，而每个标签，并没有换行。

在CSS中，我们有个属性设置，即display, 可以用来设置元素的展示类型。其常用的主要有block,none,inline,inline-block;

1. display:none;

其实，可以简单从字面上理解，即不显示，因此该元素会被隐藏，而且其隐藏后，页面上不会保留其物理空间。

<html>
<head>
<meta charset="utf-8">
<style>
#p1{
  display: none;
}
</style>
</head>
<body>
    <p id="p1"> Hello! 我是块级元素。 你知道我兄弟们都有<strong>谁吗？</strong></p>
    <p> Hello! 我是块级元素。 你知道我兄弟们都有<strong>谁吗？</strong></p>
</body>
</html>

结果是：

Hello! 我是块级元素。你知道我兄弟们都有谁吗？
这里只显示一句话，也就是说，第一个标签被隐藏了。

2 . display:block;

这个的意思是，以块级元素的形式来展示该元素。而且，块级元素默认是此属性。

如果我们想把一个行内元素以块级元素的形式展示，那么就可以通过此方法

<span>你好，我是shandamengcheng.</span><span>你好，我是shandamengcheng.</span>

结果为：

你好，我是shandamengcheng.你好，我是shandamengcheng.
如果我们把第一个标签设置以块级元素方式展示：

<head>
<meta charset="utf-8">
<style>
#span1{
  display: block;
}
</style>
</head>
<body>
    <span id="span1">你好，我是shandamengcheng.</span><span>你好，我是shandamengcheng.</span>
</body>

结果为：

你好，我是shandamengcheng.
你好，我是shandamengcheng.
可以看到，结果为两行。

3. display:inline;

这个的意思是以行内元素的方式展示该元素。且它是行内元素的默认属性。
如果我们想把一个块级元素以行内元素的方式展示，那么可以通过此方法。

<style>
/*#span1{
  display: block;
}*/
</style>
</head>
<body>
    
    <p id="p1">你好，我是shandamengcheng.</p>
    <p>你好，我是shandamengcheng.</p>
</body>

结果为：

你好，我是shandamengcheng.
你好，我是shandamengcheng.
若加上属性设置：

<style>
#p1{
  display: inline;
}
</style>
</head>
<body>  
    <p id="p1">你好，我是shandamengcheng.</p>
    <p>你好，我是shandamengcheng.</p>
</body>

结果为：

你好，我是shandamengcheng.

你好，我是shandamengcheng.

奇怪，为什么会出现这种情况？按理说应该是在同一行才对！！！

这是因为，第一个元素确实是称为行内元素，但是第二个仍为块级元素。块级元素的特性之一就是 ------以新的以新的一行开始。
所以，我们可以做一些修改：

<style>
#p1{
  display: inline;
}
</style>
</head>
<body>
    <p id="p1">你好，我是shandamengcheng.</p>
    <span>你好，我是shandamengcheng.</span>
</body>

结果为：

你好，我是shandamengcheng. 你好，我是shandamengcheng.

4. display:inline-block;

这种设置方法可以说是兼具上面的2，3的功能，可以实现以行内元素的形式展示元素，又可以对该元素进行宽高，内外边距的设置。

行内元素和块级元素的主要区别是盒子模型：即行内元素不能设置宽高，上下位置的内外边距。

<style>
#p1{
  display: inline-block;
  width:200px;
  height:200px;
  background: pink;
}
</style>
</head>
<body>
    <p id='p1'>你好，我是shandamengcheng.</p>
    <span>你好，我是shandamengcheng.</span>
</body>

结果为：

result.png

其他地方也有用到此属性，比如说，设置一个横屏的目录。

<html>
<head>
<meta charset="utf-8">
<style>
ul li{
  display: inline-block;
  width:80px;
  height:20px;
  background: pink;
}
</style>
</head>
<body>
    <ul>
        <li>主页</li>
        <li>新闻</li>
        <li>个人</li>
    </ul>
</body>
</html>

结果为：