CSS 定位问题 - 我应该使用 float、position 还是 display？

Question

CSS 定位问题 - 我应该使用 float、position 还是 display？

htmlcsscss-position

5

我想知道有没有人能帮我更好地理解定位的相关知识。我已经阅读了很多关于浮动、定位类型和flex的信息，我理解了基本概念，但是在一些简单的问题上仍然有困惑。

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和position:absolute时，我有点迷惑。

我可以使用position:relative并随心所欲地赋值吗？还是这样做不被推荐？

在这种情况下，我该如何操作呢？

谢谢！

- Santiago

通过使用开发者控制台（按F12）并选择元素选项卡，您可以可视化地了解事物发生的原因和方式。现在，您可以将鼠标悬停在元素上，看到元素被添加到DOM的确切方式。玩弄这些内置工具并阅读一篇好的博客将有助于深入理解基础知识。 - Dominofoe

嗨 - 很不错的问题。你可能想把它分成多个问题。此外，请注意您可以将可运行的CSS和HTML嵌入到您的问题中。 - dwjohnston

另外，请记住，“专业前端开发人员通常使用的常规方式”实际上是一个开放性的陈述，您可以用很多方式来处理定位，这取决于您想要实现什么以及您期望的好处和妥协！ - IvanS95

嗨 - 请注意，你的图片在这里不能正常工作 - 因为它们正在引用相对路径。你能否在互联网上找到一些图片并使用绝对路径放置它们？ - dwjohnston

他们根据情况选择适当的方法。
不，即使他们这样做了，也不会自动成为初学者的好选择。

- Alohci

3个回答

3

我喜欢回答这类问题！随时欢迎添加更多问题评论。来源：我已经从事前端网页开发约8年了。

Q1. 专业的前端开发人员定位元素通常使用什么方法？他们使用float、position:relative、absolute还是使用Flex布局（或CSS Grid）？还是综合运用？

简短的答案是综合运用，但实际情况比这更复杂。我认为大多数开发人员会使用诸如Bootstrap、Materialize或Foundation等CSS框架。这些框架提供了很多抽象化的功能，可以避免自己编写所有内容，例如仅使用类定义行和列，以及简单的类定义在调整屏幕大小时这些列的行为方式。CSS Grid与这些框架具有许多相同的概念，但我认为如果您刚开始学习，它会更难理解。

当涉及到针对特定品牌或项目的自定义CSS编写时，我认为大多数较大规模的定位是使用相对定位（如padding、margin、width等）或flexbox完成的。通常不建议使用绝对定位元素来创建整个站点结构或使用float布局，原因有几个，如果您感兴趣，我可以详细解释，但是在小规模情况下使用绝对定位元素或浮动元素来定位某些内容是很常见的（例如悬浮提示或通知弹出框）。

Q2. 专业的开发人员在制作新网站时是否每次都使用CSS reset？

这取决于具体情况。许多框架包括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>

- Skylar Brown

0

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

在是否使用flexbox方面，如果您希望页面上的元素能够根据它们显示的设备或窗口大小动态缩放，则它可以是非常有用的工具。您还可以使用它来创建响应式页面而无需使用javascript，只需结合使用flex-wrap并为元素设置最小宽度即可。但并非所有设计都受益于flex，并且有时您需要元素不会因其显示的设备而收缩或增长。Grid比flex旧，但仍然有用。它与bootstrap一起被广泛使用。

就你提供的具体示例而言，我猜测你遇到的问题是因为你的文本位于一个 <p> 块内，这会将其放置在新行上。尝试将其放置在 <span> 块内，并为该块设置一个 ID，以便在需要时可以在 CSS 中设置该 ID 的属性。

- miles_b

3

小心理解 "Grid is older than flex, but still useful"，为了澄清一下，Grid 可能指的是 Bootstrap 使用的布局系统（也要记住 Bootstrap 4 全部基于 flexbox），以及其他基于列的框架，但它可能也指代（在我看来应该指代）CSS Grid，这是继 Flexbox 之后引入的最新的二维布局系统：https://css-tricks.com/snippets/css/complete-guide-grid/。 - IvanS95

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- dwjohnston · Accepted Answer

显示 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>