一个移动端开发，学习前端的过程，比较笨拙从最开始的基础开始。后续就是我分享在这个过程中学到的知识，和记录下来的知识。有需要学习的同学，可以参考，希望对大家有帮助。

一、CSS元素属性

1.padding，margin

•     四个值 （top right buttom left）
•     三个值（top right buttom ）左和右是一样的
•     两个值（top/buttom right/left）

2.text-shadow

20px 27px 22px pink 水平位移 垂直位移 模糊程度 阴影颜色。

3.box-sizing

• content-box：盒子的实际宽度 = 设置的 width + padding + border   外加模式
• border-box：盒子的实际宽度 = 设置的 width  内减模式

4.box-shadow

box-shadow: 15px 21px 48px -2px #666 inset; 水平偏移 垂直偏移 模糊程度 阴影大小 阴影颜色 inset不写默认外阴影，写了内阴影

二、选择器

1.标签选择器

通用标签设置

2.id选择器

#box

3.类选择器

规定用圆点.来定义

4.通配符*

匹配任何标签

5.其它高级选择器

（1）后代选择器

用空格隔开 例如{.div1 p} 指div1下所有的p标签

（2）交集选择器

 h3.special.zhongyao {
    color: red;
}

（3）并集选择器

定义的时候用逗号隔开

（4）子代选择器

用符号>表示，子类可继承，孙子类不可继承

（5）序选择器

 ul li:last-child {
    color: blue;
}

（6）下一个兄弟选择器

+表示选择下一个兄弟

6.伪类选择器

（1）静态伪类

•     :link 超链接点击之前
•     :visited 链接被访问过之后

（2）动态伪类

•     :hover “悬停”：鼠标放到标签上的时候
•     :active “激活”： 鼠标点击标签，但是不松手时
•     :focus 是某个标签获得焦点时的样式（比如某个输入框获得焦点）

7.!important标记：优先级最高

三、div元素布局

1.display

(1)block 块状元素

•     独占一行，默认自动填充满父元素宽度
•     可以设置宽高
•     可以设置padding和margin

(2)inline 行内元素

• 不会独占一行，相邻的行内元素会排在一行，宽度随内容发生变化
• 不可以设置宽高
• 行内元素水平方向的margin-left; margin-right; padding-left; padding-right;可以生效。但是竖直方向的margin-bottom; margin-top; padding-top; padding-bottom;却不能生效

(3)使用区别

•     inline行内，元素达到一定长度会换行，不做特殊处理正常显示不会换行
•     inline-block：指定宽高内换行
•     block：直接换行，指定宽高

2.position

• static静态位置
• relative相对位置

指定偏移量（水平方向偏移量:lefth和right属性值；垂直偏移量：top和bottom属性值），到达新位置。相对定位对父盒子及兄弟盒子没有影响

• absolute绝对位置

    盒子以最近的一个已经定位的祖先元素为基准进行偏移，如果没有已经定位的祖先，则以浏览器为基准（已经定位是指已经设置position属性）

• fixed 固定位置和绝对位置类似

    浏览器窗口为基准进行定位，也就是当拖动浏览器窗口的滚动条时，依然保持对象位置不变。

3.特殊注意点

• padding-top,padding-bottom,margin-top,margin-bottom取值为百分比的时候，参照的是父元素的宽度
• background-repeat 平铺背景，是否重复
• background-size 背景图片大小 宽高

四、Flexbox布局

1.基本用法

父元素：display: flex;
子元素：margin: auto;

2.模型(类似直角坐标系)

•     横轴(主轴) flex-start到flex-end
•     纵轴(交叉轴)flex-start到flex-end

3.属性

• 1.display(适用于父容器): flex(块级元素) | inline-flex; (行内元素)； display: block与display: inline
• 2.flex-direction(适用于父容器): row(默认值左到右) | row-reverse(右到左) | column(上到下) | column-reverse;(下到上)
• 3.flex-wrap(适用于父容器): nowrap(单行排列，超过限制不会换行，压缩控件) | wrap(会根据子控件扩充当前布局，不限制子控件大小，向下扩充，覆盖下面布局) | wrap-reverse（与wrap相反，向上扩充，覆盖上边布局）;
• 4.flex-flow: <flex-direction> || <flex-wrap> 是这两个的结合 例如：flex-flow: row-reverse wrap;;
• 5.justify-content(对齐方式,主轴): flex-start(默认值，开始位置对齐) | flex-end(结束位置) | center(中间位置) | space-between(平均分布)| space-around(平均分布，两端有空余);
• 6.align-items(主轴垂直方向，单行): flex-start | flex-end | center | baseline(弹性盒子元素根据它们的基线对齐) | stretch(默认值，弹性盒子元素沿交叉轴方向拉伸填充整个伸缩容器);
• 7.align-content(适用与多行): flex-start | flex-end | center | space-between | space-around | stretch;
• 8.align-self (适用于子元素) ，对齐方式

五、动画CSS animation

1.定义动画

@keyframes

@-webkit-keyframes

2.动画animation的具体操作

（1）animation-name：    

规定需要绑定到选择器的 keyframe 名称

（2）animation-duration：

完成动画花费的时间，以s或者ms计。

（3）animation-timing-function：

动画的速度曲线

•     linear：匀速
•     ease：慢-快-慢
•      ease-in：慢 -> 匀速
•     ease-out：匀速 -> 慢
•     ease-in-out： 慢 -> 匀速 -> 慢
•     cubic-bezier(0.68, -0.55, 0.27, 1.55)：反弹效果

（4）animation-delay：

动画开始前的延迟，负值，请注意动画跳过 2 秒进入动画周期

（5）animation-iteration-count：

动画播放次数

•     infinite无限次
•     n：指定次数

（6）animation-direction：

规定是否应该轮流反向播放动画

•     normal：正常播放，播放次数为1时，没有效果
•     alternate：动画奇数次数正常播放，偶数次数向后播放。

3.animation-fill-mode

动画在播放之前或之后，其动画效果是否可见

•     none：不改变默认行为
•     forwards：动画完成后，保持最后一个属性
•     backwards：第一帧
•     both：向前和向后填充模式都被应用

4.animation-play-state

动画运行还是停止

•     paused
•     running

六、浏览器添加私有属性

1.添加格式

  -webkit-: 谷歌 苹果
  -moz-:火狐
  -ms-：IE
  -o-：欧朋

举例：
background: -webkit-linear-gradient(left, green, yellow);
background: -moz-linear-gradient(left, green, yellow);
background: -ms-linear-gradient(left, green, yellow);
background: -o-linear-gradient(left, green, yellow);
background: linear-gradient(left, green, yellow);

最后

本章的思维导图如下：