css样式总结：

版心 【
.wrapper {
  width: 1240px;
  margin: 0 auto;
}】
 cursor: pointer;  箭头变手指样式
 border-radius: 50%;  圆角
 background-color: rgba(0, 0, 0, 0.8);  黑色半透明
 text-decoration: none;   去掉a标签的下划线 
 display: inline-block;   行内块
 text-indent: 30px; 文本缩进属性是用来指定文本的第一行的缩进。
 background-image: url(images/bg4.png);  背景图片
【.box {
    background: #2c505f;  背景颜色灰蓝色
  }
  a {
      text-decoration: none;  去掉a标签的下划线
      display: block； 把a标签显示为块元素
      text-indent: 30px; 文本缩进，第一行的缩进30px。
    }
  a:hover {
    background: red;  鼠标进入背景颜色变成红色，退出就又是灰蓝色
  }】
  
 【* {   通配符
      margin: 0;
      padding: 0;
      box-sizing: border-box;  所有的标签都可能添加内边距或者border，都内减模式 
    }

  ul li {
      margin: 0 30px 0 30px;   顺时针（上、右、下、左）
      text-indent: 20px;   文本缩进，第一行的缩进20px
      list-style-type: none;   取消li的小圆点
      padding-bottom: 10px;  内边距向下10px
      border-bottom: 1px dashed #a7a2a2;    下边框线（dasheh虚线）
  】

  弹性布局【
  display:flex;
  容器属性【
   flex-wrap:nowrap;   不换行
   flex-wrap:wrap;    换行，第一行在上方。
   justify-content:center;    居中
   justify-content:flex-start;    左对齐
   justify-content:flex-end;    右对齐
   justify-content:space-between;    两端对齐，项目之间的间隔相等
   justify-content: space-around;    每个项目两侧的间隔相等。所以，项目之间的间隔比项目之间与边框的间隔大一倍
  】
 align-items:flex-start;   交叉轴的起点对齐。
 align-items:flex-end;   交叉轴的终点对齐。
 align-items:center;    交叉轴的中点对齐。
 align-items:baseline:;   项目的第一行文字的基线对齐。
  】
 float浮动【
  float: left;   左浮动
  float: right；  右浮动
  【 .right ul li:nth-child(4n) {  
        margin-right: 0;      第四个li和第八个li右侧间距清除

      .right ul li:last-child {  
        margin-right: 0;      最后一个右侧间距清除
    }】
  】
清浮【在需要清浮的时候，添加clearfix   例如 ：<div class="bd clearfix"></div>
/* 双伪元素清除法 */
.clearfix::before,
.clearfix::after {
  content: '';
  display: table;
}
.clearfix::after {
  clear: both;
}
】

  子绝父相【
  position：relative;   父相

  position：absolute;   子绝
  left：13px;   向右移动13px
  top: 6px;     向下移动6px
  】

  过渡 transition 

  精灵图控制位置【
  background-image: url(../images/sprites.png);   精灵图做背景图片
  background-position: -119px -69px;  根据图片位置移动（-水平，-垂直）
  】

  vertical-align: middle;   图片文字垂直对齐