css diaplay的各个属性再理解

首先再理解一下块级元素和行内元素：

块级元素：

   a、通常以一个块的形式出现，即使不设置宽度也是占一行的位置。多个块级元素会占领多行位置

   b、可以设置宽度和高度，可以设置padding、marging各个方向的值

   c、块级元素可以包含行内元素

   d、块级元素的display默认是bock

   e、常见的块级元素：<div><p><h>系列<ul>等

   f、给块级元素设置display:inline可以让其有行内元素的表现方式但是此时就不能设置宽高和上下的margin和padding值了，或者设置浮动也可以，或者给其设置小于外层的宽度的宽度值

行内元素：

   a、单个标签不会占据一行的位置，如果有多个行内标签会按照从左到右的方式进行排列

   b、行内元素的高度一般由字体的大小来决定，宽度根据内容的宽度来定

   c、行内元素只能设置左右的margin和padding的值

   d、行内元素内不能包含块级元素，行内元素的display值默认是inline

   e、常见的行内元素有<a><img>

   f、通过给行内元素设置display:block的值可以让其有块级元素的表现效果，即就可以设置上下的padding和margin的值

接下来是display的各个属性：

 

display:none

此属性是设置元素在浏览器中不显示的，但是元素仍然是存在的哦，只是不显示了。

display:block

此属性一般用于让行内元素有会计元素的显示效果，添加属性的元素可以设置上下padding和margin的值，也用于让页面中display：none的元素重新显示出来

display：inline

此属性一般用于块级元素，加上此属性之后块级元素不会占领一整行的位置，也不能设置宽高和上下的margin和padding值了。

display：inline-block

这个属性结合了inline和block两个属性于一身，设置了inline-block属性的元素可以设置宽高，但是又有inline不换行的特点；但是此属性有个特点即使我们给元素设置了margin和padding的值都为0，但是每个元素之间还是会有一点间距。

原因是设置inlne之后会自动的将标签紧挨着，但是我们在工具中写的时候通常会代码格式化会有很多空格出现，浏览器是识别空白符的，多个空白符会合称为一个，所以就会有小间距出现；

解决这个问题的方法一是我们在写页面的时候把标签紧挨着写，但是想想都不现实，如果此类标签是后台循环出现的也不是就尴尬了？

另外一种的解决办法就是，这些标签的父级标签设置font-size:0;因为空白格本身就是字符，那将大小都设置成0了，肯定就没有间距了，在这些元素上再设置字体大小就可以解决这个问题了。

display:table

其实这个属性不止这一个值，见下图。

现在推荐使用div拼table而不是直接用table标签，因为用div会比用table小几K；table的加载方式是渲染完了之后再显示，没渲染完是一片空白，而div不是这样，他是逐行渲染的；table元素不利于SEO优化

使用div再添加display:table的优点：

1、可以均分每个小模块，并且在一行显示；例如一般导航在一行显示的时候如果li都设置成display:table-cell；就不会出现这种情况，即使不设置宽度他们也会在一行显示，你在加多一行他也不会掉下来，依旧会在一样显示。

2、使大小不确定的图片垂直居中显示，这个用的比较多

3、两个同级的元素高度一样