Incorrect CSS webpage layout: CSS width calculation, css width
Why calculate the width?
Calculating the pixel width of a webpage aims to make the CSS webpage layout neat and compatible. We usually calculate the width of the entire page when layout is left or right or when using padding or margin layout. If it is not calculated, whether the width is too large or too small, there will be a dislocation problem.
How to calculate CSS width
Example 1: Calculate a layout style of the left and right structures.
If the total width is PX, the sum of left and right should be less than PX, then we may be PX on the left and PX on the right.
Correct code:
<! DOCTYPE html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> calculate the width of the left and right structure www.webjx.com </title>
<Style type = "text/css">
. Webjxcom {width: 400px ;}
. Zuo {float: left; width: 300px; background: # CCC ;}
. You {float: right; width: 100px; background: #999}
</Style>
</Head>
<Body>
<Div class = "webjxcom">
<Div class = "zuo"> 300px on the left </div>
<Div class = "you"> 100px on the right </div>
</Div>
</Body>
</Html>
The preceding figure shows that the total width of the right and right structures is exactly PX.
Error:
If the total width remains unchanged, the left side is 300px, and the right side is 120px, the total width exceeds 20px. Let's see what will happen. The Code of DIV + CSS is as follows:
<! DOCTYPE html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> calculate the width of the left and right structure www.webjx.com </title>
<Style type = "text/css">
. Webjxcom {width: 400px ;}
. Zuo {float: left; width: 300px; background: # CCC ;}
. You {float: right; width: 120px; background: #999}
</Style>
</Head>
<Body>
<Div class = "webjxcom">
<Div class = "zuo"> 300px on the left </div>
<Div class = "you"> 100px on the right </div>
</Div>
</Body>
</Html>
We can see that because the total width is about 20 PX, the left and right structures cannot be flattened, and the right side is dropped down.
In this case, there is a misaligned compatibility problem. In practice, because of our computing negligence, the difference is usually 1 px-2px, which won't be discovered by us, therefore, to eliminate misfit compatibility, you can start with width calculation.
Example 2: 1px border instance in the left and right structure
Generally, the left and right structures have a 1 px border, and some borders are added. When we set the left and right structures, we need to calculate the Border width and the left and right structure width.
Correct example:
The CSS and html code are as follows:
<! DOCTYPE html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> calculate the width of the left and right structure www.webjx.com </title>
<Style type = "text/css">
. Webjxcom {width: 400px ;}
. Zuo {float: left; width: 298px; border: 1px solid # F00; background: # CCC ;}
. You {float: right; width: 98px; background: #999; border: 1px solid # F00 ;}
</Style>
</Head>
<Body>
<Div class = "webjxcom">
<Div class = "zuo"> 300px on the left </div>
<Div class = "you"> 100px on the right </div>
</Div>
</Body>
</Html>
Because both the left and right structures have the width of 1px, the Border Width of both the left and right sides needs to be subtracted, so the last side of the left side is 298px, and the right side is the width of 98px.
If the border is not subtracted, the following results will be displayed:
DIV + CSS set percentage width Calculation
Sometimes we also need to use the percentage to calculate the width, usually also the total percentage width, cannot exceed 100%
Pay attention to the following when calculating the CSS width:
Both the left and right structures, the layout of multiple columns, and the layout setting of a single DIV width need to pay attention to the width control and calculation. In particular, CSS attributes such as padding, margin, and border are used, at this time, we need to calculate the occupied width they set, and firmly grasp that the sum of the widths of the same row is less than or equal to the total width. If it is greater than the total width, there will be a misplaced compatibility problem. So we can start with the calculation width when there is a general dislocation. Of course, there are many reasons for the dislocation. This is also one of the solutions to the dislocation compatibility problem.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
