web移动端

h5:低版本（IE8及以下不支持H5标签，要引入html5shiv.js才能正常运行）

　　条件引入，只是针对PC端，移动端不存在这样的操作

 

<figure>：专门用来存放图片和相关介绍的 <input type='date'>:日期表单  type='number'只能输入数字

css3:

user-modify：此属性用于使得div，可以输入。。使用user-modify:read-write    user-select:none 可以阻止用户去选择文本

box-sizing:固定盒子的大小，可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。不计算padding和border值

正常的盒子模型是向外扩展的，如果我们对一个盒子加边框内边距等会扩大盒子，导致盒子可能会掉下去，但是使用box-sizing，就可以避免盒子掉下去

 

弹性布局：如果用了弹性布局，子元素不需要使用float浮动了，加上去也是失效的状态

父元素：   display: -webkit-box;  子元素：  -webkit-box-flex:1; 平分剩余的等分

 

父元素下面拥有的相关的属性

box-orient        box-orient用来确定子元素的方向。是横着排还是竖着走。可选的值有：horizontal | vertical | inline-axis | block-axis | inherit

其中，inline-axis是默认值。且horizontal与inline-axis的表现似乎一致的，让子元素横排；而vertical与block-axis的表现也是一致的，让元素纵列。

box-direction           box-direction是用来确定子元素的排列顺序，可选值有：  normal | reverse | inherit   分别表示正常，倒叙，继承父元素

box-align        box-align与box-pack都是决定盒子内部剩余空间怎么使用的。其中box-align决定了垂直方向上的空间利用，也就是垂直方向上的对齐表现

box的可选参数有：    start | end | center | baseline | stretch  其中stretch为默认值，为拉伸，也就是父标签高度多高，其孩子元素的高度就多高、

box-pack      box-pack决定了父标签水平遗留空间的使用，其可选值有：  start | end | center | justify

box-lines        box-lines是用来决定子元素是可以换行显示呢？还是就算挤出油还是单行显示。两个可选值：

single | multiple         其中single是默认值，表示死活不换行
--------------------------------------------------------------------------------------

 父元素： display:flex   -webkit-flex  子元素 :  flex:1

父元素里面有下面的相关元素，都是针对子元素

flex-direction (元素排列方向)

    row, row-reverse, column, column-reverse   row (从左往右)默认 row-reverse (从右往左) column (从上往下) column-reverse (从下往上)

flex-wrap (换行)

    nowrap, wrap, wrap-reverse     nowrap (不换行)默认  wrap (换行，且往下一行换)   wrap-reverse (换行，且往上一行换    flex-flow (以上两者的简写)

justify-content (水平对齐方式)

    flex-start 左对齐 , flex-end 右对齐, center 居中, space-between 左右两端对齐, space-around

align-items (垂直对齐方式)

    stretch, flex-start 顶对齐, flex-end 底对齐, center 垂直居中, baseline

align-content (多行垂直对齐方式)

    stretch, flex-start, flex-end, center, space-between, space-around