1. Solve the problem that "background-image:url(./picture/1.jpg);" picture does not display
Set the width or height of the box that introduces the picture or its parent box to solve the problem
2. Set horizontal and vertical centering:
parent element:
position:relative
child element:
position:absolute
left:50%
top:50%
margin-left: - width half px
margin-top: - height half px
Question: top: 50% setting is invalid, I don’t know why
Directly change the margin-top to a positive value
3. Flexible layout
parent element:
display:flex
child element:
flex:1
The value after flex indicates the proportion, which is relative to other elastic boxes
4. js code
Each time you click, first set all divs to the original style, and then set the clicked box to a special style
5. Effect
Friends know how to solve the top: 50% setting is invalid