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 元素不需要是矩形的。 See this example.

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>

Answer 2

我喜欢回答这样的问题！随意添加其他问题 cmets。资料来源：我从事前端 Web 开发已经有 8 年了。

第一季度。专业前端开发人员通常使用哪种方式来定位元素？他们是使用 float、position..relative、absolute..还是使用 Flex？（或 css 网格？）还是所有的组合？

简短的答案是所有内容的组合，但除此之外还有更多。我想说大多数时候开发人员会使用像 Bootstrap、Materialize 或 Foundation 这样的 CSS 框架。这些框架为自己编写所有内容提供了很多抽象，例如使用类简单地定义行和列，以及在调整屏幕大小时定义这些列的行为方式的简单类。 CSS Grid 与这些框架有很多相同的概念，但我想说如果你刚刚开始，它就不太容易理解。

在为特定于您的品牌或项目的内容编写自定义 CSS 时，我会说您的大多数较大比例的定位都是通过相对定位（例如内边距、边距、宽度等）或 flexbox 完成的。出于一些不同的原因，使用绝对位置元素或使用浮动来创建整体站点结构通常不是一个好主意，如果您有兴趣，我可以进入，但是在小范围内定位某些东西，使用绝对定位是常见的（例如浮动工具提示或通知弹出窗口）。

第二季度。专业开发人员是否在每次创建新网站时都使用 CSS 重置？

这取决于。许多框架包括 CSS 重置，以确保您的网站在浏览器中看起来相同。我通常会说它可以节省时间来修复 Firefox 中奇怪的按钮阴影或 Safari 中出现的额外输入边框等问题。

关于您的代码问题，我认为这是 flexbox 的完美应用！你说的是“右边的标题”，所以我不确定这是否正是你要找的。​​p>

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  height: 60px;
  width: 50px;
  border: 2px solid #34495e;
  margin: 2px;
}

.title {
  font-family: Poppins;
  font-size: 2em;
  margin: 0;
}

<header>
  <img src="https://placeimg.com/50/60/any" alt="logo" class="logo">
  <p class="title">World Guitars</p>
</header>

Answer 3

这取决于您的需求和意图。就单位而言，CSS 有具有绝对大小的单位（想想厘米等），以及相对于字体大小或相对于您正在工作的视口大小进行缩放的单位。没有正确或错误的单位可以使用，这取决于您需要什么。单位详情在这里：https://www.w3schools.com/cssref/css_units.asp

就是否使用 flexbox 而言，如果您希望页面上的元素能够根据显示的设备或窗口大小动态缩放，它可能是一个非常有用的工具。您可以还可以使用它来创建没有 javascript 的响应式页面，结合 flex-wrap 和设置元素的最小宽度。但并非所有设计都能从 flex 中受益，有时您需要的元素不会根据显示的设备缩小或增长。 Grid 比 flex 旧，但仍然有用。它非常常与 bootstrap 一起使用。

就您的具体示例而言，我怀疑您看到的问题是因为您的文本位于

块内，这会将其放在新行上。尝试将其放在 块中，并为该块指定一个 id，以便您可以在需要时在 css 中为该 ID 设置属性。