Shulou(Shulou.com)06/01 Report--

The main content of this article is to explain "what is the reason for the misplacement of CSS page layout". Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Next, let the editor take you to learn "what is the reason for the misplacement of CSS page layout?"

Why calculate the width?

The total page pixel width is for CSS page layout normalization and compatibility. When we construct a web page with left or right structure or use padding or margin to organize it, we will total the width of the whole page. If it doesn't add up, no matter whether the width is too large or too small, dislocation problems will emerge.

How to calculate the width of CSS

Example 1: we have a total organizational format of the dominant structure.

If the total width is 400px, then the left and right should add up to less than 400px, then we may have 300px on the left and 100px on the left.

Rough code:

The width of the left and right structure is calculated with css5.com.cn .yangshi {width:400px;} .zuo {float:left; width:300px; bac kg round:#CCC;} .you {float:right; width:100px; bac kg round: # 999} left 300px right 100px

Lag: if we are in the total width stubborn environment, the left side is 300px, and the right side is 120px, the total width exceeds 20px, let's see what the title will be, DIV+CSS code as follows:

The total width of the manipulative structure is css5.com.cn .yangshi {width:400px;} .zuo {float:left; width:300px; bac kg round:#CCC;} .you {float:right; width:120px; bac kg round: # 999} left 300px left 100px

According to the picture above, we can see that because the total width can be 20px, so the manipulative structure can not be flattened, so it rises and falls to the right. How misplaced compatibility problems arise, most of them in reality because of our total negligence, generally small difference is 1px-2px, so we will not create, so sweep dislocation compatibility can start from the total width.

Example 2: there is an example of 1px frame in the left and right structure, usually there is a 1px frame in the structure, and in the future, when we set up the equipment configuration, it is important to calculate the width of the frame together with the width of the structure. Accurate example: CSS and html code below:

The total width of the left and right structure is css5.com.cn. Yangshi {width:400px;} .zuo {float:left; width:298px; border:1px solid # F00; bac kg round:#CCC;} .you {float:right; width:98px; bac kilogram round: # 999; border:1px solid # F00;} left 300px left 100px

Final picture:

Width configuration screenshot because both the left and right structures have the width of 1px, which is critical to subtract the border width of 2 pixels, so the last on the left is 298px, and the left is the width of 98px.

If the border is not subtracted, it will result in the following achievements:

DIV+CSS sets percentage width totals. Occasionally, we also need to use percentages to add up the width. Usually, it is also the total percentage width, which cannot exceed 100%.

At this point, I believe that you have a deeper understanding of "what is the reason for the misplacement of CSS page layout?" you might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.