【day5】關於CSS margin屬性

2019 iT 邦幫忙鐵人賽

DAY 4

自我挑戰組

CSS、JS-30天研究筆記系列第 5 篇

2019鐵人賽

Amy

2018-10-05 23:44:43

1027 瀏覽

分享至

一、特性：
1.支持負數值
2.一般情況下，對於元素的可視尺寸沒有影響
3.支持百分比值，且上下左右均是相對于父級的「寬度」計算。
4.某些情況下，margin-top和margin-bottom會重疊

二、應用(一)：利用margin-bottom實現分欄等高佈局
這在分欄且具背景色或分隔線的應用中很實用，原理是利用padding-bottom正值延伸高度、margin-bottom負值還原空間距離，必搭配父級設置overflow: hidden隱藏多餘的背景。

<style>
    .box {
     overflow: hidden;
    }
    .left-box,
    .right-box {
     margin-bottom: -999px;
     padding-bottom: 999px;
     width: 50%;
     float: left;
    } 
    .left-box{
      background-color: #ffa;
    }
    .right-box{
      background-color: #aaf;
    }
  </style>
<body>
  <div class="box">
    <div class="left-box">
      Compass Preprocessor, compiles .scss, .sass and refreshes page when file is compiled Less Preprocessor, compiles .less and refreshes page when file is compiled Sass Preprocessor, compiles .scss, .sass with the latest installed sass version and refreshes page when file is compiled CoffeeScript Preprocessor, compiles .coffee and refreshes page when file is compiled Simple Reload, refresh page when file is saved
Simple Reload with delay(400ms), wait 400ms then refresh page, when file is saved
    </div>
    <div class="right-box">
      Compass Preprocessor, compiles .scss, .sass and refreshes page when file is compiled Less Preprocessor, compiles .less and refreshes page when file is compiled
    </div>
  </div>
</body>

三、關於margin-top和margin-bottom重疊特性
Ａ：重疊情境：
1.相鄰兄弟元素
2.父級和第一個/最後一個子元素。
3.空塊級元素的 margin 合併。

Ｂ：避免重疊的方法：
1.設置border-top或border-bottom
2.設置padding -top或padding -bottom
3.裡面添加內聯元素（直接 Space 鍵空格是沒用的）；
4.設置 height 或者 min-height

Ｃ：重疊取值的規則：
1.正正取大值。
2.正負值相加。
3.負負取小值。