css常见布局

一.定位

1. relative： 相对与正常文档流偏移，仍占据原先位置，发生偏移时可能覆盖其他元素。
2. static： 默认方式。
3. absolute：脱离标准文档流，相对于最近一层包含元素，属性不是static的元素偏移。
4. inherit: 从父元素继承 position 属性的值。
5. sticky: css3新增，最初被当作relative对待，超过一定阈值会被当作fixed对待，相对视口定位。
6. fixed： 脱离标准文档流，相对于视口定位。

二.浮动

浮动有左浮动和右浮动，浮动的元素会脱离文档流，浮动最初是用来做文字环绕的。

清楚浮动的方法

1.受影响的元素clear: left|right|box;
2.父级元素设置overflow：hidden;
3.最佳实践：
.clearfix:before,
.clearfix:after {
    display: table;
    content: " ";
}
.clearfix:after {
    clear: both;
}
.clearfix{
    *zoom: 1;
}

三.多列布局

body {margin: 0;padding: 0;}
  .body {width: 100%;height: 200px;background-color: #ccc;}
  .left,
  .right,
  .content {
    box-sizing: border-box;
    padding: 10px;
  }
  .left {float: left;width: 200px;height: 100%;background-color: #e1e1e1;}
  .right {float: right;width: 200px;height: 100%;background-color: #f3f5f6;}
  .content {
    padding: 10px;
    overflow: auto; /*让content的padding生效*/
    height: 100%;
    background-color: #009a61;
  }

<div class="body">
  <div class="left">这是左边的内容部分</div>
  <div class="right">这是右边的内容部分</div>
  <!-- content必须放在最后 -->
  <div class="content">这是中间的内容区域</div>
  <br>
  <div class="left">这是左边的内容部分</div>
  <!-- content必须放在最后 -->
  <div class="content">这是中间的内容区域</div>
  <div class="right">这是右边的内容部分</div>
  <br>
  <!-- content必须放在最后 -->
  <div class="content">这是中间的内容区域</div>
  <br>
  <div class="right">这是右边的内容部分</div>
  <div class="right">这是右边的内容部分</div>
  <div class="right">这是右边的内容部分</div>
  <!-- content必须放在最后 -->
  <div class="content">这是中间的内容区域</div>
</div>

layout.png

四.flex布局

.container {
  display: -webkit-flex;
  display: flex;
}
  .box {
    width: 200px;
    height: 200px;
    background-color: #f23b56;
    margin-left: 15px;
  }

<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
</div>

layout1.png

兼容到IE10+,做多列布局挺合适的

四.移动端布局

1. 媒介查询

@media screen and (max-width: 750px) {
  .box {
    height: 200px;
    background-color: #f34434;
  }
}
@media screen and (min-width: 750px) {
  .box {
    height: 200px;
    background-color: #333333;
  }
}

2. flex弹性盒子布局
   flex布局做移动端布局还是很不错的[传送门]:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?^%$
3. rem响应式布局
   rem响应式布局适合做移动端复杂的页面，[传送门]:http://zcox.me/2017/10/20/daily10-20/