今天完成的事情：（一定要写非常细致的内容，比如说学会了盒子模型，了解了Margin）
1、完成了任务七的三个页面的修改，找到了些问题。
发现在给css修改样式的时候会有其他的属性影响到你另外加的属性效果，就会出现一些bug，这里就要找出原因并且把没有用的属性删掉才能解决，今天调这个页面真的是不停的出现问题，不停的解决然后又出现问题。重复到最后调整完成。
2、了解了vw和vh的知识点。
（1）vw、vh、vmin、vmax 的含义
（1）vw、vh、vmin、vmax 是一种视窗单位，也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗（Viewport）大小来决定的，单位 1，代表类似于 1%。
视窗(Viewport)是你的浏览器实际显示内容的区域—，换句话说是你的不包括工具栏和按钮的网页浏览器。
（2）具体描述如下：
- vw：视窗宽度的百分比（1vw 代表视窗的宽度为 1%）
- vh：视窗高度的百分比
- vmin：当前 vw 和 vh 中较小的一个值
- vmax：当前 vw 和 vh 中较大的一个值
（2）vw、vh 与 % 百分比的区别
（1）% 是相对于父元素的大小设定的比率，vw、vh 是视窗大小决定的。
（2）vw、vh 优势在于能够直接获取高度，而用 % 在没有设置 body 高度的情况下，是无法正确获得可视区域的高度的，所以这是挺不错的优势。
（3）vmin、vmax 用处
做移动页面开发时，如果使用 vw、wh 设置字体大小（比如 5vw），在竖屏和横屏状态下显示的字体大小是不一样的。
由于 vmin 和 vmax 是当前较小的 vw 和 vh 和当前较大的 vw 和 vh。这里就可以用到 vmin 和 vmax。使得文字大小在横竖屏下保持一致。
3、又学到了一种水平垂直居中的方法。
利用CSS3中的transform来实现水平垂直居中，给父级设position：relative相对定位，然后给子级设绝对定位，利用transform的属性来达到水平居中效果。这种方法有个好处是可以在未知宽高的情况下使用。
html代码：
<p class="water">
<span class="civilian">枪手</span>
</p>
css代码：
.water {
text-align: center;
margin: 0;
font-size: 5vw;
background: #f5c97b;
height: 65vh;
position: relative;
}
.civilian {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转(rotate)、缩放(scale)、移动(translate)或倾斜(skew)。
明天计划的事情：（一定要写非常细致的内容）
明天停电休息一天。
遇到的问题：（遇到什么困难，怎么解决的）
昨天任务七有几处小问题被师兄打回。
第一个页面的问题：
1、
这里的hover效果颜色应该是灰色，我这里设的是白色。后来发现是我给hover效果的颜色弄反了，所以点击效果看上去很奇怪，重新设置了下，效果：
2、
颜色和资料上不一致，我用的是
，师兄说按照代码规范颜色应该是#开头的颜色，这里修改下，在ps中直接取样。
第二个页面的问题：
1、然后发现一个问题，我之前没有给header设height，是直接给main主体设的margin-top值，所以就导致页面过长出现滚动条，显得整个页面很不协调，后面改成只给header设置height就可以了。
2、给div设置vw和vh值后，div就可以自适应，然后在移动端中调试的时候就出问题了，如图：
越拉div底部的间隙越来越大，给包含文字的标签去掉了自带的margin属性就是图片中的效果。先前设了margin也不行越拉越大。
其实主要原因有两个：
（1）是我给最大的div里设置了background背景，所以再调试的过程中拉伸移动端页面就会露出背景颜色，不管怎么调margin值都没有用的，因为给div设的背景色也是一个属性，给1号标签里设的背景色也是单独的属性，所以会互相影响。
（2）是div的css样式我写反了，我的html代码如下：
这两个的属性效果我弄反了，所以才会在拉伸页面的时候，出现“1号”内容被挤上去。
正确的css代码如下：
.box-one {
display: flex;
flex-direction: column;
align-items: center;
}
.text-box {
width: 25vw;
height: 25vw;
border: 2px solid #fff;
display: flex;
flex-direction: column;
justify-content: center;
margin: 5px 0 10px 0;
相当于本来可以只套一层div，我多套了一层div用来包hover效果的图片了。
按照div的嵌套是大的套小的以此类推，但是div的嵌套不能太多。
解决的方法：不是直接给最大的盒子设背景，这个思路是错误的。是按照我给1号标签单独设background一样，也要给水民的标签设单独background背景色。然后再通过给水民的标签设height的vh值把1号挤下去。再把两个div的属性样式调换下就行。盒子太多都晕了。。
3、因为之前是用的background插入背景图方式，用雪碧图的坐标来调的位置，这样就不能设margin值，不然图片就会错位，后面换成了img的src属性来链接路径的，给它设好width和height的vw和vh值后，还是出现了图片随着页面的延伸越变越窄，后来发现用vh和vw调试main中的自适应，正方形的长宽必须是一样的才能在拉伸的时候保证不变形，才能保证是自适应的效果。单位最好保持一致。css代码如下：
.picture-1 {
width: 5vw;
height: 5vw;
4、设置display：none隐藏属性，发现就会出现页面问题，如图：
箭头那里就会被挤上去，后面已经有点脑子快崩了，后面师兄教我了一个方法，不用display：none，设opcaticy：0的透明值，然后再给hover设opcaticy：1，想当于用鼠标触碰就会出现图片。类似于z-index的顺序可以这样理解。
html代码：
<div class="boss">
<div class="pictures">
<img class="picture-1" src="images/1.png">
<img class="picture-2" src="images/2.png">
<img class="picture-3" src="images/3.png">
<img class="picture-4" src="images/4.png">
</div>
</div>
css代码：
.boss {
opacity: 0;
}
.box-one:hover .boss {
display: block;
opacity: 1;
}
第三个页面的问题：
1、文字边距没有和效果图一样。我重新设置了margin左右的值就好看多了。
2、效果图上有一处时间颜色太浅没看到，后面补上代码。
这里我用的是float，让文字浮在右边。
收获：（通过今天的学习，学到了什么知识）
1、收获了vh和vw是在网页上是怎样的效果，可以适应任何尺寸手机的屏幕大小。
2、知道了transform属性还可以实现垂直居中。
返回列表
评论