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

Question

不知道有没有人能帮我多了解一下定位

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

专业前端开发人员定位元素的常规方式是什么？他们使用 float、position: relative|absolute 还是使用 flexbox 或 css 网格？还是全部的组合？
专业开发人员每次制作新网站时都使用 CSS 重置吗？

我正在制作 header（它没有导航栏..只有徽标和标题）我想让logo在左边，标题在右边。

所以如果我使用 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

这取决于您的需求和意图。在单位方面，CSS 具有绝对大小的单位（想想厘米等），以及相对于字体大小或相对于您在其中工作的视口大小缩放的单位。没有正确或错误的单位可以使用，这取决于您的需要。有关单位的详细信息，请参见：https://www.w3schools.com/cssref/css_units.asp

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

一起使用非常普遍

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

块内，这将其置于新行中。尝试将其放入块中，并为该块提供一个 ID，以便您可以在需要时在 css 中为该 ID 设置属性。

Answer 2

显示与位置与浮动

一般来说，我会说定位元素的现代方法是使用 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 仅适用于弹性父项的子项。

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 3

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

Q1。专业前端开发人员定位元素的常规方式是什么？他们使用浮动、位置..相对、绝对..还是使用 Flex？（或 css 网格？）或所有这些的组合？

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

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

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

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

关于你的代码问题，我认为这是对 flexbox 的完美应用！你说 "title on the right" 所以我不确定这是否正是你要找的。

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>

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

CSS positioning questions - do I use float, position, or display?

html

css

css-position

显示与位置与浮动

CSS 重置

关于你想做什么。