前端經常使用樣式總結

本文所有使用 scss + autoprefixer
Brower support: flex box(IE 10+), :before & :after IE 8+(IE8 only supports the single-colon)

Sticky footer

內容高度不夠時，footer 依然顯示到最下面
大概有這樣的 html 結構

<div id="content">
</div>
<div id="footer">&copy; Brook.inc</div>

• flex 佈局

  html {
    height: 100%;
  }
  $footer-height: 30px;
  body {
    min-height: 100%;
    display: flex;
    flex-direction: column;
  }
  #content {
    flex: 1;
  }
  
  #footer {
    line-height: $footer-height;
    text-align: center;
  }

查看 demo

• -margin & padding

  html, body {
    height: 100%;
  }
  $footer-height: 30px;
  #content {
    min-height: 100%;
    margin-bottom: -$footer-height;
    padding-bottom: $footer-height;
    // requires box-sizing: border-box;
    // 下面的不須要 border-box
    /*
    &::after {
      content: '';
      display: block;
      height: $footer-height; // footer height
    }
    */
  }
  
  #footer {
    line-height: $footer-height;
    text-align: center;
  }

查看 demo

absolute center

不定寬高的垂直水平居中

• 首先 flex

  .center-flex {
    display: flex;
    justify-content: center;
    align-items: center;
  }

• transform

  .center-transform {
    img {
      position: relative; left: 50%; top: 50%;
      transform: translate(-50%, -50%);
    }
  }

• table-cell

  .center-tb-cell {
    display: table-cell;
    text-align: center; vertical-align: middle;
  }

• :after，兼容性也不錯能夠，不想用 table-cell 時能夠用

  .center-ib {
    text-align: center;
    &::after {
      content: '';
      display: inline-block; vertical-align: middle;
      height: 100%;
    }
    img {
      vertical-align: middle;
    }
  }

垂直水平居中 demo

Cenerting float

居中浮動元素

.center-float {
  // 父容器會產生滾動條
  float: left; position: relative; left: 50%;
  > ul {
    position: relative; left: -50%;
  }
}

float 居中 demo

Autohiding scrollbars for IE

IE 自動隱藏滾動條 (works in Edge and IE10/11)

html {
  -ms-overflow-style: -ms-autohiding-scrollbar;
}

---

如下是針對移動端 (mobile)的

Tap highlight

點擊時高亮背景

.item {
  -webkit-tap-highlight-color: rgba(0,0,0,0); // 隱藏系統自帶的背景
  // add `ontouchstart` attribte on body
  // to allow :active work (if :active not work)
  &:active {
    background: #ECECEC
  }
}

只添加上面的樣式，:active 在移動端不必定（已經引入 zepto 的已經包含下面的 js 了）生效，須要下面的js

document.body.addEventListener('touchstart', function() {}, false);
// 也能夠直接在body上添加 `ontouchstart` 屬性，

Half pixel border

移動端半像素的邊框

• :after + scale(0.5) (能夠是某一到兩個邊，或者所有邊(支持圓角))

• svg background

• svg border-image
  查看 demo

Cells

移動端經常使用的 cells 佈局

查看微信我頁面 demo (cell + tap highlight + half pixel border)

smooth scroll in webkit

平滑滾動

-webkit-overflow-scrolling: touch;

原文地址：https://uedsky.com/2016-05/front-end-css-summary/獲取最佳閱讀體驗並參與討論，請訪問原文