Question

我想知道是否有人可以帮助我更多地了解定位

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

专业的前端开发人员通常使用哪些定位元素？他们使用float，position: relative|absolute还是使用flexbox或CSS网格？还是所有这些的组合？
专业开发人员每次创建新网站时都使用CSS重置吗？

我正在制作标题（它没有导航栏。只是徽标和标题）我希望徽标在左侧，标题在右侧。

因此，如果我使用内联块，则会得到奇怪的结果，其中“ 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来定位其子元素，或使用{{ 1}}，display:block或display:inline放置在元素上以自我定位。

如果需要从流中删除元素，则使用display:inline-block和position:relative的地方。典型的情况是，如果您需要某些元素重叠。（即，如果您有三个画布，则彼此叠放）。

在过去，浮动元素是元素定位的一种标准方法（例如，在页面右侧放置一些内容）。但是现在flex box出现了。

但是-如果希望文本环绕元素，则可能要使用浮点数-就像在报纸上一样。这一点特别重要，因为现在HTML元素不必是矩形的。 See this example.

CSS重置

我用它们。为什么不。

这些天来，通常您可能会一直使用某种样式库，例如Material-UI或Bootstrap，但是是的。

关于您要做什么。

我会在这里使用flexbox。

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

position:absolute

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;
}

Answer 2

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

Q1。专业前端开发人员用来定位元素的常规方式是什么？他们使用float，position..relative，absolute ..还是使用Flex？（或CSS网格？）还是全部结合？

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

在为您的品牌或项目所特有的内容编写自定义CSS时，我想说您的大部分较大规模的定位都是通过相对定位（例如填充，边距，宽度等）或flexbox完成的。通常，基于绝对位置元素或出于某些不同的原因而使用浮动对象来创建整体网站结构不是一个好主意，如果您有兴趣，可以进入此页面，但是使用绝对定位来进行小规模定位是很常见的（例如浮动工具提示或通知弹出窗口。）

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

这取决于。许多框架都包含CSS重置，以确保您的网站在所有浏览器中看起来都一样。我通常会说，这样可以节省时间，例如修复Firefox中的奇数按钮阴影或Safari中出现额外的输入边框之类的问题。

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

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而言，如果希望页面上的元素能够动态缩放（取决于显示它们的设备或窗口大小），它可以是一个非常有用的工具。还可以结合使用flex-wrap和设置元素的最小宽度，用它来创建不带javascript的自适应页面。但是，并非所有设计都可以从flex中受益，有时您需要的元素不会根据所显示的设备而缩小或增长。网格早于flex，但仍然有用。引导程序非常常用。

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

块内，从而将其放在了新行中。尝试将其放在块中，并为该块提供一个ID，以便您可以根据需要在CSS中设置该ID的属性。

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

3 个答案:

显示vs位置vs浮动

CSS重置

关于您要做什么。