发表于： 2018-10-31 21:37:27
1 751
今天完成的事情：（一定要写非常细致的内容，比如说学会了盒子模型，了解了Margin）
昨天进行任务五，任务五这里比较麻烦的是相对定位和绝对定位，以及使用绝对定位来显示不同效果。
relative和absolute的比较
relative：相对于原来位置移动，元素设置此属性之后仍然处在文档流中，不影响其他元素的布局
absolute:元素会脱离文档流，如果设置偏移量，会影响其他元素的位置定位
什么地方使用position:relative，什么地方使用position:absolute进行定位，同时使用left、right、top、bottom的配合定位具体位置。
如果父级不使用position:relative而直接使用position:absolute绝对定位，这个时候将会以body标签为父级，使用position:absolute定义对象无论位于DIV多少层结构，都将会被拖出以<body>为父级（参考级）进行绝对定位。绝对定位非常好用，但切记不要滥用，什么地方都用，这样有时会懒得计算距离上、下、左、右间距，同时可能会造成CSS代码臃肿
这边使用index失效了，具体原因如下：
z-index失效原因：
1、父标签 position属性为relative；
2、问题标签无position属性（不包括static）；
3、问题标签含有浮动(float)属性。
给图片加模糊：
图片设置
背景图片填满整个盒子
background-image:url("../image/医生背景.png");
background-repeat: no-repeat;
background-size: 100% 100%;
-moz-background-size: 100% 100%;
/* 设置cover参数，背景图片会按照比例缩放填充满整个背景 */
background-size: cover;
图片加模糊：
filter:blur(3px);
，目前任务在进行给中间的人物信息写css代码
问题就是往手机屏幕最小的缩放会出现图片挤压姓名，导致名字向下，整个版面看起来十分不协调。
有待于解决。
如果是不使用弹性盒子则会出现
姓名被挤在下方。
有待于解决。
明天计划的事情：（一定要写非常细致的内容）
完成任务五
遇到的问题：（遇到什么困难，怎么解决的）
版面不协调，不能保持同步缩放比例。
收获：（通过今天的学习，学到了什么知识）
对于绝对定位和相对定位理解又多了一些。
了解了z-index。
返回列表
评论