Tips: Use CSS to make the details of the length in the process of Web pages

css| Process | skills | Web page

The Background-position value can be a length unit, a percentage, or a keyword.

Length units are better understood. How much, positive, negative on the negative. And the keyword in the left top is 0% center is 50% right bottom is 100%, that percentage is how to calculate?

If it is background-position:50% 0, that is, the beginning of the upper-left corner of the container (50%,0) and the background of the beginning of the upper-left corner of the coordinates (50%,0) position at the same point, but such a statement seems to be difficult to calculate.
Alternatively, it is easier to understand: the width of the container minus the width of the background image, multiplied by 50%, the calculation of the same height.

such as container width 1000px background image width 800px:

If the Background-positionx is 50%, it is (1000px-800px) * 50% = 100px;

If Background-positionx is-50%, it is (1000px-800px) *-50% = -100px.

For example, container width 600px background image width 800px:

If Background-positionx is 50%, it is (600px-800px) * 50% = -100px;

If Background-positionx is-50%, it is (600px-800px) *-50% = 100px.

The last one will appear even if the use of a negative percentage of the container's background to the left blank or background color, the percentage is really wonderful!

Because the smallest unit that the screen can display is 1px, there must be a trade-off with the length of a number like 773*50%=386.5.

　　IE: calculated in rounded manner.

　　Firefox: The computed value ignores the decimal part, but assigns the extra length to the elements inside. If you have only 1px, such as 2*386=772, the remaining 1px will go to one of the elements, prioritizing the first element, like 773px allocated to two 50%: 387px and 386PX, when assigned to four 25%: 194px, 193px, 193px and 193px, but for a few px, such as 773*33.3%=257.409,773*33.33%=257.6409, due to ignore the decimal number is not the same, the principle of distribution is not the same, can not find relevant information, the following is my guess, three elements, According to the way of rounding, the priority of the four homes to the two sides, five priority assigned to the front two, for the allocation of more than three elements, more than part of the free distribution, I can not find the law, but the first will definitely be assigned to.

There are some strange places in ff. Firefix test page. 1024 width is not automatically allocated, perhaps because the outer layer is also a decimal, resulting in 1px did not allocate, and then test Firefox

　　Opera & Safari2: The fractional part of the percentage is ignored in the calculation, the computed value ignores the decimal portion, and if the element inside is greater than the calculated width, the following elements will not be wrapped.

　　Netscape & Mozilla: After the calculation ignores decimals, the more part is similar to Firefox, but the more part is than transparent display, and more strange, such as 33.33%*3=99.99% less than 100%, but more than 100%, Strange browser, fortunately, not many people use, do not care about the two browsers.

Test is not completed, interested friends to help test, a separate test page, a friend who knows the reason to talk about.