前端布局 display、inline-block 属性使用详解

    前端和后台最大的区别在于业务逻辑。前端基本上没什么业务逻辑，后台普遍都是业务逻辑。因此有人喜欢前端，有人喜欢后端。觉得前端难的人，在于对 CSS 的不理解。本系列文章将带领大家从最基本的每个属性讲起，让你彻底掌握 前端布局。

css 布局之于页面就如同 ECMAScript 之于 JS 一般，细想一番，html 就如同语文，css 就如同数学，js 就是物理。 回到主题，从最开始的 css 到如今的 sass(less)，开发的效率确实变得越来越高效，但是可能有时候我们还是会对页面布局产生烦恼的情绪，比如:我给他加粗了，没变化；我调整了显示位置，却不动。造成这些问题的很大原因在于我们可能没对 css 布局这块做一个系统的梳理。在此分享给大家，希望和大家共同提高！

填坑 display

display 是 CSS 中最重要的用于控制布局的属性。每个元素都有一个默认的 display 值，这与元素的类型有关。对于大多数元素它们的默认值通常是 block 或 inline。一个 block 元素通常被叫做块级元素。一个 inline 元素通常被叫做行内元素。

block：
div 是一个标准的块级元素。一个块级元素会新开始一行并且尽可能撑满容器。其他常用的块级元素包括 p 、 form 和HTML5中的新元素： header 、 footer 、 section 等等。

inline:
span 是一个标准的行内元素。一个行内元素可以在段落中<span> 像这样 </span>包裹一些文字而不会打乱段落的布局。 a 元素是最常用的行内元素，它可以被用作链接。

none:

另一个常用的display值是 none 。一些特殊元素的默认 display 值是它，例如 script。 display:none 通常被 JavaScript 用来在不删除元素的情况下隐藏或显示元素。

它和 visibility 属性不一样。把 display 设置成 none 不会保留元素本该显示的空间，但是 visibility: hidden; 还会保留。

扩展:

每个元素都有一个默认的 display 类型。不过你可以随时随地的重写它！常见的例子是：把 li 元素修改成 inline，制作成水平菜单。

*inline-block布局

把inline-block单独拎出来讲，说来惭愧，很长一段时间我都是蒙着用它的，对于block、inline、inline-block的区别我自己总结了一句话

block:有宽高，不在同一行； inline:同一行，无宽高； inline-block: 有宽高又在同一行

这算是个小插曲吧，接着我们的布局之旅；在此之前，读者需可以先阅读下文的float布局和clear的知识再回头来看这知识会容易不少，然后我们会对比inline-block布局相对于float布局的优势；

困难的方式（float布局）

.box {
  float: left;
  width: 200px;
  height: 100px;
  margin: 1em;
}
.after-box {
  clear: left;
}

.after-box 我在使用 clear，所以我不会浮动到上面那堆盒子的旁边。

容易的方式（使用inline-block）

你可以用 display 属性的值 inline-block 来实现相同效果。  

.box2 {
  display: inline-block;
  width: 200px;
  height: 100px;
  margin: 1em;
}

这次我可没有用 clear 。
使用inline-block布局的注意项:

①vertical-align 属性会影响到 inline-block 元素，你可能会把它的值设置为 top 。
②你需要设置每一列的宽度
③如果HTML源代码中元素之间有空格，那么列与列之间会产生空隙

你得做些额外工作来让IE6和IE7支持 inline-block 。有些时候人们谈到 inline-block 会触发叫做 hasLayout 的东西，你只需要知道那是用来支持旧浏览器的。如果你对此很感兴趣，可以在后面的链接中找到更详细的信息。