css 佈局

opt_bbt發表於2018-08-27
CSS

三欄式佈局

float

主要是利用浮動元素脫離文件流，導致後面的元素可以流動到前面

<style>
    div {
      height: 300px;
    }
    .left, .right {
      width: 200px;
    }
    .left {
      background-color: pink;
      float: left;
    }
    .center {
      background-color: gray;
    }
    .right {
      background-color: red;
      float: right;
    }
    .center {
      margin-left: 200px;
      margin-right: 200px;
    }
</style>
<body>
   <div class="left"></div>
   <div class="right"></div>
   <div class="center"></div>
</body>
複製程式碼

position

和 float 同一個道理

<style>
    body {
      position: relative;
    }
    div {
      height: 300px;
    }
    .left, .right {
      width: 200px;
      position: absolute;
      top: 0;
    }
    .left {
      background-color: pink;
      left: 0;
    }
    .center {
      background-color: gray;
    }
    .right {
      background-color: red;
      right: 0;
    }
    .center {
      margin-left: 200px;
      margin-right: 200px;
    }
</style>
<body>
   <div class="left"></div>
   <div class="right"></div>
   <div class="center"></div>
</body>
複製程式碼

flex

<style>
    body {
      display: flex;
    }
    div {
      height: 300px;
    }
    .left, .right {
      flex: 0 0 200px;
    }
    .left {
      background-color: pink;
    }
    .center {
      flex: 1;
      background-color: gray;
    }
    .right {
      background-color: red;
    }
</style>
<body>
   <div class="left"></div>
   <div class="center"></div>
   <div class="right"></div>
</body>
複製程式碼

margin 負值法

先來看一個margin等於負值的demo

<style>
    body {
      width: 350px;
    }
    div {
      width: 100px;
      height: 100px;
      float: left;
    }
    .blue {
      background-color: blue;
    }
    .green {
      background-color: green;
    }
    .orange {
      background-color: orange;
    }
    .pink {
      background-color: pink;
      <!--margin-left: -50px;-->
    }
</style>
<body>
  <div class="blue"></div>
  <div class="green"></div>
  <div class="orange"></div>
  <div class="pink"></div>
</body>
複製程式碼

效果如下圖所示，body只給了350px 放不下4 * 100px，所以最後一項被擠到了第二排。

css 佈局

，那麼如何才能讓最後一項上去呢？先來算一下還差多少畫素，400 - 350 = 50。這時如果給最後一項設定margin-left: -50px；那麼四個div的總寬度就是100 + 100 + 100 + 100 -50（左外邊距）= 350px; 效果如下：

css 佈局
我們可以看到margin-left可以改變在文件流中位置。利用這一點我們也可以實現一個三欄佈局：

要點就是先利用padding留出左右距離，然後兩端分別利用margin負值移動到第一排，對於左端，還需要進行position定位移動到padding位置，而對於右端，我們將margin-right值設定為負的元素寬度，這時這個元素在文件流中的計算寬度等於 -100px（margin-right）+ 100px（元素寬度） = 0, 所以也會定位到padding的位置

注意此處有一個最小寬度的限制值 100(左padding) * 2 + 100(右padding) = 300

<style>
    body {
      min-width: 100px;
      padding: 0 100px;
    }
    .blue {
      background-color: blue;
    }
    .green {
      background-color: green;
    }
    .orange {
      background-color: orange;
    }
    div {
      height: 100px;
      float: left;
    }
    .left, .right {
      width: 100px;
    }
    .center {
      width: 100%;
    }
    .left {
      position: relative;
      right: 100px;
      margin-left: -100%;
    }
    .right {
      margin-right: -100px;
    }
</style>
<body>
  <div class="center green"></div>
  <div class="left blue"></div>
  <div class="right orange"></div>
</body>
複製程式碼

雙飛燕佈局

與前一個相比多了一個div，在center上設定margin留出左右兩欄的空間，而且不在需要relative定位，沒有了最小寬度的限制

<style>
    .blue {
      background-color: blue;
    }
    .green {
      background-color: green;
    }
    .orange {
      background-color: orange;
    }
    div {
      height: 100px;
    }
    .left, .right {
      width: 100px;
      float: left;
    }
    .center {
      width: 100%;
      float: left;
    }
    .inner {
      margin: 0 100px;
    }
    .left {
      margin-left: -100%;
    }
    .right {
      margin-left: -100px;
    }
</style>
<body>
  <div class="center">
    <div class="inner green"></div>
  </div>
  <div class="left blue"></div>
  <div class="right orange"></div>
</body>
複製程式碼

相關文章