固定布局（为栏设定内边距和边框）
Posted 倚笑乘风
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了固定布局（为栏设定内边距和边框）相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>title</title> <link rel="stylesheet" type="text/css" href="./normalize.css"> <script> (function() { if (! /*@cc_on!@*/ 0) return; var e = "abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video".split(\', \'); var i= e.length; while (i--){ document.createElement(e[i]) } })() </script> <style type="text/css"> * {padding:0;} #wrapper {width:960px; margin:0 auto; border:1px solid; } #wrapper li {list-style-type:none;} a{color: #fff; text-decoration: none;} nav{ width: 150px; float: left;background: red;} article {width:600px;float:left;background:#ffed53;} aside{ float: left; width: 210px; background: blue;} header{ background: #f90; } footer{ background: #000; clear: both; } </style> </head> <body> <div id="wrapper"> <header>页头</header> <nav> <ul> <li><a href="#">无序列表</a></li> <li><a href="#">无序列表</a></li> <li><a href="#">无序列表</a></li> <li><a href="#">无序列表</a></li> <li><a href="#">无序列表</a></li> </ul> </nav> <article> 这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素这里是一些文本元素. </article> <aside> <ul> <li><a href="#">第三列导航链接</a></li> <li><a href="#">第三列导航链接</a></li> <li><a href="#">第三列导航链接</a></li> <li><a href="#">第三列导航链接</a></li> <li><a href="#">第三列导航链接</a></li> </ul> </aside> <footer>页脚</footer> </div> </body> </html>
如上代码所示，是一个设定固定宽高的三列布局。这种情况往往需要设置盒子的内外边距。但如果单纯在盒子里添加的话，必定导致总宽度增加，盒子滑移。一般这种情况下有三种解决方法：
1.从设定的元素宽度中减去添加的水平外边距、边框和内边距的宽度和。（每次有添加都得计算，麻烦）
2.在容器内部的元素上添加内边距或外边距。（需要添加额外div元素）
<article> <div class="inner"> <!-- 文本 --> </div> </article>
看，也不过是单单添加一个div而已，然后给它添加个样式
article .inner { margin:10px; border:2px solid red; padding:20px; }
中间栏的宽度并未因此有什么变化，因为内容区减少的宽度抵消了应用到内部 div 上的外边距、边框和内边距的总宽度。就是说如果布局中的栏是浮动的，而且都设定了宽度，你就根本不要去动它！要动，就把内容放在内部 div 里，动这个 div 。注意：如果容器的上、下边框不可见，内部 div 的上、下外边距会叠加。要是你遇到了这个问题，可以只为容器设定垂直内边距。但要小心一点，别一块儿也添加水平内边距。
3.使用 CSS3 的 box-sizing 属性切换盒子缩放方式，比如 section {box-sizing:border-box;}。应用 box-sizing 属性后，给 section 添加边框和内边距都不会增大盒子，相反会导致内容变窄。（老浏览器存在兼容问题 IE6和 IE7不支持 box-sizing属性）
这是最简单的一个办法，只要在三个浮动的栏的CSS规则中分别加上box-sizing:border-box 声明，再给栏添加内边距（和边框）就不会导致盒子的宽度变化了。此时，既不用调整栏宽去抵消增加的内边距，也不用使用内部 div ，添加内边距的结果就是内容收缩。至于 IE6和 IE7不支持 box-sizing的问题，有一个专门解决这个问题的腻子脚本（polyfill），名叫 borderBoxModel.js。你可以使用条件注释（以便只有 IE6 和 IE7 加载）把它添加到 HTML 标记之后、结束的 </body> 标签之前，以保证在加载 DOM之后再执行该脚本：
<body> <!-- HTML 标记 --> <!-- 只让 IE8 之前的 IE 加载它 --> <!--[if lt IE 8 ]> <script src="helpers/borderBoxModel.js"></script> <![endif]--> <!--[if lt IE 8 ]> <script src="helpers/borderBoxModel.js"></script> <![endif]--> </body>
以上是关于固定布局（为栏设定内边距和边框）的主要内容，如果未能解决你的问题，请参考以下文章