发表于： 2018-10-20 19:55:53
2 628
今天完成的事情：
调整修改任务5：
1.调整自我介绍的width后还是随着屏幕的大小变换位置，请教了一下师兄，教我用了一下弹性盒子来的 align-bottom：centen；布局自我介绍一栏，同时用white-space：nowrap；来限制自我介绍不能换行，来达到变换分辨率位置不移动的效果。
2.出现横线滚动条，顶部宽度设置过长导致超出界面出现滚动条。
3.position 使用 relative, absolute, fixed 的区别是什么？
fixed 定位：元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。
注意：Fixed定位使元素的位置与文档流无关，因此不占据空间。
Fixed定位的元素和其他元素重叠。通常配合z-index一起来使用。比如说网页上悬挂的聊天图标或者广告就是用了fixed。
relative 定位：相对定位会按照元素的原始位置对该元素进行移动。
元素仍保持其未定位前的形状，原本所占的空间仍将保留。相对定位元素经常被用来作为绝对定位元素的容器块。
absolute 定位：绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>。元素原先在正常文档流中所占的空间会被后面元素占据。
注意：如果两个定位元素重叠，没有指定z - index，最后定位在HTML代码中的元素将被显示在最前面。
4.css优先级的了解
01.无条件优先的属性只需要在属性后面使用！important。它会覆盖页面内任何位置定义的元素定义样式。
02.第二高位的优先属性是html中给元素的标签加style。由于该方法会造成css的难以管理，所以不推荐使用。
03.第三级优先级的属性是由一个或多个id选择器来定义的。例如：#id{margin:0;}会覆盖.classname{margin：3px;}
04.第四级的属性由一个或多个类选择器、属性选择器、伪类选择器定义。如：.classname{margin：3px;}会覆盖div{margin：10px;}
05.第五级由一个或多个类选择器定义。如：div{margin：6px;}覆盖*{margin：10px;}
最低一级的选择器是为一个通配选择器。用*{margin:10px;}这样的类型来定义。
相同级别的优先级：
当比较多个相同级别的css选择器优先级时，它们定义饭位置将决定一切。
01.位于<head/>标签里的<style/>中所定义的css拥有最高的优先权。
02.第二级的优先属性由位于<style/>标签中的@import引入样式表所定义。
03.第三级的优先属性由<link/>标签所引入的样式表定义。
04.第四级的优先属性由<link/>标签所引入的样式表内的 @import 导入样式表定义。
05.第五级优先的样式由用户设定。
最低级的优先权由浏览器默认。
4.图片部分的文字与都不重叠，需要在头部标签里面添加z-index：100；来调整顶部的优先级来覆盖图片的文字,如图：
明天计划的事情：开始任务5
遇到的问题：
1.底部按钮遮挡自我介绍的内容
解决：增加最后一格的面积使其有位置安放按钮的位置
2.自我介绍的换行：
使用align-bottom：centen；弹性盒子布局
收获：知晓了优先级，更加深刻的了解了弹性盒子的便利性
返回列表
评论