§ ITPOW >> 文档 >> CSS

CSS 布局简明教程-用 wrapper 让页面居中

作者:vkvi 来源:ITPOW(原创) 日期:2011-2-24

不使用 table 分列,而使用 CSS 来分列是个老话题,网上也有很多文章,本教程旨在使用示例解释布局方法及解决常见问题。

兼容性

各浏览器对 CSS 的解释差别很大,尤其是 IE,又尤其是 IE 6,而 IE 6 仍然占有广泛市场,所以不得不考虑。

所以,要使用 DOCTYPE。(其实,即使没有兼容性的问题,也应该使用 DOCTYPE,这是标准。)

上面加上 XHTML 1.0 的 DOCTYPE,这有个好处,就是最大限度的让 IE 的解释向标准看齐,这样可以减少不兼容的地方,虽然减少得不多,但很重要。

XHTML 1.0 有 Strict、Transitional、Frameset,请参见 HTML/XHTML 的 DOCTYPE 大全,根据自己的需要选用。

wrapper

各用户都习惯了用 wrapper 这个名字作为最外层 div 的命名,它的作用就是把页面框起来,好限定宽度及其他设置。

wrapper 中,让左右 margin 为 auto,就实现了居中。我们还设置了 width 的宽度,这就设置了页面的宽度。

顺便巩固下 CSS 知识:

  • margin:auto; 上下左右 margin 均为 auto。
  • margin:0px auto; 上下 margin 为 0px,左右 margin 为 auto。
  • margin:0px 1px 2px 3px; 上 margin 为 0px,右 margin 为 1px,下 margin 为 2px,左 margin 为 3px。

运行一下示例


[Ctrl+A 全部选择 提示:您可先修改部分代码,再按运行]

 

相关文章