Web11页面布局

单栏布局

双栏布局

三栏布局

圣杯布局

双飞翼布局

布局：现有样式不能满足需求

文档流 浮动 定位

需求：导航栏+内容

            导航栏+内容+广告栏

            从上到下 从左到右  定宽  自适应

CSS2 没有提供原生支持，所以需要将一些属性组合起来，以实现布局

div+css  中国特色叫法  <div>是一个无语义的标签，适合做与内容无关的事情

常见布局：固定宽度布局

                    弹性布局(fluid) （考虑的较多）

                    响应式布局--多终端

如何实现：

定宽

width: 1000px;   或者max-width： 1000px；

水平居中

margin-left: auto;  margin-right: auto;

width:600px  和  max-width:600px

当屏幕区域小于600px时     width：600px会出现滚动条

                                                max-width：600px不会出现滚动条 屏幕是多少宽度它就是多少宽度

单列布局

单列布局（节省标签）

单列通栏布局  给body设置min-width去掉滚动色bug

.parent{text-align:center;}.child

IE6不支持  inline-block

aside在左边

aside在右边
要注意浏览器的渲染顺序

两边固定中间自适应

双飞翼

圣杯布局

是一种三列布局，两边固定宽度，中间自适应

中间内容元素在dom元素次序中优先位置

圣杯布局代码

缺点：main的宽度一定要大于等于aside的宽度 不然会出bug

代码示例：水平排列布局

另一个实例：多行排列

http://js.jirengu.com/ditin/1/edit?html,css,output