【五月总结】

【五月总结】

【知识归纳】
1.设置文字颜色的color 与设置元素背景色的background-color不同，前者改变字体颜色，后者改变整个元素背景颜色，这个需要区别清楚。
2.在写style某个属性时，在最后加上分号，而img标签中写上很多属性就不用分号隔开，直接用空格就可以了，而且style属性后面用冒号。
3.在head标签中用style设置属性优先性小于在具体标签中设置相同属性（内联样式优先性最高，就是说属性写在标签内部比写在外面优先性高）
4.写地址时，注意区分相对位置与绝对位置。 (E:\html\img\bilibili.jpeg为绝对位置， img.bilibili.jpeg为相对位置)
align控制图片上下，style中的float控制图片左右
5.关于相对路径和绝对路径：
相对路径：由这个文件所在的路径引起的跟其它文件(或文件夹)的路径关系。
如果链接到同一目录下，则只需输入链接文档的名称： bilibili.jpeg
如果链接到下一级目录，则需要先输入目录名，然后加 “ / ”，再输入文件名：img/bilibili.jpeg
如果连接到上一级目录，则需要先输入“.．/”，然后再输入目录名、文件名：…/img/bilibili.jpeg
绝对路径：为文件提供的完全路径，包括适用的协议或盘符。也就是主页上的文件或
目录在硬盘上真正的完整的路径。 E:\html\img\bilibili.jpeg
6.text-align:left :图片左对齐
float：left ：图片悬浮在(文字)左边
7.元素用于对文档中的行内元素进行组合。

用于定义文档区域。 8.行内元素，块状元素都自动换行 inline ， block 行内块状元素不会自动换行 inline-block 某些标签总是会自动换行，不得按照希望的那样一排排列，这时候可以设置display：inline-block, 解决了很多此类问题。 9.①如果标签是标题h1一类的，可以使用font-weight：normal 使加粗效果消失 ②有些时候加载的图片会比它原始图片大，可以用 max-width 属性解决这个问题 max-width：100% 10.轮播动画把导航栏下滑菜单遮住，可以使用z-index改变覆盖顺序，值越大的元素在上面（默认设置在后的元素在上）

【动画】
①强行不换行 white-space:nowrap;
②动画过度属性：
transition-property 过度的名称
transition-duration 过度效果花费的时间
transition-timing 过度效果的时间曲线
transition-delay 过度效果的开始时间
③
移动（x轴y轴） transform: translate(200px,100px);
旋转120度 transform: rotate(120deg);
宽度和高度倍数变化 transform:scale(1,2)
x轴y轴倾斜50度 transform: skew(50deg,50deg);
3D效果变化（x轴y轴） transform: rotateX(120deg); transform: rotateY(120deg);

【轮播图片】
①轮播图片的做法：
A. animation: 32s donghua infinite; 自动播放32秒的动画
B. @keyframes donghua{ 0-18%（32s）播放第一张图
0%{transform: translateX(0px)} 18-20%（32s）第一张图转换成第二张图的过程
18%{transform: translateX(0px)}
20%{transform: translateX(-1350px)}
38%{transform: translateX(-1350px)}
40%{transform: translateX(-2700px)}
58%{transform: translateX(-2700px)}
60%{transform: translateX(-4050px)}
78%{transform: translateX(-4050px)}
80%{transform: translateX(-5400px)}
100%{transform: translateX(-5400px)}}
②要是某个div宽度设置为100%
其两个子块无法排列在同一行
------------------->改为width：某px

【px、em、rem三者的联系与区别】
未经调整的浏览器都符合1em=16px
px ： 绝对尺寸，是相对于显示器屏幕分辨率而言，一般响应式布局不适用
em： 相对尺寸，是相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未 被人为设置，则相对于浏览器的默认字体尺寸。
　　1.em的值并不是固定的。
2.em会继承父级元素的字体大小。
rem：“相对尺寸”但相对的只是HTML根元素
☀为了简化font-size的换算，需要在css中的body选择器(通用选择器)中声明font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样10px=1em, 也就是说只需要将你的原来的px数值除以10