4

我对 CSS 不太熟悉,但正在使用它。

我通常style使用 inline 或 css 方法来定位元素的用户元素。

我不知道这是否是正确的问题,但relative或者absolute哪种方法适合定位元素?

我用style="position:relative; left:100px; top:30px"这样的东西。

是否是正确的定位方式,以便它在所有浏览器和移动设备中也可以完全相同?

如果有人可以提供他的经验和指导,我将不胜感激,这可能会帮助更多的初学者!

4

6 回答 6

7

绝对定位独立于其父级。

当父级具有相对位置时,具有绝对定位的子级相对于其父级放置。

例如,

对于绝对定位,

<div><div style="position:absolute; top:0; left:0;">Abc</div></div>

以上将使 div在顶部独立运行,对父级没有任何影响。

对于相对位置,

<div style="position:relative;"><div style="position:absolute; top:0; left:0;">Abc</div></div>

以上将使绝对定位的元素是相对的并依赖于它们的父元素。

于 2013-11-14T11:01:10.557 回答
4

使用这个网站,这就是我练习 CSS 的方式

http://learnlayout.com/

于 2013-11-14T10:59:14.807 回答
1

Mozilla 的MDN 声明:

相对布局所有元素,就好像该元素没有定位一样,然后调整元素的位置,而不改变布局(从而为如果没有定位的元素留下一个间隙)。position:relative 对 table-*-group、table-row、table-column、table-cell 和 table-caption 元素的影响是未定义的。

这基本上意味着每个元素都是一个块,它出现在它之前的元素之后,并占用屏幕空间 - 后续元素将占用它之后的下一个可用空间。

绝对 不要为元素留出空间。相反,将其定位在相对于其最近定位的祖先或包含块的指定位置。绝对定位的盒子可以有边距,它们不会与任何其他边距一起折叠。

这意味着元素将出现在指定的位置(相对于它的父级,或最近的具有位置属性的父级),而不管其他内容如何。

最佳实践而言- 没有,这取决于您希望达到的效果,在这种情况下,最佳实践是使用为此目的设计的位置属性。

移动设备方面,您可能希望了解响应式网页设计,像Twitter Bootstrap这样的框架不仅会为您解决这个问题,而且还提供了一种非常易于访问且快速的方式来开始构建您的网站。

于 2013-11-14T11:03:20.400 回答
0

我建议的第一件事是避免使用内联 CSS 来解决性能和维护问题;悬停我会参加 CSS 在线课程,例如:

于 2013-11-14T11:28:48.580 回答
0

如果您不熟悉 CSS,我强烈建议您使用类似Twitter Bootstrap的 CSS 框架(或其他网格系统,如960 grid,如果您不想要所有 Bootstrap 样式)。

因为让你的设计从头开始响应是一件令人头疼的事情,你会浪费很多时间来让它工作。

于 2013-11-14T11:00:57.140 回答
0

absolute如果您需要将某些东西放置在精确的坐标处,则定位是最好的。relative定位将采用元素已经存在的位置,并为其添加坐标。因此,例如,如果我在 a 中有一个<p>元素<div>并且我想缩进它,我会使用relativewith,比如left:15;. 至于在所有浏览器中显示相同;这几乎是不可能的。总会有一个不符合要求的浏览器。但是absoluterelative两者通常都会起作用。

于 2013-11-14T11:04:38.597 回答