可以参考一下我的作品，在老师的基础上我做了优化：1、音乐停止与播放时图标指针变化 2、第二页倒计时显示 3、展示到第三页的时候绑定上拉下滑翻页。github：https://github.com/ar414-com/html5cards 效果链接：https://ar414-com.github.io/html5cards/(觉得有帮助可以start一下呗)

有三级 border padding content

我理解的是图片在border内部 而文字在content内部

71.2vh如果不加border-box指的是content的大小，加了以后就变成了border大小；所以图片还是和原来一样，而文字因为padding处于灯笼内部。

还有一种方法是不加border-box直接把高度改为40.2vh（71.2-31）；

没有所谓的公式，直接通过原图测量div的高宽去对比网页总高宽得出vw或vh

640px=100vh，100/640=.015625，那么1像素就是0.15625vh，把你量出来的像素*0.15625=你所需要的vh高度

是没问题，你仔细检查下类名和路径，还有就是照片的名字有没有错

duoyanghua 

用Chrome试试

background相对于img标签能使浏览器更快的的加载，定义样式简单，所用的代码相对较少

内容比较多的单页面，根据页面的排列而定，使用决定定位是必不可少的。

代码写错了 不可能没效果 id class好好看看

你看下图片路径引对了吗？单词写对了吗

绝对定位

浏览器在Chrome下运行，按F12键，选择手机模拟器，再调试

找到哪里错了，谢谢。

border-box说明你定义的宽度是border+padding+content，所以包含文字的这块content会下移。而background是第三层，包含padding和content的，所以灯笼就不下移。

视窗宽度被分割成100份元素占了45份

是绝对定位吧

根据psd文件测量的

因为灯笼上边有条竖线，竖线和顶端衔接好，要想视觉上更好，就会将margin-top值设为负的，一点点就好；但又要使图片完全放进去，bottom：0；这是我的理解，也希望给我指点一下，互相学习。

可能是路径的问题吧

谢了l

1和l有时候很想，想不错就把前面html文件中的class名复制黏贴到.css文件中，选择器写正确，路径对了基本就不会有太大问题。

我也遇到这个问题，请问楼主是怎么解决这个问题的

哦 单位写错了 知道了

这是css3中的长度单位   相对于窗口的宽度/高度   vw=view width    vh=view height
可以上百度详细看一下

百分比的话。不好精确计算吧。因为本身尺寸有限，计算需要精确。