CSS布局1

正常布局流：

正常布局流(normal flow)是指在不对页面进行任何布局控制时，浏览器默认的HTML布局方式。让我们快速地看一个HTML的例子：

<p>I love my cat.</p>

<ul>
  <li>Buy cat food</li>
  <li>Exercise</li>
  <li>Cheer up friend</li>
</ul>

<p>The end!</p>

默认情况下，浏览器的显示如下:

I love my cat.

• Buy cat food
• Exercise
• Cheer up friend

The end!

注意，HTML元素完全按照源码中出现的先后次序显示——第一个段落、无序列表、第二个段落。出现在另一个元素下面的元素被描述为块元素，与出现在另一个元素旁边的内联元素不同，内联元素就像段落中的单个单词一样。

当你使用css创建一个布局时，你正在离开正常布局流，但是对于页面上的多数元素，正常布局流将完全可以创建你所需要的布局。从一个结构良好的Html文档开始是非常重要，因为你可以按照默认的方式来搭建页面，而不是自造车轮。

display属性：

在css中实现页面布局的主要方法是设定display属性的值。此属性允许更改默认的显示方式。正常流中的所有内容都有一个display的值，用作元素的默认行为方式。例如，英文段落显示在一个段落的下面，这是因为它们的样式是display:block。如果在段落中的某个文本周围创建链接，则该链接将与文本的其余部分保持内联，并且不会打断到新行。这是因为<a>元素默认为display:inline。可以更改此默认显示行为。例如，<li>元素默认为display:block，这意味着在英文文档中，列表项显示为一个在另一个之下。如果将显示值更改为inline，它们现在将显示在彼此旁边，就像单词在句子中所做的那样。事实上，可以更改任何元素的display值，这意味着可以根据它们的语义选择html元素，而不必关心它们的外观。他们的样子是可以改变的。除了可以通过将一些内容从block转换为inline（反之亦然）来更改默认表示形式之外，还有一些更大的布局方法以display值开始。但是，在使用这些属性时，通常需要调用其他属性。在讨论布局时，最重要的两个值是display:flex和display:grid。

弹性盒子：

Flexbox 是CSS 弹性盒子布局模块（flexible box layo Module）的缩写，它被专门设计出来用于创建横向或是纵向的一维页面布局。要使用flexbox，你只需要在想要进行flex布局的父元素上应用display：flex ，所有直接子元素都将会按照flex进行布局。

Grid布局：

Flexbox用于设计横向或纵向的布局，而Grid布局则被设计用于同时在两个维度上把元素按行和列排列整齐。

同flex一样，你可以通过指定display的值来转到grid布局：display: grid。下面的例子使用了与flex例子类似的HTML标记，描述了一个容器和若干子元素。除了使用display:grid，我们还分别使用 grid-template-rows 和 grid-template-columns 两个属性定义了一些行和列的轨道。定义了三个1fr的列，还有两个100px的行之后，无需再在子元素上指定任何规则，它们自动地排列到了我们创建的格子当中。

.wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 100px 100px;
    grid-gap: 10px;
}
<div class="wrapper">
    <div class="box1">One</div>
    <div class="box2">Two</div>
    <div class="box3">Three</div>
    <div class="box4">Four</div>
    <div class="box5">Five</div>
    <div class="box6">Six</div>
</div>

 一旦你拥有了一个grid，你也可以显式地将元素摆放在里面，而不是依赖于浏览器进行自动排列。在下面的第二个例子里，我们定义了一个和上面一样的grid，但是这一次我们只有三个子元素。我们利用 grid-column 和 grid-row 两个属性来指定每一个子元素应该从哪一行/列开始，并在哪一行/列结束。这就能够让子元素在多个行/列上展开。

.wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 100px 100px;
    grid-gap: 10px;
}

.box1 {
    grid-column: 2 / 4;
    grid-row: 1;
}

.box2 {
    grid-column: 1;
    grid-row: 1 / 3;
}

.box3 {
    grid-row: 2;
    grid-column: 3;
}