防止CSS网页布局错位 CSS宽度计算

2020-05-02 08:41:00易采站长站整理

<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</div>
<div class=”you”>右边100px</div>
</div>
</body>
</html>

因左右结构都有1px的宽度这个时候各需要减去左右2像素的边框宽度,所以左边最后是298px,右边为98px的宽度

如果不减去边框将会造成一下效果:

DIV+CSS设置百分比宽度计算
有时候我们也需要使用百分比来计算宽度,通常情况也是总的百分比宽度,不能超过100%

CSS宽度计算时候注意总结:
无论是左右结构、多列的布局还是单独一个DIV宽度的布局设置都需要注意宽度的把握与计算,特别是使用了padding、margin、边框等CSS属性,这个时候我们都需要将它们设置的占用宽度计算入内,牢牢把握同排各宽度之和小于或等于总宽度,如果大于总宽度将会出现错位的兼容问题。所以一般错位时我们就可以从计算宽度入手,当然错位还有很多原因这里也是解决错位兼容问题的方法之一。