点击切换图片显示实践-----问题总结

1、解决"background-image:url(./picture/1.jpg);"图片不显示问题

给引入图片的盒子或者其父盒子设置宽或高即可解决

2、设置水平垂直居中：

父元素：

position:relative

子元素：

position:absolute

left:50%

top:50%

margin-left:-宽度一半px

margin-top:-高度一半px

问题：top：50%设置无效，不知道是为什么

直接把margin-top改成了正值

3、弹性布局

父元素：

display:flex

子元素：

flex:1

flex后面的这个数值表示占比，与其他弹性盒子相对

 

4、js代码

 

每次点击时，先将所有div设置为原始样式，再将被点击的盒子设置为特殊样式

5、效果

  友友们知道top：50%设置无效该怎么解决嘛