css项目中常用知识总结

yezi

2019-06-21

一、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查看属性的兼容性和应用实例
https://developer.mozilla.org...

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)
}

弹性 css