在项目中出项bug,是程序员必需经过的过程,出现bug并不可怕,没有完美的程序,追求100%的还原网页,也只存在于柏拉图式的程序中。📀
所以在出现bug时,我们先不要害怕,要多多尝试用不同方式去。去解决它,并在解决后,及时总结思考,本篇博文作为长期更新的博文,按照时间,技术等进行更新,希望能帮助到学习web前端技术的程序员们🖥️⌨️ 🖱️
已解决部分
css
(1)css背景颜色与复合背景属性相互冲突问题</font’>
//html
<a href="#" class="select-link action icon"><span>销量</span></a>
//css
//在一个元素中写入背景图片属性写入背景图
//元素呈正常模式显示(第一张图)
.select-data-show-item1 .select-link.action.icon {
background-image: url('../img/arrowhead01.png');
background-repeat: no-repeat;
background-position: 41px 8px;
padding-left: 8px;
padding-right: 6px;
}
//但使用复合写法写入背景属性
//块盒设置中的background-color属性直接与复合元素background中背景颜色发生属性冲突
//按照属性值计算规则中的css权重值规则和就近原则,选择了复合元素中背景颜色透明属性值
//复合元素页面显示显示(第二张图)
//为方便查看调整父元素背景色(第三张图)
.select-data-show-item1 .select-link.action{
background-color: #15aafb;
color: white;
}
.select-data-show-item1 .select-link.action.icon {
background: url('../img/arrowhead01.png') no-repeat 41px 8px;
padding-left: 8px;
padding-right: 6px;
}
(2)HTML中父元素宽为100% 子元素为固定高度造成颜色未补充问题
蓝色背景色是父元素 宽度为100%,
图中红色边框是是导航栏的子元素,设置为最小宽度1200px,
虽然父元素可以随着视口的宽度而改变宽度 从而背景颜色也随之改变,但子元素因为没有设置 背景颜色,就会导致当视口宽度小于最小宽度时,会导致颜色无补充,页面观感不好,影响用户体验
解决方法
//方法一
//在父元素中添加最小宽度跟子元素最小宽度同宽
.nav-box{
width: 100%;
height: 40px;
background-color: #0671d7;
min-width: 1200px;
}
//方法二
//子元素中添加与父元素相同的背景色
.nav-box >.nav-content{
height: 40px;
background-color: #0671d7;
}
(3)当定位元素的子元素大小覆盖父元素时问题
发现这个问题时时在蓝色外框时子元素,
且大小都已经覆盖白色圆形父元素,
此时设置背景色时就会完全盖住父元素
后,通过父元素hover控制子元素实现不了
中间尝试过改变z-index正整数大小来改变层叠,无果
//父元素
.guding .guding-item {
width: 50px;
height: 50px;
float: left;
border-radius: 50%;
border: 1px solid #15aafb;
background-color: #15aafb;
margin-top: 8px;
position: relative;
}
//子元素
.guding-item-box {
width: 185px;
height: 52px;
position: absolute;
border-radius: 30px;
border: 1px solid #15aafb;
background-color: #15aafb;
top: -2px;
right: -2px;
display: none;
}
解决方法
在子元素绝对定位设置z-index为负数!为负数!为负数!
父元素相对定位不设置z-index
.guding .guding-item {
position: relative;
}
.guding-item-box {
position: absolute;
z-index:-1;
}
(4)由boder引发高度塌陷问题(faker)。