1、元素的width/height/padding/margin的比例基准
举个栗子：
.parent { width: 200px; height: 100px;}.child { width: 80%; height: 80%;}.childchild { width: 50%; height: 50%;
padding: 2%;
margin: 5%;
}
在上面的代码中，childchild元素的宽度是多少？ 高度是多少？ 什么是填充？ 什么是保证金？
元素的高度比例参考是父元素的高度，元素的宽度、内边距和边距比例参考是父元素的宽度。
所以，相信你已经数过了，可以尝试一下~~
笔试经常会遇到简单的css样式问题，实现自适应完美循环的原理是基于之前的知识，只需要
#box { width: 50%; padding-top: 50%; background: #000; }
由于元素的width和padding的基值是父元素的宽度，而body的宽度是浏览器窗口~~，所以这个设置可以随着浏览器窗口的大小而改变，完美的圆自适应了~~
2.纯css实现三维显示图片的效果
言归正传，如果想要实现右侧图片三维放置的效果，需要应用padding、宽度、高度的知识。
看着眼熟，是不是和小说软件里推荐书籍的风格很像？
在这里，首先我们来看看它的摆放位置。 一张图片水平居中靠前，另一边的图片左右对齐css 立体效果css 立体效果，但都放在后面，呈现三维排列。 这里我学会了一种简单的完全依靠css来实现这些三维疗效的写法。
· 顶垫支持不同高度，有大顶垫和小顶垫。
·前后治疗效果由z-index折叠顺序控制。
·布置采用n型伪元控制+positionon定位组合。
你有什么想法吗？少走弯路，上传代码即可
* { margin: 0; padding: 0; } .box { width: 300px; height: 200px; position: relative; } .img { width: auto; height: 0; } .box img { width: 100%; display: inline-block; } .box .img:nth-of-type(1) { display: inline-block; position: absolute; left: 50%; top: 50%; padding-bottom: 50%; transform: translate(-50%, -50%); z-index: 6; } .box .img:nth-of-type(2), .box .img:nth-of-type(3) { position: absolute; top: 50%; transform: translateY(-50%); padding-bottom: 63%; z-index: 3; } .box .img:nth-of-type(2) { right: 0; } .box .img:nth-of-type(3) { left: 0; }
总结
以上就是小编介绍的纯css实现图片三维展示的效果。 希望对您有所帮助。 如果您有疑问，请给我留言，编辑会及时回复您。 在此也感谢您对网页设计网站的支持！
