html如何实现立体效果,纯css实现立体摆放图片效果的示例代码

1.元素的 width/height/padding/margin 的百分比基准

设置 一个元素 width/height/padding/margin 的百分比的时候，大家可知道基准是什么？

举个栗子：

.parent {

width: 200px;

height: 100px;

}

.child {

width: 80%;

height: 80%;

}

.childchild {

width: 50%;

height: 50%;

padding: 2%;

margin: 5%;

}

上段代码中，childchild 元素的 width 是多少？ height 是多少？padding 是多少？ margin是多少？

元素的 height 百分比基准是父级元素的 height， 元素的 width， padding， margin 百分比基准是父级元素的 width。

由此，相信大家都已经有数了，大家可以试一下呢～～

面试经常会遇到一个简单的css样式问题 ， 实现一个自适应的正方形，原理就是基于上面的那些知识了。只需要

#box {

width: 50%;

padding-top: 50%;

background: #000;

}

因为元素的 width 和 padding 的基准值都是父级元素的 width， 而 body