css布局

display属性

每个元素都有一个默认的 display 值，这与元素的类型有关。对于大多数元素它们的默认值通常是 block 或 inline 。一个 block 元素通常被叫做块级元素。一个 inline 元素通常被叫做行内元素。
block
div 是一个标准的块级元素。一个块级元素会新开始一行并且尽可能撑满容器。
其他常用的块级元素 ： p 、 form 。HTML5中的新元素： header 、 footer 、 section 等等

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

none
一些特殊元素的默认 display 值是它，例如 script 。
display:none 通常被 JavaScript 用来在不删除元素的情况下隐藏或显示元素。
它和 visibility 属性不一样。把 display 设置成 none 元素不会占据它本来应该显示的空间，但是设置成 visibility: hidden; 还会占据空间。
inline-block

你可以使用 inline-block 来布局。有一些事情需要你牢记：

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

flex

每个元素都有一个默认的 display 类型。不过你可以随时随地的重写它！虽然“人为制造”一个行内元素可能看起来很难以理解，不过你可以把有特定语义的元素改成行内元素。常见的例子是：把 li 元素修改成 inline，制作成水平菜单。

margin：auto

#main {
  width: 600px;
  margin: 0 auto; 
}

设置块级元素的 width 可以防止它从左到右撑满整个容器。然后你就可以设置左右外边距为 auto 来使其水平居中。元素会占据你所指定的宽度，然后剩余的宽度会一分为二成为左右外边距。

唯一的问题是，当浏览器窗口比元素的宽度还要窄时，浏览器会显示一个水平滚动条来容纳页面。让我们再来改进下这个方案…

max-width

#main {
  max-width: 600px;
  margin: 0 auto; 
}

在这种情况下使用 max-width 替代 width 可以使浏览器更好地处理小窗口的情况。这点在移动设备上显得尤为重要，调整下浏览器窗口大小检查下吧！

盒模型 box-sizing

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

position

参见：https://blog.youkuaiyun.com/xiaoliangsu/article/details/80695328

float

参见：https://blog.youkuaiyun.com/xiaoliangsu/article/details/80691627

媒体查询

“响应式设计（Responsive Design” 是一种让网站针对不同的浏览器和设备“呈现”不同显示效果的策略，这样可以让网站在任何情况下显示的很棒！

媒体查询是做此事所需的最强大的工具。让我们使用百分比宽度来布局，然后在浏览器变窄到无法容纳侧边栏中的菜单时，把布局显示成一列：

@media screen and (min-width:600px) {
  nav {
    float: left;
    width: 25%;
  }
  section {
    margin-left: 25%;
  }
}
@media screen and (max-width:599px) {
  nav li {
    display: inline;
  }
}

column

.three-column {
  padding: 1em;
  -moz-column-count: 3;
  -moz-column-gap: 1em;
  -webkit-column-count: 3;
  -webkit-column-gap: 1em;
  column-count: 3;
  column-gap: 1em;
}

flexbox

参见：https://blog.youkuaiyun.com/xiaoliangsu/article/details/80732529

本文参考：http://zh.learnlayout.com/column.html