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% 宽 ， 其余元素使用百分比