How to deal with CSS page dislocation

In our production page, we must pay attention to a few points, in order to make their own web page beautiful and smooth, then if the CSS page dislocation how to deal with it? Next, we will bring the page dislocation of the treatment and prevention methods.

Why Calculate width

The Web pixel width is calculated to be neat and compatible with the CSS page layout. The common layout of the left and right structure of the page or use padding, margin layout will calculate the full width of the page, if not calculated whether the width is too high or small will appear dislocation problem.

How to calculate CSS width

Example one: We calculate the layout style of a left and right structure.

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

Correct code:

<! DOCTYPE html> 
CSS width calculation of Web page dislocation

The total width of the left and right structure is exactly equal to 400px

Error:

If we are in the total width of the case, the left is 300px, and the right is 120px that the total width of more than 20px, we see what will happen, the DIV+CSS code is as follows:

<! DOCTYPE html> 
DIV CSS Layout Dislocation diagnostics

Because the total width of about 20px, so that the left and right structure can not be flat, it appears to fall on the wrong side.

In this way, there is a mismatch of compatibility problems, generally in practice because we calculate the negligence, the general difference between the time is 1px-2px, so we will not be found, so the elimination of dislocation compatibility can be calculated from the width of the beginning.

Example two: 1px frame instance in left and right structure

In general, there is a 1px border in the structure, and then with some borders when we set the left and right structure, we need to calculate the width of this border with the width of the structure.

Correct examples:

CSS and HTML code are as follows:

<! DOCTYPE html> 


Since the left and right structures have a width of 1px, this time each need to subtract about 2 pixels of the border width, so the left is the last 298px, the width of 98px on the

Div+css Setting percent width calculation

Sometimes we also need to use percentages to calculate the width, usually the total percent width, not more than 100%

CSS width calculation When the note summary:

Whether it is the left and right structure, multi-column layout or a single div width layout settings need to pay attention to the width of the grasp and calculation, especially the use of padding, margin, border and other CSS properties, this time we need to set their occupied width in the calculation, Firmly grasp the same row of the width of the sum of less than or equal to the total width, if greater than the total width will appear dislocation compatibility issues. So the general dislocation when we can start from the calculation of the width, of course, there are many reasons dislocation is also one of the ways to solve the problem of dislocation compatibility.

The processing method is so much, more wonderful please pay attention to the PHP Chinese network other related articles!

Related reading:

How to make icon effect with CSS3

How to use CSS3 to make a light. Display text animation

How to use canvas to achieve small ball and mouse interaction