学习css布局

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 值
  还有很多的更有意思的 display 值，例如 list-item 和 table 。可参看[详细列表](https: //developer.mozilla.org/en-US/docs/Web/CSS/display)

盒布局

• 当你设置一个元素为 box-sizing: border-box; 时，此元素的内边距和边框不再会增加它的宽度。

• 既然 box-sizing 是个很新的属性，目前你还应该像我之前在例子中那样使用 -webkit- 和 -moz- 前缀。这可以启用特定浏览器实验中的特性。同时记住它是支持IE8+。

. {
  -webkit-box-sizing:  border-box;
     -moz-box-sizing:  border-box;
          box-sizing:  border-box;
}

媒体查询

[MDN文档](https: //developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries)

inline-block

你可以创建很多网格来铺满浏览器。在过去很长的一段时间内使用 float 是一种选择，但是使用 inline-block 会更简单。

你可以使用 inline-block 来布局。有一些事情需要你牢记：
vertical-align 属性会影响到 inline-block 元素，你可能会把它的值设置为 top 。
你需要设置每一列的宽度
如果HTML源代码中元素之间有空格，那么列与列之间会产生空隙

position

• static
  默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

• relative
  生成相对定位的元素，相对于其正常位置进行定位。
  因此，"left: 20" 会向元素的 LEFT 位置添加 20 像素。
• fixed
  生成绝对定位的元素，相对于浏览器窗口进行定位。
  元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
• absolute
  生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
  元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
• inherit
  规定应该从父元素继承 position 属性的值。

参考： [学习css布局](http: //zh.learnlayout.com/frameworks.html)