第六届字节跳动青训营第二篇文章 ｜ 青训营 今天要介绍的是CSS布局技巧：汇总CSS布局技巧，如浮动、定位、弹性盒子布局等，以及写出它们的应用场景和实操实践。

CSS 页面布局技术允许我们拾取网页中的元素，并且控制它们相对正常布局流、周边元素、父容器或者主视口/窗口的位置、

例如

• 正常布局流
• 弹性盒子
• 网格
• 浮动
• 定位
• CSS 表格布局
• 多列布局等等 每种技术都有它们的用途，各有优缺点，相互辅助。通过理解各个布局方法的设计理念，你能够找到构建你想要的网页需要的布局方案。

我们在这里介绍其中几种

1.正常布局流 正常布局流是指不对页面进行任何布局控制时，浏览器默认的html布局方式。html的元素完全按照代码中出现的先后次序显示，出现在另一个元素下面的元素被描述为块元素，与出现在另一个元素旁边的内联元素不同，内联元素就像段落中的单个单词一样。当我们使用css创建一个布局时，我们正在离开正常流布局，但是对于页面上的多数元素，正常布局流将完全可以创建正常所需要的布局。 2.display属性 在 css 中实现页面布局的主要方法是设定display属性的值。此属性允许我们更改默认的显示方式。正常流中的所有内容都有一个display的值，用作元素的默认行为方式。例如，英文段落显示在一个段落的下面，这是因为它们的样式是display:block。如果在段落中的某个文本周围创建链接，则该链接将与文本的其余部分保持内联，并且不会打断到新行。这是因为a元素默认为display:inline。

您可以更改此默认显示行为。例如，li元素默认为display:block，这意味着在我们的英文文档中，列表项显示为一个在另一个之下。如果我们将显示值更改为inline，它们现在将显示在彼此旁边，就像单词在句子中所做的那样。事实上，您可以更改任何元素的display值，这意味着您可以根据它们的语义选择 html 元素，而不必关心它们的外观。他们的样子是你可以改变的。

除了可以通过将一些内容从block转换为inline（反之亦然）来更改默认表示形式之外，还有一些更大的布局方法以display值开始。但是，在使用这些属性时，通常需要调用其他属性。在讨论布局时，对我们来说最重要的两个值是 display: flex 和 display: grid。 3.弹性盒子 Flexbox 是 CSS 弹性盒子布局模块的缩写，它被专门设计出来用于创建横向或是纵向的一维页面布局。要使用 flexbox，你只需要在想要进行 flex 布局的父元素上应用display: flex ，所有直接子元素都将会按照 flex 进行布局。 4.浮动 把一个元素“浮动”(float) 起来，会改变该元素本身和在正常布局流（normal flow）中跟随它的其他元素的行为。这一元素会浮动到左侧或右侧，并且从正常布局流 (normal flow) 中移除，这时候其他的周围内容就会在这个被设置浮动的元素周围环绕。

属性有四个可能的值：

• left — 将元素浮动到左侧。
• right — 将元素浮动到右侧。
• none — 默认值，不浮动。
• inherit — 继承父元素的浮动属性。