纯css完成立体式放置照片实际效果的示例编码

2020-10-15 20:39 jianzhan

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

设定 1个元素 width/height/padding/margin 的百分比的情况下,大伙儿可了解标准是甚么?

举个栗子:

.parent {
  width: 200px;
  height: 100px;
}
.child {
  width: 80%;
  height: 80%;
}
.childchild {
  width: 50%;
  height: 50%;
 padding: 2%;
  margin: 5%;

}
<div class="parent">
        <div class="child">
            <div class="childchild"></div>
        </div>
    </div>

上段编码中,childchild 元素的 width 是是多少? height 是是多少?padding 是是多少? margin是是多少?

元素的 height 百分比标准是父级元素的 height, 元素的 width, padding, margin 百分比标准是父级元素的 width。

由此,坚信大伙儿都早已了解了,大伙儿能够试1下呢~~

招聘面试常常会遇到1个简易的css款式难题 , 完成1个自融入的正方形,基本原理便是根据上面的那些专业知识了。只必须

#box {
            width: 50%;
            padding-top: 50%;
            background: #000;
        }

由于元素的 width 和 padding 的标准值全是父级元素的 width, 而 body 的 width 便是访问器对话框啦~~,so 这样设定便可以伴随着访问器对话框尺寸转变,正方形自融入了呢~~

2. 纯css完成立体式放置照片实际效果

言归正传,要想完成以下图中照片的立体式放置实际效果,就必须运用1下 padding ,width, height 的专业知识了。

有点熟悉,是否跟小说手机软件里强烈推荐书籍的款式一些类似呢?

这里,最先大家看下其部位放置,1张照片水平垂直居中而且靠前,别的两侧照片各自上下对齐,而且靠后1些,展现1种立体式放置的模样。这里我学到了1种彻底依靠css,简易的写法便可完成这类立体式的实际效果。

·不一样的高宽比是 padding-top 有大有小撑起来的。 · 前后左右实际效果是 z-index 折叠次序操纵的。 · 排序上应用了 nth-of-type 伪元素操纵 + positon 精准定位融合。

是否有点思路了呢?不拐弯抹角了,立即上编码

<html>
    <head>
        <style>
            * {
                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(⑸0%, ⑸0%);
                z-index:  6;
            }
            .box .img:nth-of-type(2), .box .img:nth-of-type(3) {
                position: absolute;
                top: 50%;
                transform: translateY(⑸0%);
                padding-bottom: 63%;
                z-index: 3;
            }
            .box .img:nth-of-type(2) {
                right: 0;
            }
            .box .img:nth-of-type(3) {
                left: 0;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="img">
                <img src="https://febaidu.com/list/img/3ns.png" />
            </div>
            <div class="img">
                <img src="https://febaidu.com/list/img/3ns.png" />
            </div>
            <div class="img">
                <img src="https://febaidu.com/list/img/3ns.png" />
            </div>
        </div>
    </body>
</html>

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。