持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第七天，点击查看活动详情
一个移动端开发，学习前端的过程，比较笨拙从最开始的基础开始。后续就是我分享在这个过程中学到的知识，和记录下来的知识。有需要学习的同学，可以参考，希望对大家有帮助。
一、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-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);
最后
本章的思维导图如下：
