display显示属性理解

display属性设置一个元素应如何显示，是我们在前端开发中常常使用的一个属性，其中，最常见的有：

一.隐藏元素display:none;

主要区别visibility：hidden; 和display:none
display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
visibility属性指定一个元素应可见还是隐藏。默认元素是可见的：visibility:visible;

比如，当我们在浏览网页时，如果看到了某个烦人的广告遮挡了我们的实现，更为可气的是，它还没有关闭的选项，这时（以chrome为例），我们就可以按下F12，打开开发者工具，点击element，然后使用左上角的选择工具选中想要删除的广告，可以看到element中会有高亮的一行或几行代码，右键，点击Add Attribute，然后输入：style="display:none"，这时就可以发现广告不见啦！

二.块元素display:block;

块元素特性：

块元素的display属性值默认为block。
总是以一个块的形式表现出来，占领一整行。若干同级块元素会从上之下依次排列（使用float属性除外）。
可以设置高度、宽度、各个方向外补丁（margin）以及各个方向的内补丁（padding）。支持margin：auto;
当宽度（width）缺省时，它的宽度时其容器的100%，除非我们给它设定了固定的宽度。
块元素中可以容纳其他块级元素或行内元素。
常见的块元素由<p><div><h1><li>等等。

三.内联元素display:inline;

内联元素特性：

内联元素的display属性值默认为inline。
它不会单独占据一整行，而是只占领自身的宽度和高度所在的空间。若干同级内联元素会从左到右（即某个行内元素可以和其他行内元素共处一行），从上到下依次排列。
内联元素不可以设置高度、宽度，其高度一般由其字体的大小来决定，其宽度由内容的长度控制。
内联元素只能设置左右的margin值和左右的padding值，而不能设置上下的margin值和上下的padding值。因此我们可以通过设置左右的padding值来改变行内元素的宽度。
常见的内联元素由<a><em><img>等等。
内联元素一般不可以包含块级元素。

通过对一个行内元素设置display:　block;可以将行内元素设置为块级元素，进而设置它的宽高和上下左右的padding和margin。

应用：

如果我们经常会制作导航栏，这时就要使用ul li 和a组合的方式，但是<a>是行内元素，我们无法设置它的宽和高，这时，就可以在<a>的样式表中，将之设置为display：block。这样就可以设置它的宽和高，以及上下左右的margin和padding以达到我们想要的效果了。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{padding: 0;margin:0;list-style: none;}
ul li{float: left;}
a{display:block;width: 30px;height: 30px;background: yellow;margin: 5px; text-decoration: none;text-align: center;line-height: 30px;}
</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>

效果如下：

四.内联块元素display:inline-block;

内联块元素特性：

不强制换行,没有宽度内容撑开宽高
支持宽、高、margin、padding，但不支持margin：auto;
内联块元素居中可使用父容器居中。
即使margin padding都设置为0；代码换行仍然会产生空白符，解决方法：设置父元素字体大小为0像素
IE6,7只支持inline元素设置为inline-block，其它类型元素均不可以
常见内联块元素

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

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul,li,a,*{padding:0; margin:0;list-style: none;text-decoration: none;}
li{display: inline-block;border: thin solid red;}
</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>

效果图如下：

确实实现了横向的排列，实际上，也可以设置宽和高，大家可以自己尝试。但是，很明显有一个问题---我将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>

最终得到的效果图如下：