本文主要是介绍CSS3页面布局-三栏-固定宽度布局，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
布局的基本概念
多栏布局三种基本实现方案：固定宽度，流动，弹性。
固定宽度布局：大小不会随用户调整浏览器窗口大小。
一版960-1100,960常见，可以被3,4,5,6,8,10,12,16整除。
流动布局：大小会随用户调整浏览器窗口大小而变化。
可以更好适应大屏幕，也叫响应式。
弹性布局：所有元素大小也会变换。
布局高度与布局宽度
布局高度：一般不该设定高度，除非页面上绝对定位的元素。
正常元素保持默认值auto不变，保持垂直居中。
布局宽度：精确控制布局宽度。
总结：一般原则，控制布局宽度，内容决定布局高度。
三栏-固定宽度布局
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>5.2 三栏-固定宽度布局</title><style>#wrapper {width: 960px;margin: 0 auto;border: 1px solid;}nav {width: 150px;float: left;}nav li {list-style-type: none;}article {width: 600px;float: left;background: #ffed53;}aside {width: 210px;float: left;background: #3f7ccf;}header {background: #f00;}footer {color: aliceblue;clear: both;background: #000;}</style>
</head><body><div id="wrapper"><header>固定宽度布局</header><nav><!-- 无序列表 --><ul><li>Link1</li><li>Link2</li><li>Link3</li></ul></nav><article><!-- 文本元素 --><h1>四川合江气温达42.2℃ 连续两天热到全国第一</h1><p>【四川合江气温达42.2℃ 连续两天热到全国第一】财联社8月22日电，据中央气象台官网信息，截至8月22日17时，在逐小时气温实况排行榜中，川渝地区气温在当天11时至17时连续7个小时霸榜全国高温榜“前十”。其中，四川合江在17时以42.2℃热到了全国第一。而在8月21日下午，四川合江的气温也突破40℃，登顶全国高温榜第一。</p><hr /><h1>外交部回应黑神话悟空全球大热</h1><p>21日，外交部发言人毛宁就“中国的国产游戏《黑神话：悟空》上线后，受到国际玩家青睐”作出回应：反映了中国文化的吸引力。</p></article><aside><h1>这是一个侧边栏</h1><p>今年是南开大学建校105周年。8月21日，南开大学2001级校友、字节跳动创始人张一鸣与南开大学2001级校友、字节跳动CEO梁汝波共同捐赠人民币2亿元，主要用于支持南开数学研究和人才培养。</p></aside><footer>这是页脚</footer></div>
</body></html>为栏设定内边距和边框
- 让内容和栏边边界空开距离，为栏添加水平外边距和内边距，栏与栏之间增加间距，导致布局宽度增大，使得浮动栏下滑。
- 在栏中添加大图片，或者长字符串，导致栏宽超过布局宽度，也会导致右侧栏滑到左下方。
防止浮动栏下滑：
- 从设定的宽度中减去内外边距加边框和，每次都得调整，容易布局错乱。
- 容器内部元素加上内外边距，加inner的div，内部div自动填充父元素，给内部div设置内外边距，可以保持内容与栏边界的距离，如果容器上下边框不可见，内部div上下外边距会叠加。
- 用CSS3的box-sizing切换缩放方式，border-box,内外边距不增大，内容变窄。最简单的一个方法，IE6,7不支持，用的腻子脚本（polyfill）解决。
Paul Irish 前端大神
预防过大的元素，加一条{max-width:100%}不超过父元素，另一个是给父元素添加overflow:hidden。
单词太长，添加word-wrap:break-word进行断词。
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>5.2 三栏-固定宽度布局</title><style>* {margin: 0;padding: 0;}#wrapper {width: 960px;margin: 0 auto;border: 1px solid #000;overflow: hidden;}nav {box-sizing: border-box;width: 150px;float: left;background: #dcd9c0;padding: 10px;}nav .inner {padding: 10px;}nav li {list-style-type: none;}article {box-sizing: border-box;width: 600px;float: left;background: #ffed53;padding: 10px 20px;}article .inner {margin: 10px;border: 2px solid red;padding: 20px;}aside {box-sizing: border-box;width: 210px;float: left;background: #3f7ccf;padding: 10px;}aside .inner {padding: 10px;}footer {text-align: center;}header {background: #f00;}footer {color: aliceblue;clear: both;background: #000;}</style>
</head><body><div id="wrapper"><header>固定宽度布局</header><nav><!-- <div class="inner"> --><!-- 无序列表 --><ul><li>Link1</li><li>Link2</li><li>Link3</li></ul><!-- </div> --></nav><article><!-- <div class="inner"> --><!-- 文本元素 --><h1>四川合江气温达42.2℃ 连续两天热到全国第一</h1><p>【四川合江气温达42.2℃ 连续两天热到全国第一】财联社8月22日电，据中央气象台官网信息，截至8月22日17时，在逐小时气温实况排行榜中，川渝地区气温在当天11时至17时连续7个小时霸榜全国高温榜“前十”。其中，四川合江在17时以42.2℃热到了全国第一。而在8月21日下午，四川合江的气温也突破40℃，登顶全国高温榜第一。</p><hr /><h1>外交部回应黑神话悟空全球大热</h1><p>21日，外交部发言人毛宁就“中国的国产游戏《黑神话：悟空》上线后，受到国际玩家青睐”作出回应：反映了中国文化的吸引力。</p><!-- </div> --></article><aside><!-- <div class="inner"> --><h1>这是一个侧边栏</h1><p>今年是南开大学建校105周年。8月21日，南开大学2001级校友、字节跳动创始人张一鸣与南开大学2001级校友、字节跳动CEO梁汝波共同捐赠人民币2亿元，主要用于支持南开数学研究和人才培养。</p><!-- </div> --></aside><footer>这是页脚</footer></div>
</body></html>这篇关于CSS3页面布局-三栏-固定宽度布局的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
