布局方式

flex布局 https://www.cnblogs.com/xianxianxxx/p/8086554.html

圣杯（上下固定，中间填满）

box{

flex-direction: column;
display: flex;

header{
  height:150px;
  background:greenyellow;
  width: 100%;
}


footer{
  height:100px;
}

.body{
  display: flex;
  flex: 1;
}

}

 

 

图片居中等比例缩放截取为父节点形状

.container {
　　overflow: hidden;
　　position: relative;
　　width: 200px;
　　height: 200px;
}

.container > img {
　　position: absolute;
　　top: 50%;
　　left: 50%;
　　transform: translate(-50%, -50%);
}

<img src={src} height='100%'/>



//禁止字体选中
body{ -moz-user-select:none;/*火狐*/ -webkit-user-select:none;/*webkit浏览器*/ -ms-user-select:none;/*IE10*/ -khtml-user-select:none;/*早期浏览器*/ user-select:none; }