display几种样式的理解
在HTML标签中，存在着两种标签类型，即行内元素（或者说行内标签）和 块内元素（或者块级标签）。 这两种标签的特点分别是：
行内元素： 元素结束默认不换行。内部只能包含行内元素 或者 文本内容，不能由块 级元素。
块级元素：从新的一行开始，结束时接着一个断行。元素内部可以包含块级元素，行内元素，文本内容等。
下面来个简单例子来看一下：
<body>
<p> Hello! 我是块级元素。 你知道我兄弟们都有<strong>谁吗？</strong></p>
<p> Hello! 我是块级元素。 你知道我兄弟们都有<strong>谁吗？</strong></p>
</body>
结果：
Hello! 我是块级元素。 你知道我兄弟们都有谁吗？
Hello! 我是块级元素。 你知道我兄弟们都有谁吗？
可以看到，每个< p> 标签输出的内容占一行，而每个< strong>标签，并没有换行。
在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! 我是块级元素。 你知道我兄弟们都有谁吗？
这里只显示一句话，也就是说，第一个< p >标签被隐藏了。
2 . display:block;
这个的意思是，以块级元素的形式来展示该元素。而且，块级元素默认是此属性。
如果我们想把一个 行内元素 以块级元素的形式展示，那么就可以通过此方法
<span>你好，我是shandamengcheng.</span><span>你好，我是shandamengcheng.</span>
结果为：
你好，我是shandamengcheng.你好，我是shandamengcheng.
如果我们把第一个< span>标签设置以块级元素方式展示：
<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.
奇怪，为什么会出现这种情况？按理说应该是在同一行才对！！！
这是因为，第一个< p>元素 确实是称为行内元素，但是第二个仍为块级元素。块级元素的特性之一就是 ------以新的以新的一行开始。
所以，我们可以做一些修改：
<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>
结果为：
其他地方也有用到此属性，比如说，设置一个横屏的目录。
<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>
结果为：
以上内容是个人的理解，也是个人笔记，如果感到有问题，欢迎随时交流。 ：）
