Css3、Scss 常用的布局设置-通用

62 阅读 0 评论 41 点赞

我是靠谱客的博主现代篮球，最近开发中收集的这篇文章主要介绍Css3、Scss 常用的布局设置-通用，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

常见的几种css 布局

垂直居中

// 第一种 绝对定位
#parent{
  position:relative;
  height:400px;
  .son{
   position:absolute;
   width:100px;
   height:100px;
   top: 50%;
   transform: translateY(-50%); 
  }
}
// 第二种 flex布局
#parent{
   display:flex;
   align-items:center;
   height:400px;
  .son{
    width:100px;
    height:100px;
  }
}
// 第三种  margin
#parent{
  position:relative;
  height: 400px;
  .son{
   position:absolute;
   width:100px;
   height:100px;
   top:0;
   bottom:0;
   margin:auto; 
  }
}
复制代码

水平居中

// 多个块级元素
#parent{
  height:100px;
  text-align:center;
  .son{
    width:100px;
    height:100px;
    display:inline-block;
  }
}
// 绝对定位
#parent{
  position:relative;
  height:100px;
  .son{
    position:absolute;
    width:100px;
    height:100px;
    left:50%;
    transform:translateX(-50%)
  }
}
// 块级元素
#parent{
  height:100px;
  .son{
    width:100px;
    height:100px;
    margin:0 auto;
  }
}
// 行内元素
#parent{
  height:100px;
  .son{
    width:100px;
    height:100px;
    display:inline-block;
    text-align:center;
  }
}
// flex布局
#parent{
  display:flex;
  justify-content:center;
  height:100px;
  .son{
    width:100px;
    height:100px;
  }
}
复制代码

左定宽右自适应

// flex 布局
 #Box{
  width: 100%;
  height:400px;
  .left{
    float:left;
    width:100px;
    height:400px;
  }
  .right{
    flex:1;
    height:400px;
  }
}
// float + margin 
 .left {
      float: left;
      width: 100px;
      height: 100%;
      background-color: antiquewhite;
   }
 .right {
      margin-left: 100px;
      height: 100%;
      background-color: rgb(77, 87, 184);
   }
// float + overflow
 .left {
      float: left;
      width: 100px;
      height: 400px;
      background-color: antiquewhite;
   }
   .right {
      height: 400px;
      overflow: hidden;
      background-color: rgb(77, 87, 184);
    }
复制代码

请用CSS3写一个旋转的硬币

.coin{
  width:100px;
  height:100px;
  transform-style:preserve-3d;
  transform: rotate3d(-1, -1, 0, 45deg);
  animation: coin 15s linear;
}
.coin>div{
  position:absolute;
  width:100px;
  height:100px;
}
.front{
  width:100px;
  height:100px;
  border-radius:50%;
  transform: translateZ(2px); // 硬币厚度
}
.back{
  width:100px;
  height:100px;
  border-radius:50%;
}
@keyframes coin{
  from{
    transform: rotateY(0deg);
  }
  to{
    transform: rotateY(360deg);
  }
}
复制代码

内容仅供参考使用！