标签归档：布局

为什么我们不建议用Table布局

45,606 人浏览
5条回复
2014-05-29 14:13:18
  1. Table要比其它html标记占更多的字节。
    (延迟下载时间，占用服务器更多的流量资源。)
  2. Tablle会阻挡浏览器渲染引擎的渲染顺序。
    (会延迟页面的生成速度，让用户等待更久的时间。)
  3. Table里显示图片时需要你把单个、有逻辑性的图片切成多个图。
    (增加设计的复杂度，增加页面加载时间，增加HTTP会话数。)
  4. 在某些浏览器中Table里的文字的拷贝会出现问题。
    (这会让用户不悦。)
  5. Table会影响其内部的某些布局属性的生效(比如<td>里的元素的height:100%)
    (这会限制你页面设计的自由性。)
  6. 一旦学了CSS知识，你会发现使用table做页面布局会变得更麻烦。
    (先花时间学一些CSS知识，会省去你以后大量的时间。)
  7. table对对于页面布局来说，从语义上看是不正确的。
    (它描述的是表现，而不是内容。)
  8. table代码会让阅读者抓狂。
    (不但无法利用CSS，而且会你不知所云)
  9. table一旦设计完成就变成死的，很难通过CSS让它展现新的面貌。
    (你看过CSS Zen Garden吗?)

Tables的[......]

阅读全文>>

CSS3 Columns:比table更好用的分列式布局方法

15,472 人浏览
1条回复
2014-05-03 09:45:18

CSS里一直有一个让我们头疼的问题，就是创建布局很麻烦。当然，有很多方式，有很多技术都可以创建各种布局，但我们总觉得CSS里应该提供一些新属性，让我们能更好的管理布局。幸运的是，CSS3里提供了一批新的创建列式布局的column属性，有了这些属性，我们不需要再使用float,clear,margin等属性进行调控，避免了很多麻烦。

CSS代码

CSS3里的column系列属性提供了各种不同的功能，通过组合使用它们，你能得到相应的任何分栏式布局：

  • column-count: 列数目
  • column-gap: 各列之间间隙宽度
  • column-width: 建议宽度；未必会使用，浏览器基于此数值进行计算
  • column-rule-width：列之间分割线宽度
  • column-rule-style：列之间分割线风格
  • column-rule-color：列之间分割线演示
  • column-span: 允许一个元素的宽度跨越多列
  • column-fill: 分列方式

要想制作出一个漂亮的分列布局，你至少需要用到column-count和column-gap：

/[......]

阅读全文>>