来看看：CSS网页结构错位:CSS宽度盘算

显示全部楼层 · 发表于 2015-1-15 22:53:23

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

你用什么用的熟练就用什么，讲究的是效率，客户永远不管你用什么，页面就要好看，功能就要好用，还有时间和成本的问题。
破洛洛文章简介：CSS网页结构错位。
为何盘算宽度
盘算网页像素宽度是为了CSS网页结构划一与兼容。罕见的我们结构摆布布局网页或利用padding、margin结构的时分将盘算整页宽度，假如不盘算不管是宽渡过年夜太小就会呈现错位成绩。
怎样盘算CSS宽度
例一：我们盘算一个摆布布局的结构款式。
假设总宽度为400px，那末摆布加起来就应该小于400px，那我们大概右边为300px，右侧为100px
准确代码：

<!DOCTYPEhtml>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>摆布布局宽度盘算www.poluoluo.com</title>
<styletype="text/css">
.poluoluocom{width:400px;}
.zuo{float:left;width:300px;background:#CCC;}
.you{float:right;width:100px;background:#999}
</style>
</head>
<body>
<divclass="poluoluocom">
<divclass="zuo">右边300px</div>
<divclass="you">右侧100px</div>
</div>
</body>
</html>
以上为准确的摆布布局总宽度恰好即是400px
毛病：
假设我们在总宽度稳定情形下，右边为300px，而右侧为120px那总宽度凌驾了20px，我们看看会呈现甚么成绩，DIV+CSS代码以下：
<!DOCTYPEhtml>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>摆布布局宽度盘算www.poluoluo.com</title>
<styletype="text/css">
.poluoluocom{width:400px;}
.zuo{float:left;width:300px;background:#CCC;}
.you{float:right;width:120px;background:#999}
</style>
</head>
<body>
<divclass="poluoluocom">
<divclass="zuo">右边300px</div>
<divclass="you">右侧100px</div>
</div>
</body>
</html>
我们依据上图可看出由于总宽度约莫了20px，以是招致了摆布布局不克不及平齐，就呈现了右侧往下失落。
如许就呈现了错位的兼容成绩，一样平常在实践中由于我们盘算的忽略，一样平常相差小的时分是1px-2px，那样就不会被我们发明，以是扫除错位兼容能够从宽度盘算动手。
例二：摆布布局中有1px边框实例
一样平常摆布布局中有1px边框，然后再加上有些边框这时候我们设置摆布布局时分就必要将此边框宽度与摆布布局宽度盘算在一同。
准确例子：
CSS与html代码以下：
<!DOCTYPEhtml>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>摆布布局宽度盘算www.poluoluo.com</title>
<styletype="text/css">
.poluoluocom{width:400px;}
.zuo{float:left;width:298px;border:1pxsolid#F00;background:#CCC;}
.you{float:right;width:98px;background:#999;border:1pxsolid#F00;}
</style>
</head>
<body>
<divclass="poluoluocom">
<divclass="zuo">右边300px</div>
<divclass="you">右侧100px</div>
</div>
</body>
</html>
因摆布布局都有1px的宽度这个时分各必要减往摆布2像素的边框宽度，以是右边最初是298px，右侧为98px的宽度
假如不减往边框将会形成一下效果：
DIV+CSS设置百分比宽度盘算
偶然候我们也必要利用百分比来盘算宽度，一般情形也是总的百分比宽度，不克不及凌驾100%
CSS宽度盘算时分注重总结：
不管是摆布布局、多列的结构仍是独自一个DIV宽度的结构设置都必要注重宽度的掌控与盘算，出格是利用了padding、margin、边框等CSS属性，这个时分我们都必要将它们设置的占用宽度盘算进内，紧紧掌控同排各宽度之和小于或即是总宽度，假如年夜于总宽度将会呈现错位的兼容成绩。以是一样平常错位时我们就能够从盘算宽度动手，固然错位另有良多缘故原由这里也是办理错位兼容成绩的办法之一。
</p>
你用什么用的熟练就用什么，讲究的是效率，客户永远不管你用什么，页面就要好看，功能就要好用，还有时间和成本的问题。

		自动登录	找回密码
密码			立即注册

[DIV+CSS] 来看看：CSS网页结构错位:CSS宽度盘算

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

相关帖子