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

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%设置无效该怎么解决嘛

猜你喜欢

转载自blog.csdn.net/sxp19980829/article/details/123260554