CSS页面布局

布局内容简介

1、用内部DIV创建浮动栏

2、用box-sizing替代内部DIV

3、css3的display属性

多栏布局的实现方案

1、固定宽度：不多介绍，常用的宽度是960px

2、流动布局：随窗口调整会变宽度；支持CSS媒体查询，可变的固定布局被称为“响应式设计”

3、弹性布局：暂无

--设计注意点：控制布局的宽度，而让内容决定布局高度即可。

三栏固定布局

为固定的宽度元素添加水平外边距、边框和内边距，会导致元素盒子变宽。像这样增大浮动栏的宽度，会造成“浮动滑移”，对此有三种方法来解决：

1、从设定的元素宽度中减去添加的水平外边距、边框和内边距的宽度。---不可行

2、在容器内部的元素上添加内边距或外边距。

        （1）给div内部的元素逐个添加边距控制，其实就是给div的内容添加边距进行控制----太麻烦，而且边框的增加调整效给所有的内容逐个调整。

        （2）给div添加一个内部div，控制内部div的边距---可行，经典的内部div控制布局。

3、使用css3的box-sizing属性切换盒子缩放方式，比如section {box-sizing:border-box;}。应用box-sizing属性后，给section添加边框和内边距都不会增大盒子，相反会导致内容变窄。

---如说明一样，box-sizing属性添加边框和内边距不会增大盒子，但是添加外边距会同样引起“浮动滑移”。

预防过大的元素处理办法：

            设计一个将来可能由他人维护的动态网站时，需要考虑得更长远一些。比如，应该预见到可能出现一些过大的元素。如果将来有一张比浮动栏更宽的图片被放到栏中，就会导致布局变宽，而右边的栏又会滑到下方。为 此 ， 一 个 简 单 的 预 防 措 施 就 是 添 加 一 条 .inner img{max-width:100%;}声明，以便限制图片的宽度不超过其父元素（在此就是内部 div）。

           另一个办法是给每个栏（或者内部 div，如果你用了的话）添加 overflow:hidden 声明。这条声明不会缩小图片以适应父元素，而会将它（以及任何过大元素）超出容器边界的部分剪切掉。

三栏-中栏流动布局

实现中栏流动布局有两种方法：

1、在栏中改变大小时使用负外边距定位右栏。

2、使用css3让栏容器具有类似表格单元的行为。负外边距适合比较老的浏览器，而css的table属性则要简单得多。

布局总结：

使用内部 div 的浮动固定宽度布局技术，它是适合新旧浏览器的一种最安全的技术。当然，这种技术要求的工作量也最多。而使用 boxsizing:border-box 声明（再加上适用于 IE7 和 IE6 的腻子脚本） 则能提供更直观的盒模型，而且不用使用内部 div。最后， CSS3 的display:table-cell 方案容易实现又功能完善（想流动就流动，想固定就固定，各栏同高，而且不需要内部 div）。然而，它只适合 IE7 以上版本的浏览器。