本文主要包含CSS,固定宽度等相关知识,dopppler 希望在学习及工作中可以帮助到您
.布局前的认知
1.1 三种基本方案
多栏布局有三种基本的实现方案：固定宽度、流动、弹性。
固定宽度。布局的大小不会随用户调整浏览器窗口大小而变化，一般是 900 到 1100 像素宽（最常见的是 960 像素）。
流动。布局的大小会随用户调整浏览器窗口大小而变化。（结合 CSS 媒体查询，能够适应最大和最小的屏幕，业界称之为 响应式设计。）
弹性。在浏览器窗口变宽时，不仅布局变宽，而且所有内容元素的大小也会变化。（实现太过复杂，不多介绍。）
1.2 布局高度
多数情况下，布局中结构化元素（乃至任何元素）的高度是 不必或者不应该设定的。因为保持元素 height 属性的默认值 auto 不变，才能使元素根据自己包含内容的增加而在垂直方向上扩展。这样扩展的元素会把下方的元素向下推，而布局也能随内容数量的增减而垂直伸缩。
1.3 布局宽度
为了使浏览器窗口宽度合理变化，布局能作出适当的调整，我们 需要精细地控制 布局宽度。
2.三栏-固定宽度布局
结构如下：
上代码：
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>三栏-固定宽度布局</title>
- <style>
- * {
- margin: 0;
- padding: 0;
- }
- #wrapper{
- width: 960px;
- margin: 0 auto;
- border:1px solid;
- }
- header{
- background: #f00;
- }
- nav{
- background: #dcd9c0;
- width: 150px;
- float:left;
- }
- article{
- background: #ffed53;
- width: 600px;
- float: left;
- }
- aside{
- background: #6a6b6c;
- width: 210px;
- float: left;
- }
- footer{
- clear:both;
- background: #6a6b6c;
- }
- </style>
- </head>
- <body>
- <div id="wrapper">
- <header>
- This is header.
- </header>