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

Jit*_*yas 19 css xhtml dreamweaver

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

"为什么我们不应该通过Dreamweaver的AP Div按钮创建网站布局,使用AP Div而不是浮点数+边距+填充更容易进行布局,如果这种方法不正确那么为什么它不是好方法以及为什么Adobe在Dreamweaver中将此按钮赋予即使布局不正确,也要进行布局?"

任何人都可以用一个简单而简洁的例子解释为什么position:absolute不应该用于定位一切

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

Ben*_*man 25

相对分区


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


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

绝对分裂


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


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


结论 - 很多时候你会想要使用一个带有绝对和相对div部分的网站,不仅因为它们都有用,而且因为当它们一起使用时,你可以用最少的时间和代码创建看起来最好的网页.

  • +1用于提及内容的更改.每次添加或编辑一段文本时,必须更改100个元素位置将是一个维护噩梦.此外,网页通常是来自不同来源或组的内容的聚合; 你并不总是在设计时知道每一点内容的大小 - 实际上我会说你不经常在教室外的世界里. (2认同)

Dre*_*lls 9

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

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


cee*_*yoz 7

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

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

  • 好吧,即使是固定内容也会在不同的计算机上占用不同的空间.Mac和PC处理文本显示的方式略有不同,视力不佳的人可能会将字体大小设置得更高等等. (2认同)