分享CSS的一些小技巧

两栏布局

  
定宽
  
自适应

.left{
  width: 200px;
  height: 600px;
  background: red;
  float: left;
  display: table;
  text-align: center;
  line-height: 600px;
  color: #fff;
}

.right{
  margin-left: 210px;
  height: 600px;
  background: yellow;
  text-align: center;
  line-height: 600px;
}

三栏布局

    
左栏
    
中间
    
右栏

.wrapper{
    display: flex;
}
.left{
    width: 200px;
    height: 300px;
    background: green;
}
.middle{
    width: 100%;
    background: red;
    marign: 0 20px;
}
.right{
    width: 200px;
    height: 300px;
    background: yellow;
}

水平居中

行内元素

.center-children {
    text-align: center;
}

块级元素

.center-me {
    margin: 0 auto;
}

垂直居中

行内元素

.center-text-trick {
  height: 100px;
  line-height: 100px;
  white-space: nowrap;
}

块级元素

.parent {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

渐变边框

.box {
  margin: 80px 30px;
  width: 200px;
  height: 200px;
  position: relative;
  background: #fff;
  float: left;
}
.box:before {
      content: '';
      z-index: -1;
      position: absolute;
      width: 220px;
      height: 220px;
      top: -10px;
      left: -10px;
      background-image: linear-gradient(90deg, yellow, gold);
}