标签换行会有空格导致间距用
display:inline-block;
固定定位
position: fixed;
left: 0;
top: 0;
z-index: 1;让一个层在所有层的下面当背景
相当于把padding和border的值都算在content里，盒子模型会自动根据
padding和border的值来调整content的值，就不需要手动调整
margin: 0;
padding: 0;
box-sizing: border-box;
抗锯齿
-webkit-font-smoothing: antialiased;
改变默认的触摸后的颜色
-webkit-tap-highlight-color: rgba(0,0,0,0);
双行文本溢出模型子元素竖排显示省略号...代码
.ellipsis-2 {
超出的文本隐藏
overflow: hidden;
溢出用省略号显示
text-overflow: ellipsis;
将对象作为弹性伸缩盒子模型显示
display: -webkit-box;
这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数
-webkit-line-clamp: 2;
从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
-webkit-box-orient: vertical;
}
渐变背景两种写法、下到上、0-45-90-180-270
background-image: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
background: linear-gradient(0deg,rgba(0,0,0,.85),transparent);
垂直对齐居中对齐方式
vertical-align: middle;
父级盛不下时就挤扁
flex-wrap: wrap;
将内容区flex:1,内容区则会自动放大占满剩余空间
显示不完整右下不会变形
background-size:cover
往左往上水平居中
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -50%);
左对齐
justify-content:flex-start;
右对齐
justify-content:flex-end;
居中对齐
justify-content: center;
两端对齐之间相等
justify-content: space-between;
所有地方的间距都相等
justify-content: space-evenly;
两侧间距响度之间比边距间隔2倍
justify-content: space-around;
垂直居中
align-items: center;
拉伸,默认值(现有状态,测试的时候去掉子级的高度)
子级都没有宽跟着内容走，没有高直接充满。没有高设置垂直居中跟内容走高
align-items: stretch;
修改主轴方向: 列
flex-direction: column;
位移绝对定位正居中
position:absolute;
left:50%;左边50
top:50%;上边50
盒子居中
transform:translate(-50%,-50%);变换平移，先x后y
片等比例缩放, 图片完全覆盖到整个盒子, 可能会导致图片显示不全
background-size: cover;
图片等比例缩放, 当宽度或高度和盒子尺寸相等, 图片就不再缩放
background-size: contain;
溢出隐藏，不透明度0-1
.box {
width: 249px;
height: 210px;
margin: 50px auto;
overflow: hidden;
opacity: 0;
}
img {
width: 250px; transition: all 2s;
*/
}
img:hover {
transform: rotate(360deg);
}
