2020-10-22 最近遇到的问题以及解决方案

在图片上划上一个透明图片

主要利用 overflow：hidden；把第二个图片隐藏，再利用 hover 当鼠标放上去时，第二个图片再随之划上去。透明度标签 opacity：（0~1）；

<div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
</div>

.box{
    height: 200px; 
    width: 200px; 
    background-color: pink; 
    position:relative; 
    overflow-y:hidden;
}
.box1{
    background: url("fangkuai.png") no-repeat; 
    background-size: 200px 200px; 
    width: 200px; 
    height: 200px;
}
.box2{
    background: url("ziyuan.png") no-repeat; 
    background-size: 200px 200px; 
    width: 200px; 
    height: 200px;
    opacity: 0.4; 
    transition: all 0.8s ease; 
    position: absolute; 
    top:200px;
}
.box:hover .box2{
    position: absolute; 
    top: 0;
}

效果图：

当鼠标放上去时在图片上出现一个透明遮罩

利用动画@keyframes from opacity 1 to opacity 0.2

<div class="box3">
    <div class="box4">

    </div>
</div>

.box3{
    position: relative;
    background-color: aquamarine;
    width: 200px;
    height: 200px;
    top: 30px;
}

.box4{
    position: absolute;
    width: 200px;
    height: 200px;
    background: url("fangkuai.png") no-repeat; background-size: 200px 200px;
}
.box4:hover{
    animation-name: opa;
    animation-duration: 0.8s;
    animation-fill-mode: forwards;
    background-color: yellow;
    transition: all 2s ease;
}
@keyframes opa {
    from{
        opacity: 1;
    }
    to{
        opacity: 0.2;
    }
}

效果图：

position 子父的绝对定位

代码如下：

<div id="box">
    <div class="box1">

    </div>
    <div class="box2">

    </div>
</div>

#box{
    background-color: wheat;
    width: 200px;
    height: 200px;
    position: relative;
}
.box1{
    /*position: absolute;*/
    background-color: aquamarine;
    width: 100%;
    height: 100%;
}
.box2{
    background-color: lightgrey;
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50px;
    left: 50px;
    right: 50px;
}

发现问题：在没有对box1绝对定位的情况下，对box2绝对定位，发现当box1占了位置后，box2会被挤下去，margin-top 对其并没有作用。

原因是没有对其设置top高度，定位元素在默认位置处。在对其设置 top 后：

box2才相对于父元素绝对定位了。

盒模型塌陷问题

一、外边距塌陷（相邻块元素垂直外边距合并）
原因：兄弟块元素，同时设置不同的 margin-top，最后展示的是最大的 margin-top 的值

<div id="container">
    <div id="box1">

    </div>
    <div id="box2">

    </div>
</div>

#container{
    background-color: lightgrey;
    width: 300px;
    height: 300px;
}
#box1{
    display: inline-block;
    background-color: wheat;
    width: 100px;
    height: 100px;
    margin-top: 20px;
}
#box2{
    display: inline-block;
    background-color: cadetblue;
    width: 100px;
    height: 100px;
    margin-top: 50px;
}

解决办法：只给第一个元素设置 margin

二、外边距合并（嵌套元素垂直外边距的合并）

<div id="box">
    <div class="inner_box1">
        <div class="inner_box2">

        </div>
    </div>
</div>

#box{
    background-color: wheat;
    width: 400px;
    height: 400px;
}
.inner_box1{
    background-color: cadetblue;
    width: 300px;
    height: 300px;
}
.inner_box2{
    background-color: lightpink;
    width: 200px;
    height: 200px;
    margin-top: 100px;
}

解决办法：
① 给父元素添加： border-top
② 给父元素添加：padding-top
③ 给父元素添加：overflow: hidden
④ 给父元素添加：position: absolute
⑤ 给父元素添加：display: inline-block

页面缩放不影响布局

<div id="main">
<!--内容-->
</div>

#main{
	width: 1386px;
	height: 1000px;
	margin: 0 auto;

① 赋予一个固定宽高
② 给 body 或 html 加一个最小宽度 min-width px 单位
③ 先给 body 或 html 设100% 宽 ， 其余元素使用百分比