Margin left: -100% understanding in the Grail layout

If not set margin-left:100% Words , that left and right Elements will be squeezed into the second line because of insufficient space

1. Yes margin Interpretation of values ：
① Father son relationship ：margin-left It refers to the left boundary between the child and the father ( If father has left padding value , It refers to this padding Line ) Distance of .margin-right It refers to the right boundary between the child and the father ( If father has right padding value , It refers to this padding Line ) Distance of .
② Brotherhood ：margin-left It refers to my left boundary and my left brother's right boundary ( If brothers have right padding value , It refers to this padding Line ) Distance between .margin-right It refers to the distance between my right boundary and my right brother's left boundary ( If brothers have left padding value , It refers to this padding Line ).
The illustration ：

2. about margin Understanding of taking negative values ：
margin Negative values change the space occupied by elements . If you don't give him negative value , It must show on the second line , Because he occupies space .
This example ,left The width is 200px, When I set left Of margin-left by 200px, When it is the same width as him ： That's what happens ：

Obviously, we need to move more to the left , What is the distance of movement ?

center Width - left Width , That is, the distance marked in red in the figure below

We can conclude that ： Just set up margin-left The negative value of is center The width of （ Initially moved 200px+ Distance to be moved ==center Width ）

The second most intuitive understanding ：

left The distance from the left of to the right of the parent element is equal to 200px

3. margin-left The meaning when the value of the attribute is a percentage ：
When margin-left Percentage of value , Is the percentage relative to the width of the parent element

In the Grail layout, we set center The width is 100%, So the width of the parent element 100% Exactly equal to center Width , That's what we want