一.定位

1. relative： 相對(duì)與正常文檔流偏移，仍占據(jù)原先位置，發(fā)生偏移時(shí)可能覆蓋其他元素。
2. static： 默認(rèn)方式。
3. absolute：脫離標(biāo)準(zhǔn)文檔流，相對(duì)于最近一層包含元素，屬性不是static的元素偏移。
4. inherit: 從父元素繼承 position 屬性的值。
5. sticky: css3新增，最初被當(dāng)作relative對(duì)待，超過(guò)一定閾值會(huì)被當(dāng)作fixed對(duì)待，相對(duì)視口定位。
6. fixed： 脫離標(biāo)準(zhǔn)文檔流，相對(duì)于視口定位。

二.浮動(dòng)

浮動(dòng)有左浮動(dòng)和右浮動(dòng)，浮動(dòng)的元素會(huì)脫離文檔流，浮動(dòng)最初是用來(lái)做文字環(huán)繞的。

清楚浮動(dòng)的方法

1.受影響的元素clear: left|right|box;
2.父級(jí)元素設(shè)置overflow：hidden;
3.最佳實(shí)踐：
.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">這是左邊的內(nèi)容部分</div>
  <div class="right">這是右邊的內(nèi)容部分</div>
  <!-- content必須放在最后 -->
  <div class="content">這是中間的內(nèi)容區(qū)域</div>
  <br>
  <div class="left">這是左邊的內(nèi)容部分</div>
  <!-- content必須放在最后 -->
  <div class="content">這是中間的內(nèi)容區(qū)域</div>
  <div class="right">這是右邊的內(nèi)容部分</div>
  <br>
  <!-- content必須放在最后 -->
  <div class="content">這是中間的內(nèi)容區(qū)域</div>
  <br>
  <div class="right">這是右邊的內(nèi)容部分</div>
  <div class="right">這是右邊的內(nèi)容部分</div>
  <div class="right">這是右邊的內(nèi)容部分</div>
  <!-- content必須放在最后 -->
  <div class="content">這是中間的內(nèi)容區(qū)域</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+,做多列布局挺合適的

四.移動(dòng)端布局

1. 媒介查詢(xún)

@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布局做移動(dòng)端布局還是很不錯(cuò)的[傳送門(mén)]:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?^%$
3. rem響應(yīng)式布局
   rem響應(yīng)式布局適合做移動(dòng)端復(fù)雜的頁(yè)面，[傳送門(mén)]:http://zcox.me/2017/10/20/daily10-20/