如果CSS只能更改个别控件的显示，那还不够强大。实际上CSS可以用来布局整个页面，这也是有深度有设计的地方
良好的html结构
html负责内容，javascript负责行为，css负责样式。三者共同配合形成最终的页面
其中html是根基，设计的合理则后面两个的工作也会轻松。
那么什么是合理的html结构呢？
简单回答就是使用div标签做容器，根据业务需求设计出几大板块，基础性div定义id方便获取，div之下的内容使用class来调整样式
一方面简化html代码，避免多类症；另一方面也具有灵活性，配合selector可以精确到具体控件
另外设计html时只应该考虑内容，不用考虑显示。不管什么样的显示，都可以用CSS后期实现
比如这里展示一个常见的页面板式
使用div组织大板块，内容再继续丰富内容。这里为了简便起见就是个字符串而已
另外留意导入外部css文件的写法。固定格式，照着写即可
显示结果
在不指定任何样式的情况下，定义的控件会一个挨着一个依次往下排列
浮动布局
浮动布局是当前最流行的页面布局方式，其设计理念基于一个魔法般的属性：float
float: none | left | right
控件默认是none，即非浮动，表现形式就是上面看到的一个挨着一个依次往下排列
一旦定义为float，则行为方式会完全改变。float元素会以指定的高宽显示，并水平方向向左或向右紧贴包含元素内壁，或者紧邻前一个浮动元素。当显示不下时，会自动换行
过于抽象？看着例子就明白了
这里我们的想法是把navi,main,side并列显示出来，header和footer一上一下。经典的3行3列式布局
效果：
并不是我们想要的，fotter跑到上面去了，side到了最下面。什么情况？
这是因为留给side的宽度是20%，剩余也只是20%，这种情况下float按没有足够空间处理，于是side另起一行，于是footer向上补齐
那怎么办呢？简单的话留出足够空间即可
这里main只占用59%
另外注意footer使用clear来清除浮动。根据css解释，如果左右两侧存在浮动元素，就把自己清除到下一行显示
clear的值还可以是both
效果：
如果我们想换一种布局，让navi和side在左侧垂直显示，main在右侧取平呢？
没问题。
注意这里的技巧
我们把navi定义为非浮动元素，然后side和main一左一右
但是如果只是如此，则side和main会另一一行，并列显示，main不会与navi平齐
解决方法是设置main的margin为负值，这样可以强行把main往上拉，提到与navi平齐的高度
这种设置margin的技巧常见于想要在垂直方向改变float元素的位置
效果：
定位布局
定位布局是页面布局的第二种技术路线，核心是把整个页面当做一个坐标系，然后设定元素坐标来显示到指定位置
position: static | absolute | relative | fixed
static即默认显示方法，absolute为指定绝对坐标，fixed是在absolute的基础上不受滚动条影响（可以做页面广告使用）
relative比较特殊，是static和absolute的折中：依然使用默认显示方式但是允许做位置偏移
top, right, bottom, left指定位置
z-index指定堆叠顺序
来看个例子：
将3个板块绝对布局
效果：
注意navi板块的位置。绝对布局的元素会无视其他元素，其他元素也会无视它。
这就跟在画布上直接绘制内容是一样的
绝对布局给了设计师更大的灵活性，但是也需要考虑多分辨率适配的种种问题