为什么我不应该使用position:absolute来定位一切?

时间:2010-02-16 17:56:31

标签: css xhtml dreamweaver

我的一个学生问了这个问题,我想用一个例子来启发他:

  

“为什么我们不应该创建网站布局   通过Dreamweaver的AP Div按钮,它就是   使用AP Div更容易进行布局   相反,Float + margin + padding和if   这个方法不正确那么原因   这不是好方法,也不是Adobe的原因   在Dreamweaver中给出此按钮   即使它不正确也要进行布局   制作布局的方法?“

有人可以用一个简单明了的例子解释为什么position:absolute不应该用于定位一切

我知道立场:绝对不好,但我无法很好地解释或提供任何例子。

5 个答案:

答案 0 :(得分:25)

相对分区


专业人士 - 首先,他们允许您的网站处理内容更改。如果您要使用所有绝对div标签,您可以轻松地让标签重叠并在其中的数据发生变化时互相隐藏。其次,许多好的网站允许信息包装,具体取决于用户用来访问网页的屏幕分辨率和浏览器大小。


缺点 - 相对div大小的轻微更改会导致标记更改其换行方式。此外,信息的变化有时会导致整体网站外观出现令人沮丧的变化,从而需要进行一些调整。

Absolute Divs


优点 - 首先,他们解决了在较大区域内散布少量内容的问题。这通常是标题数据或大量图形网站的情况。有时您将拥有一个带有背景图像的大区域,并且您将在边缘和中间几乎没有需要精确放置的控件。在这种情况下,相对div会很头疼,因为你需要多个额外的div,当用户调整浏览器大小或从小分辨率屏幕访问网站时,它们很容易中断。 Absolute divs的另一个主要用途是将内容推出原来的区域。菜单就是一个很好的例子!菜单的标题通常包含在一个div中,但当菜单标题悬停在其中时,其中的项目会落入另一个div中。此外,屏幕上弹出的工具提示和内容通常需要绝对定位。


缺点 - 如果使用不正确,绝对div会遇到与亲属相似的问题。问题是管理变得乏味。具体来说,如果您使用10个绝对div来控制您的内容区域,并且其中一个区域变大或变小,因为您的内容已更改,您可能需要修改每个div的位置。这需要花费大量时间。


结论 - 很多时候您会想要使用具有Absolute和Relative div部分的网站,不仅因为它们都有用,而且因为在一起使用它们时您可以创建看起来最好的网页用最少的时间和代码。

答案 1 :(得分:9)

嗯,首先,您不知道可以访问您网站的每台设备的显示尺寸。大多数可能会有全尺寸显示器(800 x 600或更大),但有些将是宽屏幕(例如1440 x 900),有些可能是移动设备。

允许每个设备根据规则布置页面元素 - 例如浮动,边距,填充 - 意味着每个设备都可以优化内容以用于自己的显示。

答案 2 :(得分:7)

好的,所以让我们说你绝对定位一切。当#mainContent在一个页面上有一个段落,在第二个页面上有两个段落时会发生什么。你在哪里以像素方式放置#footer?如果用户增加字体大小会发生什么?

Dreamweaver提供按钮,因为绝对定位有时有用。这并不能使总是有用。

答案 3 :(得分:4)

因为用户可以调整浏览器窗口的大小。

答案 4 :(得分:1)

OMG惊人的时机!今天有一篇关于黑客新闻的好文章:http://www.barelyfitz.com/screencast/html-training/css/positioning/

这基本上显示了不同类型的定位:相对,绝对,浮动等,以及使用它们的原因。不要忘记位置:固定适用于总是出现在页面上的图例。

  

我知道立场:绝对不好,但我无法很好地解释或提供任何例子。

并不是说它不好。它是。只是它不是解决所有问题的正确方法。就像锤子不是拧入灯泡的好方法,但这并不表示锤子是一个坏工具。 (希望这个比喻有帮助)