Tip: Pay attention to the length details when using CSS to create a webpage

The value of background-position can be the unit of length, percentage, or keyword.
The length unit is easy to understand. The value is positive, and the value is negative. In the keyword, "left top" means "0% center" means "50% right bottom" means "100%". How is the percentage calculated?
For example, if it is background-position: 50% 0, it is the coordinates starting at the upper left corner of the container (50%, 0) and starting at the upper left corner of the background image (50%, 0, however, such a statement seems to be difficult to calculate.
It is easy to say that the container width is equal to the background image width and then multiplied by 50%. The same is true for high computing.
For example, the container width is 1000px, and the background image width is 800px:
If the value of background-positionX is 50%, it is (1000px-800px) * 50% = 100px;
If the value of background-positionX is-50%, it is (1000px-800px) *-50% =-100px.
For example, if the container width is 600px, the background image width is 800px:
If the value of background-positionX is 50%, it is (600px-800px) * 50% =-100px;
If the value of background-positionX is-50%, it is (600px-800px) *-50% = 100px.
In the last example, even if the percentage is negative, the left side of the background image of the container is blank or the background color is displayed. The percentage is amazing!
Because the minimum unit of display on the screen is 1 PX, the length of a number such as 773 * 50% = 386.5 must be selected.
IE: calculated in rounding mode.
Firefox: After calculation, the fractional part is ignored, but the extra length is allocated to each element.
If only 1 PX is exceeded, for example, 2*386 = 772, the remaining 1px will be included in one of the elements, and the first element will be preferentially allocated. If 773px is allocated to two 50% elements, the following result will be obtained: when 387px and pixel px are allocated to four 25%, the following values are obtained: 194px, 193px, 193px, and 193px. For more pixels, such as 773 * 33.3% = 257.409, 773 * 33.33% = 257.6409, because the number of decimal points ignored is different, the allocation principles are different, and relevant information cannot be found. The following is my conjecture: the distribution of the three elements is rounded down, the four homes are preferentially allocated to both sides, and the five homes are preferentially allocated to the first two sides. If more elements are allocated to more than three elements, I cannot find the rule, but the first one will be allocated.
FF has some strange things. Firefix test page. 1024 width will not be automatically allocated, maybe because the outer layer is also decimal, resulting in 1 px not allocated, and then test Firefox
Opera & Safari2: the fractional part of the percentage is ignored during calculation, and the calculated value ignores the fractional part. If the element inside is greater than the calculated width, it will not cause the next element to wrap.
Netscape & Mozilla: ignores decimal points after computation. The Extra part is similar to Firefox, but the extra part is more transparent and strange, such as 33.33% * 3 = 99.99% less than 100%, but it is more than 100%. There are not many users using strange browsers, so you don't have to worry too much about these two browsers.
The test is not completed. If you are interested, you can help test the test. On the test page, you can tell me the reason.