使用css定位html元素的最佳实践

时间:2013-11-14 10:55:02

标签: html css

我对CSS没有多大意见,但使用它。

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

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

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

这是正确的定位方式,以便它在所有浏览器和移动设备中看起来完全相同吗?

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

6 个答案:

答案 0 :(得分: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>

以上将使绝对定位的元素在其父元素上相对且依赖

答案 1 :(得分:4)

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

http://learnlayout.com/

答案 2 :(得分:1)

Mozilla的MDN states:

  

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

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

  

<强>绝对   不要为元素留出空间。相反,将它定位在   指定位置相对于其最近位置的祖先或   包含块。绝对定位的盒子可以有边距,   它们不会随着任何其他边缘而崩溃。

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

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

对于移动设备,您可能需要查看 responsive web design Twitter Bootstrap 等框架将会不仅为您服务,而且还提供了一个非常方便快捷的方式来开始构建您的网站。

答案 3 :(得分:0)

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

因为让你的设计从头开始响应是一件令人头痛的问题,你将花费大量的时间来使它有效。

答案 4 :(得分:0)

如果您需要将某些内容放置在完全坐标处,absolute定位最佳。 relative定位将占据元素的位置,并为其添加坐标。例如,如果我在<p>中有一个<div>元素并且我想缩进它,我会使用relative,例如left:15;。至于在所有浏览器中出现相同的内容;这几乎是不可能的。总会有一个浏览器不符合。但absoluterelative通常都有效。

答案 5 :(得分:0)

我建议的第一件事就是避免使用内联CSS来解决性能和维护问题;我将进行CSS在线课程,例如: