css項目中經常使用知識總結

1、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;
    }

2、移動端佈局

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