在沒(méi)有設(shè)置父級(jí)元素邊框的情況下，直接設(shè)置子元素margin的問(wèn)題
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%;}
在父元素沒(méi)有設(shè)置邊框的情況下 設(shè)置子元素的margin值不是會(huì)導(dǎo)致margin值得堆疊的，也就是設(shè)置了margin值是沒(méi)有作用的
2022-03-25
歡迎常來(lái)慕課學(xué)習(xí)！小伙伴在等著你！嗯嗯，所以才有了相應(yīng)式布局的出現(xiàn)
2016-06-30
margin值遇大取大，沒(méi)有才加