定位css的最佳实践

时间:2015-07-02 08:47:07

标签: html css responsive-design position

我已经开始进入网站开发并为我的网站siavoush-re.co.uk,创建了初稿但是我做的研究越多,我就越发现我用于定位的方法并不好。

  1. 定位边距比使用relative / absolute更好 定位?
  2. 定位元素时的最佳做法是什么,特别是对于响应式设计?
  3. 我应该避免使用哪种方法或过时?

6 个答案:

答案 0 :(得分:3)

  1. 边距和填充比定位使用%单位更适合响应式设计。
  2. 你可以使用position:relative;对于响应式设计,BOOTSTRAP也使用此定位,但使用绝对定位将在您在小型设备上查看时移动您的内容。
  3. 避免将pt或px单位用于font-size,请使用'EM'

答案 1 :(得分:1)

相对和绝对定位本身并不坏,有时很有用,但只是非常容易做错。

您想要多个列。传统上,我们使用float属性,因为旧版浏览器支持它。有一些新属性可以让你创建列,但是旧版浏览器不支持它们,所以现在我个人不鼓励使用,除非你绝对确定你的访问者运行现代浏览器而你不关心如果网站在旧版浏览器上失败。

简易方法

无论哪种方式,在CSS中浮动都很困难。我强烈推荐一个响应式网格系统。有许多CSS下载可用。您所要做的就是为列使用适当的类。

还有更多。

困难之路

到目前为止,浮动是最受欢迎的选择。浮动元素导致块元素(如div)放在一边。您为每列应用宽度,瞧,您有多列。使用排水沟和填充物进行大小调整有点令人讨厌,因此我建议使用现有的样式表来完成所有操作。基本上,在几列之后,您必须附加一个具有clear属性的元素来修复布局流程。

或者,根据目标受众,您可以使用CSS columnsflexboxgrid

为什么不使用绝对/相对?

浏览器为您整理流程。不断增长的元素将推动之后发生的任何事情。相对定位不会改变这种行为,但绝对定位确实如此。它只是在你的东西上点击元素,你必须为自己留出空间。

我有时会使用相对/绝对定位,但只是为了使事情重叠。例如,我有一个图像容器(相对),它包含一个图像(绝对)和一个标题/标签(绝对)。通过将后两者绝对定位,我可以根据自己的喜好在容器内移动。通过在容器上设置尺寸,我可以将它放在任何我想要的地方而不会破坏流量。

答案 2 :(得分:0)

  • 取决于,relative位置是元素的定位 相对于HTML的实际流程。
  • absolute定位参考文档的左上角坐标。 (不总是)
    响应式布局的最佳实践?

没有什么是最好的,您必须知道何时使用media queries并使用%代替px来获取列宽和float属性。

Here您可以找到折旧属性和标记列表

答案 3 :(得分:0)

非常好的工作:)

您可以调查Bootstrap http://getbootstrap.com。我最近使用它和这个framerowk你可以做惊人的响应网站:)只需添加指定的类和样式<div>, <span>, <p>和其他HTML元素。

答案 4 :(得分:0)

CSS重置帮助建立一个基线,从中设置所有样式。重置有效地覆盖了某些元素的浏览器默认样式(可能会有很大差异)。尽管过去几年中CSS重置的普及,但许多网站仍然没有使用它们,而且这些网站的CSS可扩展性正在遭受巨大的损失。

许多人建议使用normalize.css,而不是使用Eric Meyer非常流行的CSS重置(因为它太深远)或者进行DIY重置。 Normalize.css将代码“规范化”为公共基线,而不是重置所有浏览器中元素的基本样式。参考Github上的normalize.css项目,这些优于CSS重置:

与许多CSS重置不同,保留有用的默认值 规范化各种HTML元素的样式 更正了错误和常见的浏览器不一致性 通过微妙的改进提高可用性 使用详细注释说明代码的作用 使用normalize.css代替标准重置将使您获得正确的编码脚,并节省大量时间,而无需重新建立基线样式。

enter link description here

答案 5 :(得分:0)

依次回答每个问题:

  1. 这实际上取决于HTML中元素的上下文以及您尝试在站点布局中实现的内容。很简单,通常有多种解决方案可以解决问题。有时使用边距更合适,有些解决方案最好留给相对定位,有时候绝对定位是你唯一的答案。

  2. 请参阅1,但我会避免硬编码宽度和像素高度:%em常用于响应式设计。我最好的建议是遵循一些教程,看看CSS如何协同工作。 CSS media-design通常用于响应式网页设计。

  3. 最好遵循针对过时HTML和CSS的W3C建议。从头到尾,您应该避免使用<table>标签来定义网站布局。

  4. 有趣的阅读:http://www.w3.org/TR/mobile-bp/