1 display:block

1).每一个元素都有默认的display属性值，比如div元素，它的默认display属性值为“block”，成为“块级”元素(block-level)；而span元素的默认display属性值为“inline”，称为“行内”元素

2).块级元素：占据一定矩形空间，可以通过设置高度、宽度、内外边距等属性，来调整的这个矩形；
行内元素 ：自己的独立空间，它是依附于其他块级元素存在的，因此，对行内元素设置高度、宽度、内外边距等属性，都是无效的。
3).例子：链接 a 元素，在默认情况下是是“行内元素”，因此对a元素设置高度、宽度等属性，都是无效的。而比如div，p，li，img等默认情况下的display属性值就是“block”。所以对于链接a来说只能这样：display:block;强制将它改成块元素。**

设置display:block就是将元素显示为块级元素。如下代码就是将内联元素a转换为块状元素，从而使a元素具有块状元素特点。
a{display:block;}
块级元素特点：
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

块状元素也可以通过代码display:inline将元素设置为内联元素。如下代码就是将块状元素div转换为内联元素，从而使div元素具有内联元素特点。

内联元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。

2 display:inline

display:inline 的作用是设置对象做为行内元素显示
它可以让行内显示为块的元素，变为行内显示，例如

DIV1

DIV2

这里DIV1和DIV2分别占一行，但加上属性后就变了
DIV1

DIV2

3 display:none

display:none的作用是把网页上某个元素隐藏起来与visible:hidden类似
但两者有区别:
●display:none —-不为被隐藏的对象保留其物理空间，即该对象在页面上彻底消失，通俗来说就是看不见也摸不到。
●visible:hidden—- 使对象在网页上不可见，但该对象在网页上所占的空间没有改变，通俗来说就是看不见但摸得到。
1、visibility: hidden——将元素隐藏，但是在网页中该占的位置还是占着。
2、display: none——将元素的显示设为无，即在网页中不占任何的位置。
3、例如有三个table，将中间的一个table hidden掉，你会发现在那个被hidden的table看不见了，但是，中间会留有很大的一空白，而这个空白就是这个table没有被隐藏时所占的位置。
4、而none的作用更像是把元素从网页中“去除”（当然不是真的去除，只是效果是如此）
5、例如有三个table，将中间的一个table none掉，你会发现在剩下的两个table中间不会有任何的空白。就好像中间的那个table从来不存在过一样。

4 display：inline-block

display:inline-block 实际上我们就可以才出来它是结合了inline和block的特性于一身。即设置了inline-block属性的元素既具有block元素可以设置width和height属性的特性，又保持了inline元素不换行的特性。
举例说明，我们之前在做横向导航菜单的时候，一般是用ul li a组合，然后将li设置为float，这样就可以得到横向的导航标签了。而现在我们可以通过li和display:inline-block;来实现

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         ul,li,a,*{padding:0; margin:0;list-style: none;text-decoration: none;}
  8.         li{display: inline-block;border: thin solid red;}
  9.     </style>
  10. </head>
  11. <body>
  12.     <ul>
  13.         <li><a href="">1</a></li>
  14.         <li><a href="">2</a></li>
  15.         <li><a href="">3</a></li>
  16.         <li><a href="">4</a></li>
  17.         <li><a href="">5</a></li>
  18.     </ul>
  19. </body>
  20. </html>

效果：
image.png

确实实现了横向的排列，实际上，也可以设置宽和高，大家可以自己尝试。但是，很明显有一个问题—-我将padding和margin的值都设置为0，为什么他们之间还会有距离呢？实际上，这是inline元素自身出现的问题，而inline-block结合了inline和block属性，当然也就存在这个问题了。这些空隙是空白符，在浏览器中，空白符是不会被浏览器忽略的，多个连续的空白符浏览器会自动将其合并成一个。我们编写代码时写的空格，换行都会产生空白符。所以自然而然的两个元素之间会有空白符，如果将上述例子中的a标签写成一行，空白符消失，菜单之间也就紧凑起来了。
解决方法：我们要明白空白符归根结底是一个字符，只要我们将ｕｌ中的字符的大小设置位０，那么空白符也就不会存在了，但是这是a的字体大小也会继承ul的字体大小，那么就不见了，该怎么办，只需要将a中再设置一个字体不为0的大小覆盖即可。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul{font-size: 0;}
        ul,li,a,*{padding:0; margin:0;list-style: none;text-decoration: none;}
        li{display: inline-block;border: thin solid red;font-size: 15px;}
    </style>
</head>
<body>
    <ul>
        <li><a href="">1</a></li>
        <li><a href="">2</a></li>
        <li><a href="">3</a></li>
        <li><a href="">4</a></li>
        <li><a href="">5</a></li>
    </ul>
</body>
</html>

image.png
我们还可以通过inline-block完成一个常见的三列布局。
html代码如下：

#header,#footer{height: 50px;width:800px;margin:0 auto;background: #ccc;text-align: center;line-height: 50px;}
#content{width:800px;height: 500px;margin: 0 auto;background: #aaa;font-size: 0;}
#left,#right{display: inline-block;width: 200px;height: 500px;background: #fadaac;font-size: 30px;text-align: center;line-height: 500px}
#center{display: inline-block;width: 400px;height: 500px;background: #dadada;font-size: 30px;text-align: center;line-height: 500px}

display:inherit

规定应该从父元素继承 display 属性的值。举例如下：
html代码如下：





css代码如下：
#parent{ display: inline-block； font-size: 0; background: #cadafa;width: 400px;height: 300px;}
#first_son{display: inherit; background: #eaedac;width: 200px;height: 100px;}
#second_son{display: inherit; background: #da5dd8;width: 200px;height: 100px;}
效果图如下：
display的那些属性 - 图3
即我们先设置了id为parent的元素的display属性值为inline-block，然后将其子元素的display属性值设置为inherit（继承），于是，子div的display属性值继承了父元素的display属性值为inline-block。（注意，我在id为parent的div元素中设置了font-size:0px;这样可以有效解决由inline元素带来的空白符问题。）