CSS 定位问题 - 我使用浮动、位置还是显示？

Question

我想知道是否有人可以帮助我了解更多关于定位的信息

我已经阅读了很多关于浮动、位置类型和弹性的信息。我了解它的基础知识，但我在简单的事情上遇到了麻烦。

1. 专业前端开发人员用来定位元素的常规方式是什么？他们使用float，position: relative|absolute还是使用 flexbox 或 css 网格？还是所有的组合？

2. 专业开发人员每次制作新网站时都会使用 CSS 重置吗？

我正在制作一个标题（它没有导航栏……只有一个标志和一个标题）我希望标志在左边，标题在右边。

因此，如果我使用 inline-block，我会得到一个奇怪的结果，其中“World Guitars”未与徽标对齐，而是在下方。

#logo {
  height: 60px;
  width: 50px;
  border: 2px solid #34495e;
  margin: 2px;
  align-self: center;
}

header p {
  font-family: Poppins;
  font-size: 2em;
  margin-left: 500px;
  align-self: center;
}

header p,
img {
  display: inline-block;
}

<header>
  <img src="images/logoGM.jpg" alt="logo" id="logo">
  <p>World Guitars</p>
</header>

如果我用浮动来做，它会变得更好，但它仍然很奇怪..

header p {
  float: right;
  width: 900px;
}

header img {
  float: left;
}

section nav ul {
  clear: both;
}

<header>
  <img src="images/logoGM.jpg" alt="logo" id="logo">
  <p>World Guitars</p>
</header>

终于在position:relative，绝对我有点迷失了。

我可以使用相对位置并为我的心脏内容分配值还是不推荐这样做？

在这种情况下我该怎么做？

谢谢！！

Answer 1

显示 vs 位置 vs 浮动

一般来说，我会说定位元素的现代方法是使用display属性 - 通常使用display:flex或display:grid在父元素上定位其子元素，或使用display:block,display:inline或display:inline-block在元素上自行定位。

如果您需要从流程中取出元素，您将在哪里使用position:relative和position:absolute。一个典型的情况是，如果您需要一些元素重叠。（即，如果您将三幅画布叠放在一起）。

在过去，浮动是定位元素的标准方式（即让某些东西位于页面右侧）。但是现在 flex box 出现了。

但是 - 您可能想要使用浮动的地方是如果您希望文本环绕元素 - 就像在报纸中一样。这一点尤其重要，因为现在 HTML 元素不需要是矩形的。请参阅此示例。

CSS 重置

我用它们。为什么不。

现在，通常您可能会使用某种样式库，例如 Material-UI 或 Bootstrap，但是是的。

关于你正在尝试做的事情。

我会在这里使用 flexbox。

您在这里使用了 'align-self' - 但align-self仅适用于 flex 父级的子级。

header {
  display: flex;
  flex-flow: row nowrap;
  /*By default this is row wrap - I like to always be explicit with it*/
  align-items: center;
  /*center vertically, (because the flex flow is row*/
}

img {
  border: solid 2px black;
  max-height: 100px;
  /*size the image*/
  object-fit: scale-down;
  /*make the image keep it proportions*/
}

p {
  font-weight: bold;
  font-size: 2em;
}

<header>
  <img src="https://www.designevo.com/res/templates/thumb_small/black-wing-and-brown-guitar.png" alt="logo" id="logo">
  <p>World Guitars</p>
</header>