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

This article mainly introduces "the method of DIV CSS width calculation". In the daily operation, I believe that many people have doubts about the method of DIV CSS width calculation. The editor consulted all kinds of data and sorted out simple and easy-to-use operation methods. I hope it will be helpful for you to answer the doubts of "DIV CSS width calculation method". Next, please follow the editor to study!

Why calculate the width

The pixel width of the CSS page is calculated for neat layout and compatibility. It is common for us to structure the page around the layout or use padding or margin layout to calculate the width of the whole page. If we do not calculate whether the width is too large or too small, there will be dislocation problems.

How to calculate the width of CSS

Example 1: we calculate the layout style of a left and right structure.

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

Correct code:

Left and right structure width is calculated www..com .yangshi {width:400px;} .zuo {float:left; width:300px; background:#CCC;} .you {float:right; width:100px; background:#999} left 300px right 100px

Above is the correct left and right structure. The total width is exactly equal to 400px.

Error:

If we have the same total width and the left side is 300px and the right side is 120px, the total width exceeds 20px, let's see what happens. The DIV+CSS code is as follows:

Left and right structure width is calculated www..com .yangshi {width:400px;} .zuo {float:left; width:300px; background:#CCC;} .you {float:right; width:120px; background:#999} left 300px right 100px

We can see that because the total width is about 20px, so the left and right structure can not be flattened, and the right side falls down.

In this way, there is a problem of misplaced compatibility. In practice, because of our negligence in calculation, it is usually 1px-2px when the difference is small, so we will not find it, so we can start with width calculation to eliminate misplaced compatibility.

Example 2: there is an example of 1px frame in the left and right structure

Generally, there are 1px frames in the left and right structure, and then some borders are added. When we set up the left and right structure, we need to calculate the width of the frame and the width of the left and right structure.

Correct example:

The CSS and html codes are as follows:

Calculate the left and right structure width of www..com .yangshi {width:400px;} .zuo {float:left; width:298px; border:1px solid # F00; background:#CCC;} .you {float:right; width:98px; background:#999; border:1px solid # F00;} left 300px right 100px

Because both the left and right structures have the width of 1px, the width of the border needs to be subtracted by 2 pixels each, so the last on the left is 298px, and the right is the width of 98px.

DIV+CSS setting percentage width calculation

Sometimes we also need to use a percentage to calculate the width, usually the total percentage width, which cannot exceed 100%.

At this point, the study of "the method of calculating the width of DIV CSS" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.