本站宽度尺寸980像素

以下将演示CSS排版代码，如需了解，请右键查看

常规区分块 就只能用背景色

这是浏览器兼容问题

这样排版，还可以实现自适应

如果使用边框模式

需要增加 box-sizing:border-box;

需要增加一段代码 才能兼容

上面的文字 为什么离边框很近，如果有很多文字，整体就不美观，那么我们就需要增加一个距离边框的代码，这样相对好看一些。就比如我现在的这段文字，看起来还相对比较好看。因为这里上下左右都留有边距。居于自适应和兼容，我们在宽度上均采用百分比模式。也可以固定的值，比如宽度936px，边距22px。下列为百分比模式的更好看排版，这是很多网页布局排版新手需要了解的。避免采坑。

这种模式缺少外边距

虽然我们使用了内边距

考虑兼容，所以排版不是我们想要的

这种模式使用了外边距和内边距

出于兼容考虑，应该删除内边距

为了更好，建议在框内再设置一个DIV

如果你把这里的代码领悟透彻，那么WEB网页布局就很简单。