使用百分比作为 HTML 页面的尺寸标准有哪些优点和缺点

发布于 2024-10-08 10:03:04 字数 1431 浏览 3 评论 0原文

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

陌路终见情 2024-10-15 10:03:04

关于这个主题的好文章值得一读。
固定布局、流体布局、弹性布局

Good article to read on this topic.
Fixed Vs Fluid Vs Elastic layouts

忘羡 2024-10-15 10:03:04

优点

  1. 这是达到相同高度的最简单方法。
  2. 它避免将 float 或position:absolute 用于非预期目的。
  3. 它为初学者提供了一种简单的方法,可以在 CSS 中生成并排布局,而不会用非语义标签污染 HTML。

缺点

  1. 它在 IE7 及更早版本中不起作用,因此您要么需要为这些浏览器定义不同的布局,要么使用浮动或位置:绝对值来为这些浏览器生成在其他浏览器中同样有效的 CSS。
  2. 要创建 colspan 或 rowspan 效果,需要将一个表嵌套在另一个表中。
  3. 它鼓励人们构建网格布局,而不是采取更灵活的方法。

Pros

  1. It is the easiest way to the same height.
  2. It avoids using float or position:absolute for purposes for which they were not intended.
  3. It provides a simple way for beginners to produce side by side layouts in CSS without polluting their HTML with non-semantic tags.

Cons

  1. It doesn't work in IE7 and earlier and so you either need to define a different layout for those browsers or mess around with floats or position:absolutes to produce CSS for those browsers which works equally well in other browsers anyway.
  2. To create a colspan or rowspan effect requires nesting one table inside another.
  3. It encourages people to build grid layouts rather than taking a more flexible approach.
轮廓§ 2024-10-15 10:03:04

如果您定义了最大和最小高度,除了不断担心新发布的内容在每种分辨率下是否看起来不错之外,没有太多缺点。并且仍然存在百分比舍入和重叠边距的问题...众所周知,Stubbornella 可以找到大多数问题的解决方案灵活布局带来的问题(请参阅演示页面),还有这个完美的 3 列液体布局 作者:Matthew James Taylor。

If you've defined maximum and minimum heights, there aren't many disadvantages other than the constant worry that if your new posted content will look good on every resolution. And there is still the problem of percentage rounding and overlapping margins... Stubbornella is known to find solutions to the most of the problems that come with flexible layouts (see the demo page) and also there is this The Perfect 3 Column Liquid Layout by Matthew James Taylor.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文