【五月总结】

古城微笑少年丶 2021-12-12 17:53 159阅读 0赞

# 【五月总结】 #

【知识归纳】  
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