css布局

定位

默认
position: static;

绝对定位
相对于最近的“positioned”祖先元素。如果绝对定位的元素没有“positioned”祖先元素，那么它是相对于文档的 body 元素，并且它会随着页面滚动而移动

  position: absolute;
  top: 120px;
  right: 0;
  width: 300px;
  height: 200px;

相对定位
在一个相对定位的元素上设置 top 、 right 、 bottom 和 left 属性会使其偏离其正常位置。其他的元素的位置则不会受该元素的影响发生位置改变来弥补它偏离后剩下的空隙。

  position: relative;
  width: 600px;
  height: 400px;

固定定位
一个固定定位元素会相对于视窗来定位，这意味着即便页面滚动，它还是会停留在相同的位置。

  position: fixed;
  bottom: 0;
  right: 0;

浮动

float: right;//右
float：left//左

clear 属性被用于控制浮动。

<div class="box">...</div>
<section>...</section>


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

百分比宽度

  float: right;
  width: 50%;

媒体查询

@media screen and (max-width:599px) {
  nav li {
    display: inline;
  }
}

nline-block 布局

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

css3新属性--文字多例

.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;
}