个人收藏

收藏夹

本站宽度尺寸980像素
以下将演示CSS排版代码,如需了解,请右键查看
常规区分块 就只能用背景色
这是浏览器兼容问题
这样排版,还可以实现自适应
如果使用边框模式
需要增加 box-sizing:border-box;
需要增加一段代码 才能兼容
上面的文字 为什么离边框很近,如果有很多文字,整体就不美观,那么我们就需要增加一个距离边框的代码,这样相对好看一些。就比如我现在的这段文字,看起来还相对比较好看。因为这里上下左右都留有边距。居于自适应和兼容,我们在宽度上均采用百分比模式。也可以固定的值,比如宽度936px,边距22px。下列为百分比模式的更好看排版,这是很多网页布局排版新手需要了解的。避免采坑。
这种模式缺少外边距
虽然我们使用了内边距
考虑兼容,所以排版不是我们想要的
这种模式使用了外边距和内边距
出于兼容考虑,应该删除内边距
为了更好,建议在框内再设置一个DIV
如果你把这里的代码领悟透彻,那么WEB网页布局就很简单。