一、div+css布局

1.css水平垂直居中

方法1:兼容性最好的方法

.box{        position: absolute;        top: 0;        right: 0;        left: 0;        bottom: 0;        margin: auto;        width: 200px;        height: 200px;        background-color: #eee;    }

方法2: css3 transform属性

.box{        position: absolute;        top: 50%;        left: 50%;        transform: translate(-50%, -50%);        width: 200px;        height: 200px;        background-color: #eee;    }

方法3: flex ie11才支持 用mdn查看属性的兼容性和应用实例

display: flex; 设置父容器为弹性盒子 flex-direction: row; 定义父容器的弹性项目以主轴排列

justify-content: center; 定义弹性项目在主轴X的排列方式,主要用于水平居中文字 align-items:

center; 定义弹性项目在侧轴Y的排列方式,主要用于垂直居中多行文字

.box-wrapper{        width: 1000px; /*需要给父容器设置宽高*/        height: 1000px;        background-color: #e9e9e9;        display: flex; /*设置父容器为弹性盒子*/        justify-content: center; /*定义弹性项目在主轴X的排列方式,主要用于水平居中文字*/        align-items: center; /*定义弹性项目在侧轴Y的排列方式,主要用于垂直居中多行文字*/    }    .box{        width: 200px; /*弹性盒子的项目*/        height: 200px;        background-color: #eee;    }

二、移动端布局

1.1px像素的问题

@mixin border-1px($color) { position: relative; &:after {  position: absolute;  display: block;  left: 0;  bottom: 0;  width: 100%;  border-top: 1px solid $color;  content: ' '; }  @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {  &:after {   -webkit-transform: scaleY(.7);   transform: scaleY(.7);  } } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {  &:after {   -webkit-transform: scaleY(.5);   transform: scaleY(.5);  } }}$color1: #ccc;.border-1px { @include border-1px($color1)}