爬css

1、html5的新特性
（1）新增的语义/结构化标签，如 footer nav main article等
（2）新增input的type类型和属性，如email,tel,number等
（3）HTML5专有的API地理位置 本地存储 缓存等
（4）新的图形标签svg canvas
（5）新的多媒体标签，如video audio source
（6）废弃的一些元素标签font
（7）自定义元素标签data-name
（8）DOCTYPE 和字符编码charset声明

2、z-index的使用
答：z-index是用于设置标签的层次关系，使用z-index的时候需要设置标签的postion属性（如relative或者absolute或者fixed都可），标签的默认z-index为0，可以设置负数，值越大，越在顶部

3、position的属性以及使用方式
position是css的定位属性，其主要包括以下几个不同的属性值，具体如下：
（1）absolute
绝对定位，相对于static定位以外的第一个父元素进行定位。
元素通过left top right bottom属性进行调整位置
（2）relative
相对定位，相当于正常位置进行定位
（3）fixed
绝对定位元素，相对于浏览器窗口进行定位。
素通过left top right bottom属性进行调整位置
（4）static
默认值。没有定位，元素出现在正常的流中。

4、flex弹性布局
设置盒子的display属性为flex，或者line-flex,其对应还有6个属性，分别为
（1）flex-direction:设置子元素的排列方式（row,column,row-reverse,column-reverse）(重点)
（2）flex-warp：设置子元素是否换行（nowarp,warp,warp-reverse）(重点)
（3）flex-flow:flex-direction和flex-warp的缩写，默认为row nowarp
（4）justify-content:设置子元素的水平排列方式（flex-start,flex-end,center,stretch,baseline）(重点)
（5）allign-items:设置子元素垂直方式（flex-start,flex-end,center,stretch,baseline）(重点)
（6）align-content：设置多个轴线的排列方式（flex-start，flex-end，center，spand-around，spand-between，stretch）

5、常用的居中方案
（1）行内元素水平居中：直接使用text-align:center;
（2）行内元素垂直居中：vertical-align:middle并设置父级元素的行高为父级元素的高度
（3）固定宽度的元素，水平居中使用：margin:0 auto;
（4）flex弹性布局：设置justify-content:center;水平居中 align-items:垂直居中
（5）设置父级元素 display:table-cell,vertical-align:middle
（6）高度确定，绝对定位+margin 垂直居中
（7）高度不确定，绝对定位+transform，具体为：设置垂直居中元素:position:absolute,top:50%,transform:translateY(-50%)

6、水平垂直居中
（1）绝对定位+transform

.father{
      width: 100%;
      height: 100%;
      position: relative;
}
.son{
      width: 500px;
      height: 500px;
      background: pink;
      position: absolute;
      top:50%;
      left: 50%;
      transform:translate(-50%,-50%);
}

（2）弹性布局

.father{
      width: 100%;
      height: 100%;
      display: flex;
      align-items:center;
      justify-content: center;
}
 .son{
      width: 500px;
      height: 500px;
      background: pink;
}

（3）position 定位（适用于子盒子有宽度和高度的时候）

.father{
      width: 100%;
      height: 100%;
      position: relative;
 }
.son{
      width: 500px;
      height: 500px;
      background: pink;
      position: absolute;
      top:50%;
      left: 50%;
      /* 子元素宽的一半 */
      margin-left: -250px; 
      /* 子元素高的一半 */
      margin-top:-250px;
}

（4）position定位 margin:auto;

.father{
      width: 100%;
      height: 100%;
      position: relative;
    }
    .son{
      width: 500px;
      height: 500px;
      background: pink;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      margin: auto;
    }

7、三列布局，左右固定，中间自适应
（1）浮动布局

body,html{
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
    .box1{
      width: 100%;
      height: 100%;
    }
    .box2,.box4{
      width: 300px;
      height: 100%;
    }
    .box2{
      float: left;
      background: red;
    }
    .box3{
      background: #000;
      margin:0 300px 0 300px;
      height: inherit;
    }
    .box4{
      float: right;
      background: pink;
    }

<div class="box1">
    <!-- 左 -->
    <div class="box2"></div>
    <!-- 右 -->
    <div class="box4"></div>
    <!-- 中 -->
    <div class="box3"> </div>
  </div>

(2)flex布局

body,html{
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
    .box{
      display: flex;
      width: 100%;
      height: 100%;
    }
    .box1,.box3{
      height: 100%;
      width: 300px;
      flex:0 0 300px; 
      /* flex:0 0 300px; 不扩展、不收缩、固定宽度300px*/
    }
    .box1{
      background: red;
    }
    .box2{
      background: #000;
      flex: auto;
      /* flex:auto; 等同于 flex:1 1 auto */
    } 
    .box3{
      background: pink;
    }

<div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </div>

(3)定位布局

body,html{
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
    .box{
      position: relative;
      width: 100%;
      height: 100%;
    }
    .box>div{
      position: absolute;
    }
    .box1,.box3{
      height: 100%;
      width: 300px;
    }
    .box1{
      background: red;
    }
    .box2{
      background: #000;
      right: 300px;
      left:300px;
      height: inherit;
    } 
    .box3{
      background: pink;
      right: 0;
    }

 <div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </div>