当前位置: 首页 > 面试题库 >

为什么不应该使用position:absolute来定位所有内容?

微生毅
2023-03-14
问题内容

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

“为什么我们不应该通过Dreamweaver的AP Div按钮创建网站布局,所以更容易使用AP Div而不是Float + margin +
padding进行布局,如果此方法不正确,那么为什么它不是一个好方法,为什么Adobe在Dreamweaver中将该按钮设置为即使不是正确的布局方式也要进行布局吗?”

谁能用一个简单明了的例子来解释为什么position:absolute不应该使用它来定位 所有内容

  • 我们是否应该使用它来定位布局元素(#wrapper,#header,#footer,#mainContent,#sidebar等)?

  • 如果我们使用position:绝对地使用Dreamweaver AP div按钮[和工具栏按钮图像进行布局,会遇到什么问题?

我知道位置:绝对不好,但是我无法很好地解释或提供任何示例。


问题答案:

相对Divs

优点
-首先,它们允许您的网站处理内容更改。如果要使用所有绝对div标签,则当它们中的数据发生更改时,很容易使标签重叠并相互隐藏。其次,许多好的站点都允许根据用户访问网页所使用的屏幕分辨率和浏览器大小来包装信息。

缺点- 相对div大小的微小变化会导致您的代码更改其包装方式。此外,信息更改有时可能会导致整个站点外观发生令人沮丧的变化,进而需要进行一些调整。

绝对股息

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

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

结束语
-很多时候,您将要使用具有绝对和相对div部分的网站,这不仅是因为它们都可以达到目的,而且因为将它们一起使用时,您可以用最少的时间和代码来创建外观最好的网页。



 类似资料:
  • 问题内容: 触发服务器调用以获取componentWillMount生命周期方法中的数据是一种不好的做法? 以及为什么最好使用componentDidMount。 问题答案: 更新: componentWillMount将很快被弃用。 引用@Dan Abramov 在 React的未来版本中,我们期望componentWillMount 在某些情况下 会触发多次 ,因此您应该对网络请求使用comp

  • 为什幺应该使用流 在node中,I/O都是异步的,所以在和硬盘以及网络的交互过程中会涉及到传递回调函数的过程。你之前可能会写出这样的代码: var http = require('http'); var fs = require('fs'); var server = http.createServer(function (req, res) { fs.readFile(__dirname

  • 问题内容: 之间有什么区别: 和 我知道JPanel是GUI组件的容器,但我确实看不到使用它的实用程序。当然,我错了,但我是从Swing开始的,所以…为什么我应该使用JPanel?真正的目的是什么? 问题答案: 为什么我应该使用JPanel? 您可以使用JPanel获得以下一项或多项好处: 将组件分组在一起。 为了更好地组织您的组件。 为了使我们能够使用 多种布局 并组合其效果。(例如,用于数字键

  • 我的老师让我这样做,但在评论区我被告知我不应该这样做。 为什么?

  • 本文向大家介绍为什么在Bash中应该避免eval,我应该用什么来代替呢?,包括了为什么在Bash中应该避免eval,我应该用什么来代替呢?的使用技巧和注意事项,需要的朋友参考一下 eval是Bash shell的内置命令,它将其参数连接为单个字符串。然后,它将参数与空格连接起来,然后将该字符串作为bash命令执行。以下是其工作方式的示例。 eval示例 在下面的示例中,我们使用一个字符串,该字符串

  • 问题内容: 我正在学习React js( 如果是ii App.js模块),我必须导入React,因为 render() 方法用于将JSX转换为dom元素,而在Person.js中,我们正在创建箭头函数,然后将其导出以便它可以被导入并在App模块的render函数中使用,就像我们在React中导入的App模块一样,它将在模块person中转换JSX并在DOM上渲染,但是当我们在Person中删除以下