月半圆儿丨TED

月半圆儿丨TED 查看完整档案

北京编辑北京信息科技大学  |  电子信息科学与技术 编辑北京世纪高通科技有限公司  |  前端开发工程师 编辑 huaban.com/rsnfg93qwa/ 编辑
编辑
_ | |__ _ _ __ _ | '_ \| | | |/ _` | | |_) | |_| | (_| | |_.__/ \__,_|\__, | |___/ 该用户太懒什么也没留下

个人动态

月半圆儿丨TED 关注了用户 · 2019-07-09

科瑞兹曼 @icrazyman

关注 4

月半圆儿丨TED 发布了文章 · 2019-07-08

Vue 项目功能实现:router 传递参数并解决刷新页面参数丢失问题

Vue Router 传参方式:

1. this.$router.push({ name: '模块名称', params: { // 各参数 } })

router.js:

export default new Router({
  routes: [
    {
      path: '/paramsPassingByRouter',
      component: ParamsPassingByRouter,
      children: [
        {
          path: 'paramsMode',
          name: 'paramsMode',
          component: ParamsMode
        }
      ]
    }
  ]
})

ParamsPassingByRouter.vue:

<!-- html -->
<button @click="paramsMode(testData)">params传参</button>

<!-- js -->
<script>
export default {
  data () {
    return {
      testData: {
        id: '20180101',
        name: '张三',
        aka: 'z3',
        age: '18'
      }
    }
  },
  methods: {
    paramsMode (data) {
      this.$router.push({
        name: 'paramsMode',
        params: data
      })
    }
  }
}
</script>

ParamsMode.vue:

<!-- html -->
<div class="params-mode">{{ testData }}</div>

<!-- js -->
<script>
export default {
  data () {
    return {
      testData: {}
    }
  },
  created () {
    this.testData = this.$route.params
  }
}
</script>

效果:

url:http://localhost:8081/#/paramsPassingByRouter/paramsMode
页面显示:{"id":"20180101","name":"张三","aka":"z3","age":"18"}

但是刷新页面后,数据会丢失,显示:{}。

2. this.$router.push({ name: '模块名称', query: { // 各参数 } })

router.js:

export default new Router({
  routes: [
    {
      path: '/paramsPassingByRouter',
      component: ParamsPassingByRouter,
      children: [
        {
          path: 'queryMode',
          name: 'queryMode',
          component: QueryMode
        }
      ]
    }
  ]
})

ParamsPassingByRouter.vue:

<!-- html -->
<button @click="queryMode(testData)">query传参</button>

<!-- js -->
<script>
export default {
  data () {
    return {
      testData: {
        id: '20180101',
        name: '张三',
        aka: 'z3',
        age: '18'
      }
    }
  },
  methods: {
    queryMode (data) {
      this.$router.push({
        name: 'paramsMode',
        query: data
      })
    }
  }
}
</script>

QueryMode.vue:

<!-- html -->
<div class="query-mode">{{ testData }}</div>

<!-- js -->
<script>
export default {
  data () {
    return {
      testData: {}
    }
  },
  created () {
    this.testData = this.$route.query
  }
}
</script>

效果:

url:http://localhost:8081/#/paramsPassingByRouter/queryMode?id=20180101&name=%E5%BC%A0%E4%B8%89&aka=z3&age=18
页面显示:{"id":"20180101","name":"张三","aka":"z3","age":"18"}

刷新页面后,数据不会丢失。

解决刷新页面数据丢失的方案:

  1. 使用 this.$router.push({ name: '模块名称', query: { // 各参数 } }) 方式传参。

    缺点:参数值都拼接在 url 上,url 会很长,同时都可被看到。
  2. this.$router.push({ name: '模块名称', params: { // 各参数 } }) 路由文件设置的时候把参数拼到 url 里。

    url:http://localhost:8081/#/paramsPassingByRouter/paramsMode/20180101/%E5%BC%A0%E4%B8%89/z3/18
    缺点:同上。
  3. 1 和 2 结合使用:this.$router.push({ name: '模块名称', params: { // 各参数 }, query: { // 各参数 } })
  4. 老老实实的用 localStorage 存储。

    url: http://localhost:8081/#/paramsPassingByRouter/paramsMode/z3
    可以与 params 和 query 方式配合使用,可以暴露的参数显示在 url 上,同时刷新参数也不会丢失。
    销毁页面的时候把 localStorage 存储的内容清除。
    // router.js
    {
      path: 'paramsMode/:aka',
      name: 'paramsMode',
      component: ParamsMode
    }
    
    <!-- ParamsMode.vue 修改 -->
    <script>
    export default {
      data () {
        return {
          testData: {}
        }
      },
      created () {
        const tempData = localStorage.getItem('tempData')
        if (tempData) {
          this.testData = JSON.parse(tempData)
        } else {
          this.testData = this.$route.params
    
          localStorage.setItem('tempData', JSON.stringify(this.$route.params))
        }
      },
      beforeDestroy () {
        localStorage.removeItem('tempData')
      }
    }
    </script>
查看原文

赞 14 收藏 10 评论 4

月半圆儿丨TED 发布了文章 · 2019-07-01

Vue 项目功能实现:刷新当前页面

前言

前些日子项目中突然接到了一个需求,要求点击当前路由刷新页面,进过实验有如下几种方案可实现需求,并简述不同。

1. this.$router.go(0)

此方式是利用了 history 中前进和后退的功能,传入 0 刷新当前页面。
缺点:页面整个刷新,会白屏。

2. location.reload()

直接使用刷新当前页面的方法。
缺点:同 this.$router.go(0) 一样,会白屏。

3. 给 router-view 标签添加 v-if

通过 $nextTick(),协助实现。先把 <router-view /> 移除,移除后再重新添加,达到刷新当前页面的功能。是目前最合适的实现方式。

<!-- html -->
<router-link :to="url" @click.native="refreshView">页面</router-link>
<router-view v-if="showView"/>

<!-- js -->
<script>
export default {
  data () {
    return {
      showView: true // 用于点击当前页的router时,刷新当前页
    }
  },
  methods: {
    refreshView () {
      this.showView = false // 通过v-if移除router-view节点
      this.$nextTick(() => {
        this.showView = true // DOM更新后再通过v-if添加router-view节点
      })
    }
  }
}
</script>
查看原文

赞 22 收藏 14 评论 4

月半圆儿丨TED 发布了文章 · 2019-06-23

CSS 布局:如何实现居中布局?

1. 父级容器设置成表格,子级设为行内元素。

适合子级内容为文本展示。

图片描述

<!-- css -->
<style>
    #parent {
        height: 200px;
        width: 200px;
        border: 1px solid red;

        display: table-cell;    /* 转变成表格 */
        text-align: center;     /* 水平 */
        vertical-align: middle; /* 垂直 */
    }
    #child {
        background-color: blue;
        color: white;

        display: inline;        /* 子元素设置为行内或行内块 */
    }
</style>

<!-- html -->
<div id="parent">
    <div id="child">内容</div>
</div>

2. 父级容器设置相对定位,子级设置绝对定位后通过外边距居中。

图片描述

<!-- css -->
<style>
    #parent {
        height: 200px;
        width: 200px;
        border: 1px solid red;

        position: relative;     /* 设置相对定位 */
    }
    #child {
        height: 50px;
        width: 50px;
        color: white;
        background-color: blue;

        /* 绝对定位,4 个方向设置为 0 后,margin 设为 auto */
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
    }
</style>

<!-- html -->
<div id="parent">
    <div id="child"></div>
</div>

3. 父级容器设置为弹性盒,子级设置外边距。

图片描述

<!-- css -->
<style>
    #parent {
        height: 200px;
        width: 200px;
        border: 1px solid red;

        display: flex;          /* 父元素转换为弹性盒 */
        display: -webkit-flex;  /* Safari */
    }
    #child {
        height: 50px;
        width: 50px;
        background-color: blue;

        margin: auto;
    }
</style>

<!-- html -->
<div id="parent">
    <div id="child"></div>
</div>

4. 父级容器设置相对定位,子级设置绝对定位,左边距和上边距设置负一半宽度。

适合子级的宽高固定的情况。

图片描述

<!-- css -->
<style>
    #parent {
        height: 200px;
        width: 200px;
        border: 1px solid red;

        position: relative;     /* 设置相对定位 */
    }
    #child {                      /* 子元素已知自身宽高的情况下 */
        background-color: blue;

        width: 50px;
        height: 50px;
        margin-top: -25px;
        margin-left: -25px;
        position: absolute;
        left: 50%;
        top: 50%;
    }
</style>

<!-- html -->
<div id="parent">
    <div id="child"></div>
</div>

5. 父级容器设置相对定位,子级设置绝对定位,通过变形属性设置水平和垂直方向负一半。

适合子级的宽高不固定的情况。

图片描述

<!-- css -->
<style>
    #parent {
        height: 200px;
        width: 200px;
        border: 1px solid red;

        position: relative;     /* 设置相对定位 */
    }
    #child {                      /* 子元素未知自己的宽高,使用 transform 的 translate */
        border: 1px solid blue;

        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
        -o-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
    }
</style>

<!-- html -->
<div id="parent">
    <div id="child">
        <div id="content">
            内容1
            <br/>
            内容2
        </div>
    </div>
</div>

6. 父级设置为弹性盒,设置对齐属性。

图片描述

<!-- css -->
<style>
    #parent {
        height: 200px;
        width: 200px;
        border: 1px solid red;

        display: flex;          /* 父元素转换为弹性盒 */
        display: -webkit-flex;  /* Safari */
        justify-content: center;/* 水平 */
        align-items: center;    /* 垂直 */
    }
    #child {
        height: 50px;
        width: 50px;
        background-color: blue;
    }
</style>

<!-- html -->
<div id="parent">
    <div id="child"></div>
</div>
查看原文

赞 19 收藏 14 评论 0

月半圆儿丨TED 发布了文章 · 2019-06-15

Vue 项目功能实现:Element UI 表格内容格式化方案

前言

Vue 项目中经常遇到表格内容要根据接口数据格式化展示,比如:接口返回时间戳格式 1560565657109,表格要展示为 '2019.06.15 10:27:37'。下面介绍3种格式化数据的方案并简述其使用场景,希望帮助大家在项目中可以准确定位快速开发。

1. 表格列属性 formatter

当只需要对数值改变的情况时,可通过 element-ui 表格列属性 formatter 直接实现。

<!-- html -->
<template>
    <el-table ref="table"
        :data="data"
        fit
        stripe>
        <el-table-column prop="name"
            label="姓名"
        ></el-table-column>
        <el-table-column prop="height"
            label="身高(cm)"
        ></el-table-column>
        <el-table-column prop="weight"
            label="体重(kg)"
        ></el-table-column>
        <el-table-column label="BMI"
            :formatter="bmiFormatter"
        ></el-table-column>
    </el-table>
</template>

<!-- js -->
<script>
export default {
    data () {
        return {
            data: [{
                name: '张三',
                height: '160',
                weight: '80'
            }, {
                name: '李四',
                height: '176',
                weight: '65'
            }]
        }
    },
    methods: {
        bmiFormatter (row, column, cellValue, index) {
            // row: 行数据
            // column: 列属性
            // cellValue: 单元格数据值
            // index: 行索引,注意:2.3.9版本以后才有。
            return (row.weight / Math.pow((row.height / 100), 2)).toFixed(1)
        }
    }
}
</script>

图片描述

2. 标签 template

当表格内容根据接口数据需要进行颜色等样式上改变时,需要借助 <template slot-scope="scope"></template> 来实现。

<!-- html -->
<template>
    <el-table ref="table"
        :data="data"
        fit
        stripe>
        <el-table-column prop="name"
            label="姓名"
        ></el-table-column>
        <el-table-column label="成绩">
            <template slot-scope="scope">
                <span :style="{
                    'color': scope.row.scores >= 60 ? 'green' : 'red'
                }">
                    {{ scope.row.scores }}
                </span>
            </template>
        </el-table-column>
    </el-table>
</template>

<!-- js -->
<script>
export default {
    data () {
        return {
            data: [{
                name: '王朝',
                scores: '86'
            }, {
                name: '马汉',
                scores: '59'
            }]
        }
    }
}
</script>

图片描述

3. 标签 template 配合和过滤器 filters

当表格内容急需要数据上的转换又需要样式改变时,需要 <template slot-scope="scope"></template> 和 Vue 的过滤器 filters 搭配实现。

<!-- html -->
<template>
    <el-table ref="table"
        :data="data"
        fit
        stripe>
        <el-table-column prop="name"
            label="姓名"
        ></el-table-column>
        <el-table-column label="性别">
            <template slot-scope="scope">
                <span :style="{
                    'color': scope.row.gender === 'male' ? 'blue' : 'red'
                }">
                    {{ scope.row.gender | genderFormatter }}
                </span>
            </template>
        </el-table-column>
    </el-table>
</template>

<!-- js -->
<script>
export default {
    data () {
        return {
            data: [{
                name: '李雷',
                gender: 'male'
            }, {
                name: '韩梅梅',
                gender: 'female'
            }]
        }
    },
    filters: {
        genderFormatter (gender) {
            const map = {
                male: '♂',
                female: '♀'
            }
            return map[gender]
        }
    }
}
</script>

图片描述

查看原文

赞 0 收藏 0 评论 0

月半圆儿丨TED 发布了文章 · 2019-06-15

Vue 项目功能实现:Element UI 表格内容格式化方案

前言

Vue 项目中经常遇到表格内容要根据接口数据格式化展示,比如:接口返回时间戳格式 1560565657109,表格要展示为 '2019.06.15 10:27:37'。下面介绍3种格式化数据的方案并简述其使用场景,希望帮助大家在项目中可以准确定位快速开发。

1. 表格列属性 formatter

当只需要对数值改变的情况时,可通过 element-ui 表格列属性 formatter 直接实现。

<!-- html -->
<template>
    <el-table ref="table"
        :data="data"
        fit
        stripe>
        <el-table-column prop="name"
            label="姓名"
        ></el-table-column>
        <el-table-column prop="height"
            label="身高(cm)"
        ></el-table-column>
        <el-table-column prop="weight"
            label="体重(kg)"
        ></el-table-column>
        <el-table-column label="BMI"
            :formatter="bmiFormatter"
        ></el-table-column>
    </el-table>
</template>

<!-- js -->
<script>
export default {
    data () {
        return {
            data: [{
                name: '张三',
                height: '160',
                weight: '80'
            }, {
                name: '李四',
                height: '176',
                weight: '65'
            }]
        }
    },
    methods: {
        bmiFormatter (row, column, cellValue, index) {
            // row: 行数据
            // column: 列属性
            // cellValue: 单元格数据值
            // index: 行索引,注意:2.3.9版本以后才有。
            return (row.weight / Math.pow((row.height / 100), 2)).toFixed(1)
        }
    }
}
</script>

图片描述

2. 标签 template

当表格内容根据接口数据需要进行颜色等样式上改变时,需要借助 <template slot-scope="scope"></template> 来实现。

<!-- html -->
<template>
    <el-table ref="table"
        :data="data"
        fit
        stripe>
        <el-table-column prop="name"
            label="姓名"
        ></el-table-column>
        <el-table-column label="成绩">
            <template slot-scope="scope">
                <span :style="{
                    'color': scope.row.scores >= 60 ? 'green' : 'red'
                }">
                    {{ scope.row.scores }}
                </span>
            </template>
        </el-table-column>
    </el-table>
</template>

<!-- js -->
<script>
export default {
    data () {
        return {
            data: [{
                name: '王朝',
                scores: '86'
            }, {
                name: '马汉',
                scores: '59'
            }]
        }
    }
}
</script>

图片描述

3. 标签 template 配合和过滤器 filters

当表格内容急需要数据上的转换又需要样式改变时,需要 <template slot-scope="scope"></template> 和 Vue 的过滤器 filters 搭配实现。

<!-- html -->
<template>
    <el-table ref="table"
        :data="data"
        fit
        stripe>
        <el-table-column prop="name"
            label="姓名"
        ></el-table-column>
        <el-table-column label="性别">
            <template slot-scope="scope">
                <span :style="{
                    'color': scope.row.gender === 'male' ? 'blue' : 'red'
                }">
                    {{ scope.row.gender | genderFormatter }}
                </span>
            </template>
        </el-table-column>
    </el-table>
</template>

<!-- js -->
<script>
export default {
    data () {
        return {
            data: [{
                name: '李雷',
                gender: 'male'
            }, {
                name: '韩梅梅',
                gender: 'female'
            }]
        }
    },
    filters: {
        genderFormatter (gender) {
            const map = {
                male: '♂',
                female: '♀'
            }
            return map[gender]
        }
    }
}
</script>

图片描述

查看原文

赞 0 收藏 0 评论 0

月半圆儿丨TED 收藏了文章 · 2019-05-06

讲讲PWA

一、背景

文章2017 前端大事件和趋势回顾,2018 何去何从?中提到了2017年前端值得关注的十大事件,其中就提到了PWA。

大家都知道Native app体验确实很好,下载到手机上之后入口也方便。它也有一些缺点:

  • 开发成本高(ios和安卓)
  • 软件上线需要审核
  • 版本更新需要将新版本上传到不同的应用商店
  • 想使用一个app就必须去下载才能使用,即使是偶尔需要使用一下下

而web网页开发成本低,网站更新时上传最新的资源到服务器即可,用手机带的浏览器打开就可以使用。但是除了体验上比Native app还是差一些,还有一些明显的缺点

  • 手机桌面入口不够便捷,想要进入一个页面必须要记住它的url或者加入书签
  • 没网络就没响应,不具备离线能力
  • 不像APP一样能进行消息推送

那么什么是PWA呢?

二、What's PWA?

PWA全称Progressive Web App,即渐进式WEB应用。

一个 PWA 应用首先是一个网页, 可以通过 Web 技术编写出一个网页应用. 随后添加上 App Manifest 和 Service Worker 来实现 PWA 的安装和离线等功能
解决了哪些问题?

  • 可以添加至主屏幕,点击主屏幕图标可以实现启动动画以及隐藏地址栏
  • 实现离线缓存功能,即使用户手机没有网络,依然可以使用一些离线功能
  • 实现了消息推送

它解决了上述提到的问题,这些特性将使得 Web 应用渐进式接近原生 App。

三、PWA的实现

3.1 Manifest实现添加至主屏幕

index.html

<head>
  <title>Minimal PWA</title>
  <meta name="viewport" content="width=device-width, user-scalable=no" />
  <link rel="manifest" href="manifest.json" />
  <link rel="stylesheet" type="text/css" href="main.css">
  <link rel="icon" href="/e.png" type="image/png" />
</head>

manifest.json

{
  "name": "Minimal PWA", // 必填 显示的插件名称
  "short_name": "PWA Demo", // 可选  在APP launcher和新的tab页显示,如果没有设置,则使用name
  "description": "The app that helps you understand PWA", //用于描述应用
  "display": "standalone", // 定义开发人员对Web应用程序的首选显示模式。standalone模式会有单独的
  "start_url": "/", // 应用启动时的url
  "theme_color": "#313131", // 桌面图标的背景色
  "background_color": "#313131", // 为web应用程序预定义的背景颜色。在启动web应用程序和加载应用程序的内容之间创建了一个平滑的过渡。
  "icons": [ // 桌面图标,是一个数组
    {
    "src": "icon/lowres.webp",
    "sizes": "48x48",  // 以空格分隔的图片尺寸
    "type": "image/webp"  // 帮助userAgent快速排除不支持的类型
  },
  {
    "src": "icon/lowres",
    "sizes": "48x48"
  },
  {
    "src": "icon/hd_hi.ico",
    "sizes": "72x72 96x96 128x128 256x256"
  },
  {
    "src": "icon/hd_hi.svg",
    "sizes": "72x72"
  }
  ]
}
Manifest参考文档:https://developer.mozilla.org/zh-CN/docs/Web/Manifest

可以打开网站https://developers.google.cn/web/showcase/2015/chrome-dev-summit查看添加至主屏幕的动图。

如果用的是安卓手机,可以下载chrome浏览器自己操作看看

3.2 service worker实现离线缓存

3.2.1 什么是service worker

Service Worker 是 Chrome 团队提出和力推的一个 WEB API,用于给 web 应用提供高级的可持续的后台处理能力。

Service Workers 就像介于服务器和网页之间的拦截器,能够拦截进出的HTTP 请求,从而完全控制你的网站。

最主要的特点

  • 在页面中注册并安装成功后,运行于浏览器后台,不受页面刷新的影响,可以监听和截拦作用域范围内所有页面的 HTTP 请求。
  • 网站必须使用 HTTPS。除了使用本地开发环境调试时(如域名使用 localhost)
  • 运行于浏览器后台,可以控制打开的作用域范围下所有的页面请求
  • 单独的作用域范围,单独的运行环境和执行线程
  • 不能操作页面 DOM。但可以通过事件机制来处理
  • 事件驱动型服务线程
为什么要求网站必须是HTTPS的,大概是因为service worker权限太大能拦截所有页面的请求吧,如果http的网站安装service worker很容易被攻击

浏览器支持情况

浏览器支持情况详见: https://caniuse.com/#feat=serviceworkers

生命周期

当用户首次导航至 URL 时,服务器会返回响应的网页。

  • 第1步:当你调用 register() 函数时, Service Worker 开始下载。
  • 第2步:在注册过程中,浏览器会下载、解析并执行 Service Worker ()。如果在此步骤中出现任何错误,register() 返回的 promise 都会执行 reject 操作,并且 Service Worker 会被废弃。
  • 第3步:一旦 Service Worker 成功执行了,install 事件就会激活
  • 第4步:安装完成,Service Worker 便会激活,并控制在其范围内的一切。如果生命周期中的所有事件都成功了,Service Worker 便已准备就绪,随时可以使用了!
chrome://serviceworker-internals 来了解当前浏览器中所有已安装Service Worker的详细情况

3.2.2 HTTP缓存与service worker缓存

  • HTTP缓存

Web 服务器可以使用 Expires 首部来通知 Web 客户端,它可以使用资源的当前副本,直到指定的“过期时间”。反过来,浏览器可以缓存此资源,并且只有在有效期满后才会再次检查新版本。
使用 HTTP 缓存意味着你要依赖服务器来告诉你何时缓存资源和何时过期。

  • service worker缓存

Service Workers 的强大在于它们拦截 HTTP 请求的能力
进入任何传入的 HTTP 请求,并决定想要如何响应。在你的 Service Worker 中,可以编写逻辑来决定想要缓存的资源,以及需要满足什么条件和资源需要缓存多久。一切尽归你掌控!

3.2.3 实现离线缓存

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello Caching World!</title>
  </head>
  <body>
    <!-- Image -->
    <img data-original="/images/hello.png" />                 
    <!-- JavaScript -->
    <script async data-original="/js/script.js"></script>     
    <script>
      // 注册 service worker
      if ('serviceWorker' in navigator) {           
        navigator.serviceWorker.register('/service-worker.js', {scope: '/'}).then(function (registration) {
          // 注册成功
          console.log('ServiceWorker registration successful with scope: ', registration.scope);
        }).catch(function (err) {                   
          // 注册失败 :(
          console.log('ServiceWorker registration failed: ', err);
        });
      }
    </script>
  </body>
</html>
注:Service Worker 的注册路径决定了其 scope 默认作用页面的范围。
如果 service-worker.js 是在 /sw/ 页面路径下,这使得该 Service Worker 默认只会收到 页面/sw/ 路径下的 fetch 事件。
如果存放在网站的根路径下,则将会收到该网站的所有 fetch 事件。
如果希望改变它的作用域,可在第二个参数设置 scope 范围。示例中将其改为了根目录,即对整个站点生效。

service-worker.js

var cacheName = 'helloWorld';     // 缓存的名称  
// install 事件,它发生在浏览器安装并注册 Service Worker 时        
self.addEventListener('install', event => { 
/* event.waitUtil 用于在安装成功之前执行一些预装逻辑
 但是建议只做一些轻量级和非常重要资源的缓存,减少安装失败的概率
 安装成功后 ServiceWorker 状态会从 installing 变为 installed */
  event.waitUntil(
    caches.open(cacheName)                  
    .then(cache => cache.addAll([    // 如果所有的文件都成功缓存了,便会安装完成。如果任何文件下载失败了,那么安装过程也会随之失败。        
      '/js/script.js',
      '/images/hello.png'
    ]))
  );
});
  
/**
为 fetch 事件添加一个事件监听器。接下来,使用 caches.match() 函数来检查传入的请求 URL 是否匹配当前缓存中存在的任何内容。如果存在的话,返回缓存的资源。
如果资源并不存在于缓存当中,通过网络来获取资源,并将获取到的资源添加到缓存中。
*/
self.addEventListener('fetch', function (event) {
  event.respondWith(
    caches.match(event.request)                  
    .then(function (response) {
      if (response) {                            
        return response;                         
      }
      var requestToCache = event.request.clone();  //          
      return fetch(requestToCache).then(                   
        function (response) {
          if (!response || response.status !== 200) {      
            return response;
          }
          var responseToCache = response.clone();          
          caches.open(cacheName)                           
            .then(function (cache) {
              cache.put(requestToCache, responseToCache);  
            });
          return response;             
    })
  );
});
注:为什么用request.clone()和response.clone()
需要这么做是因为request和response是一个流,它只能消耗一次。因为我们已经通过缓存消耗了一次,然后发起 HTTP 请求还要再消耗一次,所以我们需要在此时克隆请求
Clone the request—a request is a stream and can only be consumed once.

3.2.4 调试相关

chrome浏览器打开https://googlechrome.github.io/samples/service-worker/basic/index.html,这是一个实现了service worker离线缓存功能的网站,打开调试工具

介绍一个图中的1.和2.

  1. 勾选可以模拟网站离线情况,勾选后network会有一个黄色警告图标,该网站已经离线。此时刷新页面,页面仍然能够正常显示
  2. 当前service worker的scope。它能够拦截https://googlechrome.github.i...,同样也能够拦截https://googlechrome.github.i...*/*.html下的请求
调试面板具体代表的什么参看https://x5.tencent.com/tbs/guide/serviceworker.html的第三部分

3.3 serice worker实现消息推送

  • 步骤一、提示用户并获得他们的订阅详细信息
  • 步骤二、将这些详细信息保存在服务器上
  • 步骤三、在需要时发送任何消息
不同浏览器需要用不同的推送消息服务器。以 Chrome 上使用 Google Cloud Messaging<GCM> 作为推送服务为例,第一步是注册 applicationServerKey(通过 GCM 注册获取),并在页面上进行订阅或发起订阅。每一个会话会有一个独立的端点(endpoint),订阅对象的属性(PushSubscription.endpoint) 即为端点值。将端点发送给服务器后,服务器用这一值来发送消息给会话的激活的 Service Worker (通过 GCM 与浏览器客户端沟通)。

步骤一和步骤二
index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Progressive Times</title>
    <link rel="manifest" href="/manifest.json">                                      
  </head>
  <body>
    <script>
      var endpoint;
      var key;
      var authSecret;
      var vapidPublicKey = 'BAyb_WgaR0L0pODaR7wWkxJi__tWbM1MPBymyRDFEGjtDCWeRYS9EF7yGoCHLdHJi6hikYdg4MuYaK0XoD0qnoY';
      // 方法很复杂,但是可以不用具体看,知识用来转化vapidPublicKey用
      function urlBase64ToUint8Array(base64String) {                                  
        const padding = '='.repeat((4 - base64String.length % 4) % 4);
        const base64 = (base64String + padding)
          .replace(/\-/g, '+')
          .replace(/_/g, '/');
        const rawData = window.atob(base64);
        const outputArray = new Uint8Array(rawData.length);
        for (let i = 0; i < rawData.length; ++i) {
          outputArray[i] = rawData.charCodeAt(i);
        }
        return outputArray;
      }
      if ('serviceWorker' in navigator) {
        navigator.serviceWorker.register('sw.js').then(function (registration) {
          return registration.pushManager.getSubscription()                            
            .then(function (subscription) {
              if (subscription) {                                                      
                return;
              }
              return registration.pushManager.subscribe({                              
                  userVisibleOnly: true,
                  applicationServerKey: urlBase64ToUint8Array(vapidPublicKey)
                })
                .then(function (subscription) {
                  var rawKey = subscription.getKey ? subscription.getKey('p256dh') : '';
                  key = rawKey ? btoa(String.fromCharCode.apply(null, new Uint8Array(rawKey))) : '';
                  var rawAuthSecret = subscription.getKey ? subscription.getKey('auth') : '';
                  authSecret = rawAuthSecret ?
                    btoa(String.fromCharCode.apply(null, new Uint8Array(rawAuthSecret))) : '';
                  endpoint = subscription.endpoint;
                  return fetch('./register', {                                         
                    method: 'post',
                    headers: new Headers({
                      'content-type': 'application/json'
                    }),
                    body: JSON.stringify({
                      endpoint: subscription.endpoint,
                      key: key,
                      authSecret: authSecret,
                    }),
                  });
                });
            });
        }).catch(function (err) {
          // 注册失败 :(
          console.log('ServiceWorker registration failed: ', err);
        });
      }
    </script>
  </body>
</html>

步骤三 服务器发送消息给service worker

app.js

const webpush = require('web-push');                 
const express = require('express');
var bodyParser = require('body-parser');
const app = express();
webpush.setVapidDetails(                             
  'mailto:contact@deanhume.com',
  'BAyb_WgaR0L0pODaR7wWkxJi__tWbM1MPBymyRDFEGjtDCWeRYS9EF7yGoCHLdHJi6hikYdg4MuYaK0XoD0qnoY',
  'p6YVD7t8HkABoez1CvVJ5bl7BnEdKUu5bSyVjyxMBh0'
);
app.post('/register', function (req, res) {           
  var endpoint = req.body.endpoint;
  saveRegistrationDetails(endpoint, key, authSecret); 
  const pushSubscription = {                          
    endpoint: req.body.endpoint,
    keys: {
      auth: req.body.authSecret,
      p256dh: req.body.key
    }
  };
  var body = 'Thank you for registering';
  var iconUrl = 'https://example.com/images/homescreen.png';
  // 发送 Web 推送消息
  webpush.sendNotification(pushSubscription,          
      JSON.stringify({
        msg: body,
        url: 'http://localhost:3111/',
        icon: iconUrl
      }))
    .then(result => res.sendStatus(201))
    .catch(err => {
      console.log(err);
    });
});
app.listen(3111, function () {
  console.log('Web push app listening on port 3111!')
});

service worker监听push事件,将通知详情推送给用户

service-worker.js

self.addEventListener('push', function (event) {
 // 检查服务端是否发来了任何有效载荷数据
  var payload = event.data ? JSON.parse(event.data.text()) : 'no payload';
  var title = 'Progressive Times';
  event.waitUntil(
    // 使用提供的信息来显示 Web 推送通知
    self.registration.showNotification(title, {                           
      body: payload.msg,
      url: payload.url,
      icon: payload.icon
    })
  );
});
扩展知识:service worker的更新

总结

PWA的优势

  • 可以将app的快捷方式放置到桌面上,全屏运行,与原生app无异
  • 能够在各种网络环境下使用,包括网络差和断网条件下,不会显示undefind
  • 推送消息的能力
  • 其本质是一个网页,没有原生app的各种启动条件,快速响应用户指令

PWA存在的问题

  • 支持率不高:现在ios手机端不支持pwa,IE也暂时不支持
  • Chrome在中国桌面版占有率还是不错的,安卓移动端上的占有率却很低
  • 各大厂商还未明确支持pwa
  • 依赖的GCM服务在国内无法使用
  • 微信小程序的竞争

尽管有上述的一些缺点,PWA技术仍然有很多可以使用的点。

  • service worker技术实现离线缓存,可以将一些不经常更改的静态文件放到缓存中,提升用户体验。
  • service worker实现消息推送,使用浏览器推送功能,吸引用户
  • 渐进式开发,尽管一些浏览器暂时不支持,可以利用上述技术给使用支持浏览器的用户带来更好的体验。

参考文档

查看原文

月半圆儿丨TED 关注了用户 · 2018-09-28

Nine @nine_59f82397ef519

js、css、html,啥都不会的前端!

关注 1558

月半圆儿丨TED 收藏了文章 · 2018-09-21

CSS实现水平垂直居中的1010种方式(史上最全)

划重点,这是一道面试必考题,很多面试官都喜欢问这个问题,我就被问过好几次了

image.png

要实现上图的效果看似很简单,实则暗藏玄机,本文总结了一下CSS实现水平垂直居中的方式大概有下面这些,本文将逐一介绍一下,我将本文整理成了一个github仓库,欢迎大家star

仅居中元素定宽高适用

  • absolute + 负margin
  • absolute + margin auto
  • absolute + calc

居中元素不定宽高

  • absolute + transform
  • lineheight
  • writing-mode
  • table
  • css-table
  • flex
  • grid

absolute + 负margin

为了实现上面的效果先来做些准备工作,假设HTML代码如下,总共两个元素,父元素和子元素

<div class="wp">
    <div class="box size">123123</div>
</div>

wp是父元素的类名,box是子元素的类名,因为有定宽和不定宽的区别,size用来表示指定宽度,下面是所有效果都要用到的公共代码,主要是设置颜色和宽高

注意:后面不在重复这段公共代码,只会给出相应提示

/* 公共代码 */
.wp {
    border: 1px solid red;
    width: 300px;
    height: 300px;
}

.box {
    background: green;    
}

.box.size{
    width: 100px;
    height: 100px;
}
/* 公共代码 */

绝对定位的百分比是相对于父元素的宽高,通过这个特性可以让子元素的居中显示,但绝对定位是基于子元素的左上角,期望的效果是子元素的中心居中显示

为了修正这个问题,可以借助外边距的负值,负的外边距可以让元素向相反方向定位,通过指定子元素的外边距为子元素宽度一半的负值,就可以让子元素居中了,css代码如下

/* 此处引用上面的公共代码 */
/* 此处引用上面的公共代码 */

/* 定位代码 */
.wp {
    position: relative;
}
.box {
    position: absolute;;
    top: 50%;
    left: 50%;
    margin-left: -50px;
    margin-top: -50px;
}

这是我比较常用的方式,这种方式比较好理解,兼容性也很好,缺点是需要知道子元素的宽高

点击查看完整DEMO

absolute + margin auto

这种方式也要求居中元素的宽高必须固定,HTML代码如下

<div class="wp">
    <div class="box size">123123</div>
</div>

这种方式通过设置各个方向的距离都是0,此时再讲margin设为auto,就可以在各个方向上居中了

/* 此处引用上面的公共代码 */
/* 此处引用上面的公共代码 */

/* 定位代码 */
.wp {
    position: relative;
}
.box {
    position: absolute;;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

这种方法兼容性也很好,缺点是需要知道子元素的宽高

点击查看完整DEMO

absolute + calc

这种方式也要求居中元素的宽高必须固定,所以我们为box增加size类,HTML代码如下

<div class="wp">
    <div class="box size">123123</div>
</div>

感谢css3带来了计算属性,既然top的百分比是基于元素的左上角,那么在减去宽度的一半就好了,代码如下

/* 此处引用上面的公共代码 */
/* 此处引用上面的公共代码 */

/* 定位代码 */
.wp {
    position: relative;
}
.box {
    position: absolute;;
    top: calc(50% - 50px);
    left: calc(50% - 50px);
}

这种方法兼容性依赖calc的兼容性,缺点是需要知道子元素的宽高

点击查看完整DEMO

absolute + transform

还是绝对定位,但这个方法不需要子元素固定宽高,所以不再需要size类了,HTML代码如下

<div class="wp">
    <div class="box">123123</div>
</div>

修复绝对定位的问题,还可以使用css3新增的transform,transform的translate属性也可以设置百分比,其是相对于自身的宽和高,所以可以讲translate设置为-50%,就可以做到居中了,代码如下

/* 此处引用上面的公共代码 */
/* 此处引用上面的公共代码 */

/* 定位代码 */
.wp {
    position: relative;
}
.box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

这种方法兼容性依赖translate2d的兼容性

点击查看完整DEMO

lineheight

利用行内元素居中属性也可以做到水平垂直居中,HTML代码如下

<div class="wp">
    <div class="box">123123</div>
</div>

把box设置为行内元素,通过text-align就可以做到水平居中,但很多同学可能不知道通过通过vertical-align也可以在垂直方向做到居中,代码如下

/* 此处引用上面的公共代码 */
/* 此处引用上面的公共代码 */

/* 定位代码 */
.wp {
    line-height: 300px;
    text-align: center;
    font-size: 0px;
}
.box {
    font-size: 16px;
    display: inline-block;
    vertical-align: middle;
    line-height: initial;
    text-align: left; /* 修正文字 */
}

这种方法需要在子元素中将文字显示重置为想要的效果

点击查看完整DEMO

writing-mode

很多同学一定和我一样不知道writing-mode属性,感谢@张鑫旭老师的反馈,简单来说writing-mode可以改变文字的显示方向,比如可以通过writing-mode让文字的显示变为垂直方向

<div class="div1">水平方向</div>
<div class="div2">垂直方向</div>
.div2 {
    writing-mode: vertical-lr;
}

显示效果如下:

水平方向
垂
直
方
向

更神奇的是所有水平方向上的css属性,都会变为垂直方向上的属性,比如text-align,通过writing-modetext-align就可以做到水平和垂直方向的居中了,只不过要稍微麻烦一点

<div class="wp">
    <div class="wp-inner">
        <div class="box">123123</div>
    </div>
</div>
/* 此处引用上面的公共代码 */
/* 此处引用上面的公共代码 */

/* 定位代码 */
.wp {
    writing-mode: vertical-lr;
    text-align: center;
}
.wp-inner {
    writing-mode: horizontal-tb;
    display: inline-block;
    text-align: center;
    width: 100%;
}
.box {
    display: inline-block;
    margin: auto;
    text-align: left;
}

这种方法实现起来和理解起来都稍微有些复杂

点击查看完整DEMO

table

曾经table被用来做页面布局,现在没人这么做了,但table也能够实现水平垂直居中,但是会增加很多冗余代码

<table>
    <tbody>
        <tr>
            <td class="wp">
                <div class="box">123123</div>
            </td>
        </tr>
    </tbody>
</table>

tabel单元格中的内容天然就是垂直居中的,只要添加一个水平居中属性就好了

.wp {
    text-align: center;
}
.box {
    display: inline-block;
}

这种方法就是代码太冗余,而且也不是table的正确用法

点击查看完整DEMO

css-table

css新增的table属性,可以让我们把普通元素,变为table元素的现实效果,通过这个特性也可以实现水平垂直居中

<div class="wp">
    <div class="box">123123</div>
</div>

下面通过css属性,可以让div显示的和table一样

.wp {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.box {
    display: inline-block;
}

这种方法和table一样的原理,但却没有那么多冗余代码,兼容性也还不错

点击查看完整DEMO

flex

flex作为现代的布局方案,颠覆了过去的经验,只需几行代码就可以优雅的做到水平垂直居中

<div class="wp">
    <div class="box">123123</div>
</div>
.wp {
    display: flex;
    justify-content: center;
    align-items: center;
}

目前在移动端已经完全可以使用flex了,PC端需要看自己业务的兼容性情况

点击查看完整DEMO

grid

感谢@一丝姐 反馈的这个方案,css新出的网格布局,由于兼容性不太好,一直没太关注,通过grid也可以实现水平垂直居中

<div class="wp">
    <div class="box">123123</div>
</div>
.wp {
    display: grid;
}
.box {
    align-self: center;
    justify-self: center;
}

代码量也很少,但兼容性不如flex,不推荐使用

点击查看完整DEMO

总结

下面对比下各个方式的优缺点,肯定又双叒叕该有同学说回字的写法了,简单总结下

  • PC端有兼容性要求,宽高固定,推荐absolute + 负margin
  • PC端有兼容要求,宽高不固定,推荐css-table
  • PC端无兼容性要求,推荐flex
  • 移动端推荐使用flex

小贴士:关于flex的兼容性决方案,请看这里《移动端flex布局实战

方法居中元素定宽高固定PC兼容性移动端兼容性
absolute + 负marginie6+, chrome4+, firefox2+安卓2.3+, iOS6+
absolute + margin autoie6+, chrome4+, firefox2+安卓2.3+, iOS6+
absolute + calcie9+, chrome19+, firefox4+安卓4.4+, iOS6+
absolute + transformie9+, chrome4+, firefox3.5+安卓3+, iOS6+
writing-modeie6+, chrome4+, firefox3.5+安卓2.3+, iOS5.1+
lineheightie6+, chrome4+, firefox2+安卓2.3+, iOS6+
tableie6+, chrome4+, firefox2+安卓2.3+, iOS6+
css-tableie8+, chrome4+, firefox2+安卓2.3+, iOS6+
flexie10+, chrome4+, firefox2+安卓2.3+, iOS6+
gridie10+, chrome57+, firefox52+安卓6+, iOS10.3+

最近发现很多同学都对css不够重视,这其实是不正确的,比如下面的这么简单的问题都有那么多同学不会,我也是很无语

<div class="red blue">123</div>
<div class="blue red">123</div>
.red {
    color: red
}

.blue {
    color: blue
}

问两个div的颜色分别是什么,竟然只有40%的同学能够答对,这40%中还有很多同学不知道为什么,希望这些同学好好补习下CSS基础,下面给大家推荐几本CSS的书籍

喜欢看网络资料同学,可以看看MDN的这个CSS入门教程,强烈推荐,英语好的同学建议看英文版

原文网址:http://yanhaijing.com/css/2018/01/17/horizontal-vertical-center/

最后推荐下我的新书《React状态管理与同构实战》,深入解读前沿同构技术,感谢大家支持

京东:https://item.jd.com/12403508.html 
当当:http://product.dangdang.com/25308679.html

查看原文

月半圆儿丨TED 赞了文章 · 2018-09-21

CSS实现水平垂直居中的1010种方式(史上最全)

划重点,这是一道面试必考题,很多面试官都喜欢问这个问题,我就被问过好几次了

image.png

要实现上图的效果看似很简单,实则暗藏玄机,本文总结了一下CSS实现水平垂直居中的方式大概有下面这些,本文将逐一介绍一下,我将本文整理成了一个github仓库,欢迎大家star

仅居中元素定宽高适用

  • absolute + 负margin
  • absolute + margin auto
  • absolute + calc

居中元素不定宽高

  • absolute + transform
  • lineheight
  • writing-mode
  • table
  • css-table
  • flex
  • grid

absolute + 负margin

为了实现上面的效果先来做些准备工作,假设HTML代码如下,总共两个元素,父元素和子元素

<div class="wp">
    <div class="box size">123123</div>
</div>

wp是父元素的类名,box是子元素的类名,因为有定宽和不定宽的区别,size用来表示指定宽度,下面是所有效果都要用到的公共代码,主要是设置颜色和宽高

注意:后面不在重复这段公共代码,只会给出相应提示

/* 公共代码 */
.wp {
    border: 1px solid red;
    width: 300px;
    height: 300px;
}

.box {
    background: green;    
}

.box.size{
    width: 100px;
    height: 100px;
}
/* 公共代码 */

绝对定位的百分比是相对于父元素的宽高,通过这个特性可以让子元素的居中显示,但绝对定位是基于子元素的左上角,期望的效果是子元素的中心居中显示

为了修正这个问题,可以借助外边距的负值,负的外边距可以让元素向相反方向定位,通过指定子元素的外边距为子元素宽度一半的负值,就可以让子元素居中了,css代码如下

/* 此处引用上面的公共代码 */
/* 此处引用上面的公共代码 */

/* 定位代码 */
.wp {
    position: relative;
}
.box {
    position: absolute;;
    top: 50%;
    left: 50%;
    margin-left: -50px;
    margin-top: -50px;
}

这是我比较常用的方式,这种方式比较好理解,兼容性也很好,缺点是需要知道子元素的宽高

点击查看完整DEMO

absolute + margin auto

这种方式也要求居中元素的宽高必须固定,HTML代码如下

<div class="wp">
    <div class="box size">123123</div>
</div>

这种方式通过设置各个方向的距离都是0,此时再讲margin设为auto,就可以在各个方向上居中了

/* 此处引用上面的公共代码 */
/* 此处引用上面的公共代码 */

/* 定位代码 */
.wp {
    position: relative;
}
.box {
    position: absolute;;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

这种方法兼容性也很好,缺点是需要知道子元素的宽高

点击查看完整DEMO

absolute + calc

这种方式也要求居中元素的宽高必须固定,所以我们为box增加size类,HTML代码如下

<div class="wp">
    <div class="box size">123123</div>
</div>

感谢css3带来了计算属性,既然top的百分比是基于元素的左上角,那么在减去宽度的一半就好了,代码如下

/* 此处引用上面的公共代码 */
/* 此处引用上面的公共代码 */

/* 定位代码 */
.wp {
    position: relative;
}
.box {
    position: absolute;;
    top: calc(50% - 50px);
    left: calc(50% - 50px);
}

这种方法兼容性依赖calc的兼容性,缺点是需要知道子元素的宽高

点击查看完整DEMO

absolute + transform

还是绝对定位,但这个方法不需要子元素固定宽高,所以不再需要size类了,HTML代码如下

<div class="wp">
    <div class="box">123123</div>
</div>

修复绝对定位的问题,还可以使用css3新增的transform,transform的translate属性也可以设置百分比,其是相对于自身的宽和高,所以可以讲translate设置为-50%,就可以做到居中了,代码如下

/* 此处引用上面的公共代码 */
/* 此处引用上面的公共代码 */

/* 定位代码 */
.wp {
    position: relative;
}
.box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

这种方法兼容性依赖translate2d的兼容性

点击查看完整DEMO

lineheight

利用行内元素居中属性也可以做到水平垂直居中,HTML代码如下

<div class="wp">
    <div class="box">123123</div>
</div>

把box设置为行内元素,通过text-align就可以做到水平居中,但很多同学可能不知道通过通过vertical-align也可以在垂直方向做到居中,代码如下

/* 此处引用上面的公共代码 */
/* 此处引用上面的公共代码 */

/* 定位代码 */
.wp {
    line-height: 300px;
    text-align: center;
    font-size: 0px;
}
.box {
    font-size: 16px;
    display: inline-block;
    vertical-align: middle;
    line-height: initial;
    text-align: left; /* 修正文字 */
}

这种方法需要在子元素中将文字显示重置为想要的效果

点击查看完整DEMO

writing-mode

很多同学一定和我一样不知道writing-mode属性,感谢@张鑫旭老师的反馈,简单来说writing-mode可以改变文字的显示方向,比如可以通过writing-mode让文字的显示变为垂直方向

<div class="div1">水平方向</div>
<div class="div2">垂直方向</div>
.div2 {
    writing-mode: vertical-lr;
}

显示效果如下:

水平方向
垂
直
方
向

更神奇的是所有水平方向上的css属性,都会变为垂直方向上的属性,比如text-align,通过writing-modetext-align就可以做到水平和垂直方向的居中了,只不过要稍微麻烦一点

<div class="wp">
    <div class="wp-inner">
        <div class="box">123123</div>
    </div>
</div>
/* 此处引用上面的公共代码 */
/* 此处引用上面的公共代码 */

/* 定位代码 */
.wp {
    writing-mode: vertical-lr;
    text-align: center;
}
.wp-inner {
    writing-mode: horizontal-tb;
    display: inline-block;
    text-align: center;
    width: 100%;
}
.box {
    display: inline-block;
    margin: auto;
    text-align: left;
}

这种方法实现起来和理解起来都稍微有些复杂

点击查看完整DEMO

table

曾经table被用来做页面布局,现在没人这么做了,但table也能够实现水平垂直居中,但是会增加很多冗余代码

<table>
    <tbody>
        <tr>
            <td class="wp">
                <div class="box">123123</div>
            </td>
        </tr>
    </tbody>
</table>

tabel单元格中的内容天然就是垂直居中的,只要添加一个水平居中属性就好了

.wp {
    text-align: center;
}
.box {
    display: inline-block;
}

这种方法就是代码太冗余,而且也不是table的正确用法

点击查看完整DEMO

css-table

css新增的table属性,可以让我们把普通元素,变为table元素的现实效果,通过这个特性也可以实现水平垂直居中

<div class="wp">
    <div class="box">123123</div>
</div>

下面通过css属性,可以让div显示的和table一样

.wp {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.box {
    display: inline-block;
}

这种方法和table一样的原理,但却没有那么多冗余代码,兼容性也还不错

点击查看完整DEMO

flex

flex作为现代的布局方案,颠覆了过去的经验,只需几行代码就可以优雅的做到水平垂直居中

<div class="wp">
    <div class="box">123123</div>
</div>
.wp {
    display: flex;
    justify-content: center;
    align-items: center;
}

目前在移动端已经完全可以使用flex了,PC端需要看自己业务的兼容性情况

点击查看完整DEMO

grid

感谢@一丝姐 反馈的这个方案,css新出的网格布局,由于兼容性不太好,一直没太关注,通过grid也可以实现水平垂直居中

<div class="wp">
    <div class="box">123123</div>
</div>
.wp {
    display: grid;
}
.box {
    align-self: center;
    justify-self: center;
}

代码量也很少,但兼容性不如flex,不推荐使用

点击查看完整DEMO

总结

下面对比下各个方式的优缺点,肯定又双叒叕该有同学说回字的写法了,简单总结下

  • PC端有兼容性要求,宽高固定,推荐absolute + 负margin
  • PC端有兼容要求,宽高不固定,推荐css-table
  • PC端无兼容性要求,推荐flex
  • 移动端推荐使用flex

小贴士:关于flex的兼容性决方案,请看这里《移动端flex布局实战

方法居中元素定宽高固定PC兼容性移动端兼容性
absolute + 负marginie6+, chrome4+, firefox2+安卓2.3+, iOS6+
absolute + margin autoie6+, chrome4+, firefox2+安卓2.3+, iOS6+
absolute + calcie9+, chrome19+, firefox4+安卓4.4+, iOS6+
absolute + transformie9+, chrome4+, firefox3.5+安卓3+, iOS6+
writing-modeie6+, chrome4+, firefox3.5+安卓2.3+, iOS5.1+
lineheightie6+, chrome4+, firefox2+安卓2.3+, iOS6+
tableie6+, chrome4+, firefox2+安卓2.3+, iOS6+
css-tableie8+, chrome4+, firefox2+安卓2.3+, iOS6+
flexie10+, chrome4+, firefox2+安卓2.3+, iOS6+
gridie10+, chrome57+, firefox52+安卓6+, iOS10.3+

最近发现很多同学都对css不够重视,这其实是不正确的,比如下面的这么简单的问题都有那么多同学不会,我也是很无语

<div class="red blue">123</div>
<div class="blue red">123</div>
.red {
    color: red
}

.blue {
    color: blue
}

问两个div的颜色分别是什么,竟然只有40%的同学能够答对,这40%中还有很多同学不知道为什么,希望这些同学好好补习下CSS基础,下面给大家推荐几本CSS的书籍

喜欢看网络资料同学,可以看看MDN的这个CSS入门教程,强烈推荐,英语好的同学建议看英文版

原文网址:http://yanhaijing.com/css/2018/01/17/horizontal-vertical-center/

最后推荐下我的新书《React状态管理与同构实战》,深入解读前沿同构技术,感谢大家支持

京东:https://item.jd.com/12403508.html 
当当:http://product.dangdang.com/25308679.html

查看原文

赞 592 收藏 451 评论 35

认证与成就

  • 获得 58 次点赞
  • 获得 4 枚徽章 获得 0 枚金徽章, 获得 0 枚银徽章, 获得 4 枚铜徽章

擅长技能
编辑

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2017-05-03
个人主页被 486 人浏览