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

This article mainly introduces the relevant knowledge of the method of CSS page layout dislocation, the content is detailed and easy to understand, the operation is simple and fast, and it has a certain reference value. I believe that you will gain something after reading this CSS page layout dislocation method article. Let's take a look at it.

Why the total width

The debate over the pixel width of web pages is for the standardization and compatibility of CSS web pages. Our layout dominates the structured web page or the time when we use padding or margin to organize the page will add up the width of the whole page. if we don't take into account whether the crossing is too big or too small, it will lead to dislocation.

How to add up the CSS width

Example 1: we calculate the structural pattern of a manipulative structure.

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

Exact code:

Dominant structure width dispute css5.com.cn .yangshi {width:400px;} .zuo {float:left; width:300px; bac kilogram round: # CCC;} .you {float:right; width:100px; background:#999} left 300px left 100px

Error: suppose that if we are obstinate in the total width, the left side is 300px and the left side is 120px, the total width exceeds 20px, let's see what happens. The DIV+CSS code is as follows:

Css5.com.cn .yangshi {width:400px;} .zuo {float:left; width:300px; bac kg round:#CCC;} .you {float:right; width:120px; background:#999} left 300px left 100px

According to the picture above, we can see that because the total width outlines the 20px, so that the manipulative structure is not flattening, it shows that the right side falls down. How there are misplaced compatible titles, most of them are ignored because of our calculation in theory, and the usual time with a small difference is 1px-2px, so we won't create it, so wiping misplaced compatibility can start with width calculation.

Example 2: there is a 1px frame in the dominant structure, as usual, there are 1px borders in the control structure. In the future, if we add some borders, when we set up the control structure, it is important to add the width of the frame and the width of the control structure together. Accurate example: CSS and html code below:

Dominant structure width dispute 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 kg round:#999; border:1px solid # F00;} left 300px right 100px on the left side of the CSS page layout dislocation method "this article is introduced here, thank you for reading! I believe you all have a certain understanding of the knowledge of "the method of CSS page layout dislocation". If you want to learn more knowledge, you are welcome to follow the industry information channel.

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.