来看看：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>
你用什么用的熟练就用什么，讲究的是效率，客户永远不管你用什么，页面就要好看，功能就要好用，还有时间和成本的问题。

只看该作者 · 发表于 2015-1-17 19:30:20

这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时，就要多花时间对其产生初步的印象。此外，多操作也是非常重要的。

仓酷云 · 发表于 2015-1-26 21:52:55

Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。

只看该作者 · 发表于 2015-2-5 04:04:54

Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH，专业网页图像设计软件FIREWORKS，并称为“网页三剑客”。

只看该作者 · 发表于 2015-2-11 05:08:03

难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心，坚持不懈的决心。在自己无法解决某些问题时，就需要虚心请教别人.

只看该作者 · 发表于 2015-3-1 22:44:56

技术的学习如同长跑。只要越过极限，就会越跑越轻松。技术的学习其实并不像想象中那么可怕，任何技术都并不高深莫测。

只看该作者 · 发表于 2015-3-11 02:36:11

足见市场的反响和MACROMEDIA公司对它们的自信。说到Dreamweaver8我们应该了解一下网页编辑器的发展过程，随着互联网(Internet) 的家喻户晓。

只看该作者 · 发表于 2015-3-17 21:00:28

帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。

只看该作者 · 发表于 2015-3-25 04:44:38

Dreamweaver在所见即所得添加链接时，可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。

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

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

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

相关帖子