css項(xiàng)目中常用知識(shí)總結(jié)

MASAILA 發(fā)布于2019-08-30 15:52 / 1586人閱讀

摘要：一布局水平垂直居中方法兼容性最好的方法方法屬性方法才支持用查看屬性的兼容性和應(yīng)用實(shí)例設(shè)置父容器為彈性盒子定義父容器的彈性項(xiàng)目以主軸排列定義彈性項(xiàng)目在主軸的排列方式主要用于水平居中文字定義彈性項(xiàng)目在側(cè)軸的排列方式主要用于垂直居中

一、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查看屬性的兼容性和應(yīng)用實(shí)例
https://developer.mozilla.org...

display: flex; 設(shè)置父容器為彈性盒子 flex-direction: row; 定義父容器的彈性項(xiàng)目以主軸排列
justify-content: center; 定義彈性項(xiàng)目在主軸X的排列方式,主要用于水平居中文字 align-items:
center; 定義彈性項(xiàng)目在側(cè)軸Y的排列方式,主要用于垂直居中多行文字

.box-wrapper{
        width: 1000px; /*需要給父容器設(shè)置寬高*/
        height: 1000px;
        background-color: #e9e9e9;
        display: flex; /*設(shè)置父容器為彈性盒子*/
        justify-content: center; /*定義彈性項(xiàng)目在主軸X的排列方式,主要用于水平居中文字*/
        align-items: center; /*定義彈性項(xiàng)目在側(cè)軸Y的排列方式,主要用于垂直居中多行文字*/
    }
    
.box{
        width: 200px; /*彈性盒子的項(xiàng)目*/
        height: 200px;
        background-color: #eee;
    }

二、移動(dòng)端布局 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)
}