CSS基础学习（一）: display

学习前端已有半年多，虽说高级的框架还未怎么学习，但简单的切切页面还是比较熟练的。面对博大精深的CSS技术，总会感到一些迷茫，所以决定翻过头来重新学习一下。所以说本系列是我对以往学过的知识的总结，若有什么地方有错误或者遗漏了什么地方，还请不吝指出，小生在此先谢过了。

display属性是我们经常用到而且比较熟悉的，像none, block, inline,inline-block这四个应该是我们最常用的值，下面就来总结以下它们的用法。

<h1>none</h1>

display: none 可以关闭某个元素的显示，这个元素的所有子元素也会被关闭显示，文档渲染时，这个元素仿佛不存在。

这个属性常被用于隐藏页面中的元素，除此之外还可以用以下方法来隐藏元素，下面来细数他们的区别。

display: none与visibility: hidden

这两种方法的第一个区别就是被前者隐藏的元素不占据任何空间，被后者隐藏的元素却实际占据空间。这个想必大家都知道就不举例子了。第二个区别，被前者隐藏的元素的子元素即使设置了display: block也不会显示，而被后者隐藏的子元素若被设置visibility: visible则可以显示出来。

例子做的丑了些，勿喷

height: 0;和overflow: hidden二者搭配使用，也可以起到隐藏元素的效果,被隐藏的元素不占据空间。

最后一种是通过设置透明度，即opacity :0, 被隐藏的元素占据空间，可通过position: absolute;使其不再占据空间。这种方法与以上三种方法的最大区别就是，被此方法隐藏的元素可以被点击，而其他三种方法则不可以。

<h1>block和inline</h1>

display: block

有该属性的元素为块级元素，常见的有div，p，h1~h6，ul等，块级元素具有以下特点：

1. 单独占据一行显示，默认情况下，其宽度会自动填满父元素宽度；
2. 可以设置width，height属性；
3. 可以设置margin，padding属性。

display: inline

有该属性的元素为内联元素，常见的有span，a，strong等，内联元素具有以下特点：

1. 可以在一行排列，直到父元素宽度不够才会换行；
2. 不可以设置width，height属性，其宽度由内容决定；
3. 竖直方向上，即margin-top, margin-bottom, padding-top, padding-bottom无效。水平方向上，即margin-left, margin-right, padding-left, padding-right有效。

<h1>inline-block</h1>

通过display: inline-block; 可以使元素对外表现出inline元素的特性，可以排列在一行；而对内则是表现block属性，可以设置height，width，margin，padding。

但是inline-block常常会出现一个问题就是元素之间会出现莫名其妙的间距

下面说一说消除这种间距的方法

1. 消除html中的空格，即将inline-block元素连在一起写

<div><span display="inline-block"></span><span display="inline-block"></span></div>

这种方法的不足之处就是失去代码的结构性，不能一眼看出元素关系。

2. margin负值
   通过给每个inline-block元素添加margin负值来调整位置

span{ display: inline-block; margin-left: -5px; }

这个负值的大小需要自己来调整。

3. font-size: 0
   这种方法在大部分浏览器都是合适的，若是在Chrome浏览器中，则需加上-webkit-text-size-adjust: none;
4. word-spacing和letter-spacing
   这两种方法的值，因浏览器的差异，都需要自己去调。

<h1>参考资料</h1>

张鑫旭-鑫空间-鑫生活：去除inline-block元素间间距的N种方法
张鑫旭-鑫空间-鑫生活：您可能不知道的CSS元素隐藏“失效”以其妙用