前端常用样式总结

brook

本文全部使用 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 布局

clipboard.png

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

smooth scroll in webkit

平滑滚动

-webkit-overflow-scrolling: touch;

原文地址:https://uedsky.com/2016-05/front-end-css-summary/
获取最佳阅读体验并参与讨论,请访问原文

阅读 4.2k

前端小站
CSS, javascript, gulp, front end, .etc

Front end developer v.12

3.1k 声望
55 粉丝
0 条评论

Front end developer v.12

3.1k 声望
55 粉丝
文章目录
宣传栏