深入CSS 布局——WEB开发系列29

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

---

一、正常布局流（Normal Flow）

CSS的布局基础是“正常流”，也就是页面元素在没有特别指定布局方式时的默认排列方式。正常流分为两种主要类型：

1. 块级元素：默认情况下，块级元素会独占一行，并且从上到下排列。常见的块级元素有​​<div>​​、​​<p>​​、​​<h1>​​、​​<ul>​​等。
2. 行内元素：行内元素不会独占一行，它们会在一行内从左到右排列，直到空间不足再换行。常见的行内元素有​​<span>​​、​​<a>​​、​​<img>​​等。

举个简单的例子：

<div><p>这是一个段落。</p><p>这是另一个段落。</p>
</div>

两个段落​​<p>​​都是块级元素，它们会按照正常流的规则垂直排列。而且，即使你在​​<p>​​​标签之间加入了许多空格，段落依然会在页面中按照垂直方向排列。

---

二、Display属性

​​display​​属性决定了元素的布局行为。最常见的​​display​​值包括​​block​​、​​inline​​、​​inline-block​​、​​none​​以及我们将在后文讨论的​​flex​​和​​grid​​。

1. block：将元素定义为块级元素，使其独占一行。
2. inline：将元素定义为行内元素，使其在行内排列。
3. inline-block：结合了​​block​​和​​inline​​的特性，元素本身是行内元素，但可以设置宽高等属性。
4. none：完全隐藏元素，元素不占据任何空间。

一个例子展示了这些不同的​​display​​​值的效果：

<div style="display: block;">这是一个块级元素</div>
<span style="display: inline;">这是一个行内元素</span>
<div style="display: inline-block; width: 100px;">这是一个inline-block元素</div>

​​display​​​属性是理解CSS布局的基础，它控制了元素在页面上的布局行为。

---

三、弹性盒子（Flexbox）

弹性盒子（Flexbox）是CSS3引入的一种布局模式，用来为不同尺寸的屏幕设计复杂的布局。通过设置​​display: flex;​​，你可以将一个容器变成弹性容器（Flex container），而其内部的子元素则成为弹性项（Flex items）。

---

1. 设置 ​​display: flex;​​

将父元素设置为​​display: flex;​​​后，子元素将自动按照水平（默认）或垂直方向排列，并且能够灵活调整大小以适应容器。

<div style="display: flex;"><div style="background-color: lightblue;">Item 1</div><div style="background-color: lightgreen;">Item 2</div><div style="background-color: lightcoral;">Item 3</div>
</div>

三个子元素在同一行水平排列，因为默认情况下​​flex-direction​​是​​row​​。

---

2. 设置 ​​flex​​ 属性

​​flex​​属性是弹性盒子的核心，用于设置弹性项如何在弹性容器中分配空间。它通常写作​​flex: 1;​​、​​flex: 2;​​​等，表示子元素在容器中所占的相对比例。

<div style="display: flex;"><div style="flex: 1; background-color: lightblue;">Item 1</div><div style="flex: 2; background-color: lightgreen;">Item 2</div><div style="flex: 1; background-color: lightcoral;">Item 3</div>
</div>

​​Item 2​​占据的空间是​​Item 1​​和​​Item 3​​​的两倍。

---

3. 弹性盒子布局的其他属性

• ​justify-content​​：控制弹性项在主轴（默认水平轴）上的对齐方式。常见值有​​flex-start​​（左对齐）、​​center​​（居中）、​​space-between​​（两端对齐，间隔均匀）等。
• ​​align-items​​：控制弹性项在交叉轴（默认垂直轴）上的对齐方式。常见值有​​stretch​​（拉伸）、​​center​​（居中）、​​flex-start​​​（顶部对齐）等。

<div style="display: flex; justify-content: space-between; align-items: center;"><div style="background-color: lightblue;">Item 1</div><div style="background-color: lightgreen;">Item 2</div><div style="background-color: lightcoral;">Item 3</div>
</div>

上面的代码展示了如何通过​​justify-content​​和​​align-items​​​控制子元素的排列方式。

---

四、Grid布局

Grid布局是CSS的一种二维布局系统，可以非常轻松地创建复杂的网页布局。与Flexbox相比，Grid布局能够同时控制行和列。

1. 设置 ​​display: grid;​​

通过设置​​display: grid;​​​，你可以将一个容器变成网格容器（Grid container），并在其中定义行和列。

<div style="display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px;"><div style="background-color: lightblue;">Item 1</div><div style="background-color: lightgreen;">Item 2</div><div style="background-color: lightcoral;">Item 3</div><div style="background-color: lightpink;">Item 4</div>
</div>

网格容器被定义为三列两行，每个单元格大小为100px。子元素将自动填充这些网格单元。

---

2. 在网格内放置元素

你可以通过​​grid-column​​和​​grid-row​​​属性来指定元素在网格中的位置。

<div style="display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px;"><div style="background-color: lightblue; grid-column: 1 / 3; grid-row: 1 / 2;">Item 1</div><div style="background-color: lightgreen;">Item 2</div><div style="background-color: lightcoral;">Item 3</div><div style="background-color: lightpink;">Item 4</div>
</div>

此例中，​​Item 1​​​占据了网格的前两列和第一行。

---

3. Grid布局的其他属性

• ​​gap​​：设置网格单元格之间的间隔。
• ​​grid-template-areas​​​：定义命名网格区域，可以用于创建更语义化的布局。

<div style="display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-areas: 'header header header''sidebar content content''footer footer footer';"><div style="grid-area: header; background-color: lightblue;">Header</div><div style="grid-area: sidebar; background-color: lightgreen;">Sidebar</div><div style="grid-area: content; background-color: lightcoral;">Content</div><div style="grid-area: footer; background-color: lightpink;">Footer</div>
</div>

通过​​grid-template-areas​​​，我们创建了一个包含头部、侧边栏、内容区和底部的布局。

---

五、浮动（Float）

浮动是CSS中的一个经典布局方法，用于将元素从正常流中移出，并使其在父容器内左右浮动。通过设置​​float: left;​​或​​float: right;​​​，可以使元素分别浮动到父容器的左侧或右侧。

<div style="overflow: hidden;"><img src="image.jpg" style="float: left; margin-right: 20px;"><p>这是一个浮动示例，图片将浮动到左侧，文本将围绕在图片周围。</p>
</div>

在这个例子中，图片浮动到左侧，文本则环绕在图片右侧。

需要注意的是，浮动元素之后的内容通常会出现“塌陷”问题，即元素的父容器高度会变为0。解决方法是在浮动元素之后使用清除浮动（clear）技术：

.clearfix::after {content: "";display: table;clear: both;
}

使用​​.clearfix​​​类可以确保父容器包裹住浮动的子元素。

---

六、定位技术（Position）

CSS定位是通过设置​​position​​属性来改变元素在文档中的位置。主要的定位方式包括：

---

1. 简单定位示例

简单的定位属性包括​​static​​（默认）、​​relative​​、​​absolute​​、​​fixed​​和​​sticky​​。

<div style="position: relative; top: 20px; left: 30px;">这是一个相对定位的元素
</div>

---

2. 相对定位（Relative）

相对定位使元素相对于其正常位置进行移动。它不会影响文档流中其他元素的布局。

<div style="position: relative; top: 10px; left: 15px;">这是一个相对定位的元素
</div>

元素相对于其原始位置向下移动了10px，向右移动了15px。

---

3. 绝对定位（Absolute）

绝对定位的元素相对于最近的已定位祖先元素进行定位（如果没有，则相对于初始包含块）。绝对定位的元素脱离了文档流，不会影响其他元素的布局。

<div style="position: relative;"><div style="position: absolute; top: 0; right: 0;">这是一个绝对定位的元素</div>
</div>

内部的绝对定位元素相对于其父元素的右上角进行定位。

---

4. 固定定位（Fixed）

固定定位的元素相对于浏览器窗口进行定位，即使页面滚动，元素也会保持在固定位置。

<div style="position: fixed; bottom: 0; right: 0;">这是一个固定定位的元素
</div>

一个固定在浏览器窗口右下角的元素，即使页面滚动，它的位置也不会改变。

---

5. 粘性定位（Sticky）

粘性定位结合了相对定位和固定定位的特点，当元素在页面中滚动到一定位置时，会“粘”住并保持在该位置。

<div style="position: sticky; top: 0; background-color: yellow;">这是一个粘性定位的元素
</div>

当页面滚动时，元素会在到达顶部时固定在顶部。

---

七、表格布局

表格布局是一种老式但仍然有效的布局方式，特别适用于展示结构化数据。表格布局使用​​<table>​​、​​<tr>​​、​​<td>​​等标签定义行和列。

<table border="1"><tr><th>姓名</th><th>年龄</th></tr><tr><td>张三</td><td>28</td></tr><tr><td>李四</td><td>24</td></tr>
</table>

上述示例如何使用表格布局来展示数据。

---

八、多列布局

多列布局（Multi-column Layout）是一种将内容分为多个列的布局方式，类似于报纸的排版。通过​​column-count​​和​​column-width​​等属性，可以轻松实现多列布局。

<div style="column-count: 3; column-gap: 20px;">这是一个多列布局的示例。通过使用CSS的多列布局属性，我们可以将内容分为多个列。这种布局方式非常适合用于展示较长的文本内容，如新闻文章或博客文章。
</div>

文本被分成了三列，并且列与列之间有20px的间隔。

---

九、CSS布局综合练习题

为了更好地理解这些布局技术，我们来看看两个综合练习题，并提供相应的代码示例。

题1：创建一个三栏布局

使用Flexbox创建一个响应式三栏布局，其中左栏和右栏固定宽度，中间栏自适应剩余空间。

<div style="display: flex;"><div style="flex: 0 0 200px; background-color: lightblue;">左栏</div><div style="flex: 1; background-color: lightgreen;">中间栏</div><div style="flex: 0 0 200px; background-color: lightcoral;">右栏</div>
</div>

---

题2：创建一个简单的网格布局

使用Grid布局创建一个三行三列的网格，其中第一行的两个单元格合并为一个单元格，第三行的三个单元格合并为一个单元格。

<div style="display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px;"><div style="grid-column: span 2; background-color: lightblue;">合并两个单元格</div><div style="background-color: lightgreen;">单元格2</div><div style="background-color: lightcoral;">单元格3</div><div style="background-color: lightpink;">单元格4</div><div style="grid-column: span 3; background-color: lightgray;">合并三个单元格</div>
</div>

---

如有表述错误及欠缺之处敬请指正补充。