这是我参与「第四届青训营 」笔记创作活动的第八天
1. css定位
属性名：定位（position）
属性值：
绝对定位：absolute
相对定位：relative
固定定位：fixed
坐标属性（非定位元素不起作用）：
top，left，right，bottom，z-index
1.1 绝对定位（absolute）
脱离文档流
以网页左上角为默认参照物
1.2 相对定位（relative）
不脱离文档流
以原位置为默认参照物
1.3 固定定位（fixed）
脱离文档流
以浏览器视窗为参照物
1.4 设置z轴（z-index）
- 默认为0
- z-index可以为负数
2. HTML5
2.1 HTML5基本概念
HTML5是超文本标记语言（HTML）的第五次重大修改，可以简单的理解为是html的第五个大版本
某些情况会将HTML5简称为H5
某些情况说HTML5（H5）表示的是HTML的第五个版本
某些情况说HTML5（H5）表示的是移动端的网页效果
某些情况说HTML5（H5）表示的是HTML5、CSS3、以及HTML5配套的JS接口。例如操作视频，操作画布，获取地理信息等。
某些情况说HTML（H5）表示的是手机端整屏的轮播图效果。
2.2 HTML5新特性
一、布局元素
布局元素相当于一个有语义的div。
header：网页头部
nav：导航栏
aside：侧边栏
article：显示文章
section：布局的一部分
footer：网页页脚
二、媒体元素
一、audio 音频
二、video 视频
属性：
controls显示控制面板
autoplay自动播放
muted静音
三、画布（canvas标签），例如刮刮乐（略）
四、SVG（定义矢量图）（略）
五、表单新特性（略）
3. css3
3.1 CSS3概述
之前的所有css知识，都是css2版本的功能
css3在css2版本的基础上，新增了很多特性，例如边框圆角、动画效果。
在css2的时代，实现圆角必须要用图片才能实现，而css3只要一行样式就能实现圆角。
在css2的时代，动画效果一定要使用JavaScript配合复杂的css样式操作才能实现（或者用jQuery这种第三方库）。css3同样可以简单地实现动画效果，而且效果更佳。
早些年头，因为浏览器的兼容问题，并未广泛引用，但是近几年，随着各大浏览器厂商的标准化，大家可以畅快的使用CSS3了。
3.2 css3新特性
一、边框圆角
二、阴影
三、形变
四、过渡效果
——————————————以下暂未了解————————————————
五、动画效果
六、媒体查询
七、flex布局
八、grid布局
等等……
一、圆角
border-radius：左上，右上，右下，左下
如果设置两个值，第一个值表示左上和右下，第二个值表示右上和左下
如果设置一个值，那么就代表四个方向
其中值代表曲率半径
特别的，当半径为宽和高的一半，就是正圆
二、阴影
box-shadow：10px 20px 30px blue；
参数分别表示：x轴偏移量，y轴偏移量，模糊半径，阴影颜色（不设置颜色为黑色）
三、形变
属性名：transform
属性值：
rotate(deg);旋转 deg单位表示角度
scale(缩放倍率);缩放
translate(水平,垂直);位移
需要同时实现旋转缩放多种效果，只能写一个属性，并且以多个属性值来表示，不能写多个属性，因为相同属性在选择器中上一个属性会覆盖下一个属性
小技巧：利用形变和绝对定位实现垂直水平居中
仅利用绝对定位只能实现div盒子左上角对于页面的垂直水平居中
.box{
position:absolute;
top:50%;
left:50%;
}
这里需要再利用形变的位移属性值，将盒子模型向左向上各平移50%
.box{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
四、过渡效果
属性名：transition
属性值：
transition-property过渡属性
transition-duration过渡持续时间
transition-timing-function过渡函数
这个函数可以设置过渡效果是以怎么样的方式运动，linear表示线性运动。线性运动其实只是连接 动画属性 和时间的一个点。一条运动线展示了一个动画运动的速度是如何受时间的影响并随之变化的。
transition-delay过渡延迟函数
简写：
transition:属性 秒数 函数 延迟 ;
通过transition属性，可以设置元素的过渡效果，当某个属性被设置成过渡属性之后，这个属性的值如果发生变化，就会以动画的形式从初始状态过渡到结束状态，代码如下所示。
.box {
width: 200px;
height: 200px;
margin: 100px auto;
background-color: #00f;
transition: width 1s;
}
.box:hover{
width:300px;
}
还可以结合上面的形变属性transform，将形变做出过渡效果
具体做法就是将transform形变属性设置成过渡属性
.box {
width: 200px;
height: 200px;
margin: 100px auto;
background-color: #00f;
transition: transform 3s;
}
.box:hover {
transform: rotate(360deg) scale(2);
}
