CSS基础如何避免table强迫症_css

面向页面设计而非面向浏览器设计

Xhtml+css能够实现的是一种流布局，也就是随着内容的长度自动增长区域，并且最终导致整个页面增长，这时候浏览器就必须显示滚动条。 table强迫症的一个征兆就是极力避免流布局，希望以浏览器的可视区域为布局目标，要求在可视区域中划分内容区域而不是在页面上划分内容区域。实际上 XHTML是无法针对浏览器设计的，因为它仅仅包含语义，或者说是内容，而浏览器如何去表现这些内容是我们无法确定的。CSS提供了我们控制表现方式的一种途径，但这仅仅是针对主流浏览器的，而且浏览器支持的“指令集”还有稍为的差别（说到这，我真希望能够为一个浏览器写CSS然后编译为全平台兼容代码），最后这些指令暂时还仅仅支持针对页面的流式布局控制。因此，如果你决定要开始写符合语义的XHTML并且仅仅用CSS控制布局，首先就要把思路转变为面向页面（或者说是文档）的布局控制，而非面向浏览器可视区域的布局控制。

接下来肯定有人要说，“那你就是承认了有些布局老方法很容易做到，但新方法很难做到啦”。这是当然的，然而这不成为我们继续使用table的理由。这时候要反过来探讨原始目标了，我们是为什么要控制布局？低层次的需求是为了美观，谁都希望同样的内容能够以更好的视觉效果展示在用户眼前；高层次的需求是为了控制受众的浏览方式，让他们能够按我们预先设计好的方式来区分页面内容的轻重点，按我们的期望优先浏览某些内容，同时也帮助他们更快的找到他们想要的内容，而不会在我们的网站内感到沮丧。既然我们确定了这时控制布局的目标，那么我们再来看看CSS是不是“没办法把事情做好”。首先，CSS也能做出美观的页面，虽然某些布局做不到，但是在CSS的限制下做到同等美观程度的页面是肯定没问题的。其次，CSS也能让设计变得友善，不会说CSS的设计就肯定是“干净”到用户无法一眼找到他想要的功能。因此，虽然CSS无法实现某些特定的布局效果，但对于设计师来说它能够达到老方法所能达到的同等效果，这就足够了。

从XHTML中去掉内容无关的视觉元素

另一个table强迫症的征兆就是，习惯为每一个视觉上的元素对应一个XHTML元素。在table中，无论视觉效果有多复杂，我们总能不停的切割 table，甚至table套table，直到准确定位每一个特定的元素。然而应用了CSS之后，这就是不必要的，甚至会给设计师带来麻烦，因为 XHTML+CSS就是为了内容和布局分离，所以如果一个视觉元素与内容无关，那么它就不应当出现在XHTML中，自然也就不会对应一个XHTML元素。

欢迎大家阅读《CSS基础 如何避免table强迫症_css》,跪求各位点评,若觉得好的话请收藏本文，by