在没有设置父级元素边框的情况下，直接设置子元素margin的问题
body,figure,figcaption,h1,p{
margin:0;
padding: 0;
}
figcaption{
position:absolute;
top: 0px;
left: 0px;
color:#fff;
}
figure{
position:relative;
float:left;
width:33.333%;
}
figure img{
opacity: 0.8;
transition: all 0.35s;
}
figure figcaption p,h1,span,div{
transition: all 0.35s;
}
@media screen and(max-width:600px) {
figure{width:100%;}
}
@media screen and (min-width:601px) and (max-width: 1000px) {
figure{width:50%;}
}
@media screen and (min-width: 1001px){
figure{width:33.3333%;}
}
.test1{
background:#2f0000;
}
.test1 figcaption p{
background:#fff;
color: #ddd;
margin: 3px;
text-align: center;
padding:0 10px;
transform: translate(-120px,0px);
}
.test1 figcaption p:nth-of-type(1){
transition-delay: 0.05s;
}
.test1 figcaption p:nth-of-type(2){
transition-delay: 0.1s;
}
.test1 figcaption p:nth-of-type(3){
transition-delay: 0.15s;
}
.test1 figcaption{
padding: 20px;
}
.test1:hover figcaption p{
transform: translate(0px,0px);
}
.test1:hover img{
transform: translate(-50px,0px);opacity: 0.5;
}
.test2{
background:#030;
}
.test2 figcaption {
width: 100%;
height:100%;
}
.test2 figcaption h2{
margin-top:15%;
}
.test2 figcaption div{
border:2px solid #fff;
width: 80%;
height:80%;
position: absolute;
top: 10%;
left: 10%;}
在父元素没有设置边框的情况下 设置子元素的margin值不是会导致margin值得堆叠的，也就是设置了margin值是没有作用的
