总结思考在项目中出现的问题

 在项目中出项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）。

未解决部分