display几种样式的理解

display几种样式的理解

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

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

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

结果：

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

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

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

1. display:none;

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

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

结果是：

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

2 . display:block;

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

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

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

结果为：

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

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

结果为：

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

3. display:inline;

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

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

结果为：

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

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

结果为：

你好，我是shandamengcheng.

你好，我是shandamengcheng.

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

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

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

结果为：

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

4. display:inline-block;

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

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

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

结果为：

result.png

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

    

        
主页
        
新闻
        
个人
    

结果为：

content.png

---

---

以上内容是个人的理解，也是个人笔记，如果感到有问题，欢迎随时交流。 ：）