CSS布局技巧
本文主要介绍一些常用的CSS布局技巧，包括常规流（行级、块级、弹性盒子、Grid布局）、浮动和定位，并提供它们的应用场景和实操实践。
常规流
常规流是HTML中元素默认的布局方式，主要包括行级布局和块级布局。以下是它们的应用场景和实操实践。
行级布局
应用场景
- 创建导航菜单
- 文字排列成行
- 无序/有序列表
实操实践
.navbar {
display: inline;
}
.list-item {
display: inline;
margin-right: 10px;
}
<nav class="navbar">
<ul>
<li class="list-item">Home</li>
<li class="list-item">About</li>
<li class="list-item">Services</li>
<li class="list-item">Contact</li>
</ul>
</nav>
上述代码片段是一个简单的导航栏（navbar）布局。通过CSS样式设置，.navbar 类被设置为 display: inline;，这意味着导航栏将按照行内元素的方式进行排列。
同时，.list-item 类也被设置为 display: inline;，这样 <li> 元素将变成行内元素并在同一行内排列。
当浏览器渲染这段代码时，导航栏会水平地显示在页面上，其中的导航项也将水平排列，并且每个导航项之间会有 10 像素的右边距。
块级布局
应用场景
- 创建页面主体布局
- 分割不同内容区域
- 实现垂直居中
实操实践
.container {
display: block;
width: 100%;
}
.section {
display: block;
margin-bottom: 20px;
}
.centered {
display: block;
margin: 0 auto;
width: 50%;
}
<div class="container">
<div class="section">
<!-- 区域1内容 -->
</div>
<div class="section">
<!-- 区域2内容 -->
</div>
</div>
<div class="centered">
<!-- 居中内容 -->
</div>
通过CSS样式设置，.container 类被设置为 display: block;，表示它是块级元素，并且设定了宽度为 100% ，即占满父容器的宽度。
.section 类也被设置为 display: block;，表示每个区域都是块级元素，并且设置了底部外边距为 20 像素，用于在各个区域之间增加间距。
.centered 类被设置为 display: block;，表示居中内容也是块级元素。同时，使用 margin: 0 auto; 将内容水平居中，并设置宽度为 50%，使其占据父容器宽度的一半。
这样，当浏览器渲染这段代码时，.container 区域将以块级元素的形式显示，并占据整个父容器的宽度。每个 .section 区域之间会有 20 像素的间距。而 .centered 部分的内容将在页面中水平居中，宽度为父容器宽度的一半。
弹性盒子布局
弹性盒子布局是一种灵活的布局方式，可以更好地适应不同尺寸的屏幕。
应用场景
- 创建响应式布局
- 实现水平居中和垂直居中
- 等高的列布局
实操实践
.container {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
}
.column {
flex: 1; /* 列的平分宽度 */
}
<div class="container">
<div class="column">
<!-- 列内容 -->
</div>
<div class="column">
<!-- 列内容 -->
</div>
</div>
.container 类被设置为 display: flex;，表示它是一个弹性容器。同时，使用 justify-content: center; 将内容水平居中对齐，align-items: center; 则使内容垂直居中对齐。
.column 类设置为 flex: 1;，意味着列将平均占据可用的宽度，实现列的等分布局。
在HTML部分，通过 <div> 元素创建了一个名为 .container 的弹性容器，并包含了两个具有 .column 类的列。
这样，当浏览器渲染这段代码时，.container 容器将以弹性盒子的形式显示，并且其中的列会平均占据可用的宽度。同时，列中的内容会在水平和垂直方向上居中对齐，实现了内容的居中布局。
Grid布局
Grid布局是一种二维网格布局系统，方便进行复杂的页面布局。它提供了更灵活的控制方式，可以对元素进行精确的定位和对齐。
应用场景
- 创建复杂的网格布局
- 实现多栏布局或定位布局
- 响应式设计
实操实践
container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 列平分为3份 */
grid-gap: 20px; /* 列间距 */
}
.item {
grid-column: span 2; /* 跨越两列 */
grid-row: span 2; /* 跨越两行 */
}
<div class="container">
<div class="item">
<!-- 元素内容 -->
</div>
<div class="item">
<!-- 元素内容 -->
</div>
<div class="item">
<!-- 元素内容 -->
</div>
<div class="item">
<!-- 元素内容 -->
</div>
</div>
在上面的例子中，.container 是一个网格容器，通过设置 display: grid 来定义它为一个Grid布局。grid-template-columns 指定了每列的宽度，这里使用 repeat(3, 1fr) 让每列平均分成3份。
.item 是网格容器中的一个元素，通过设置 grid-column 和 grid-row 来确定它所占用的列数和行数。
Grid布局还具有更多强大的功能，如对齐、命名网格线等，可以根据实际需要灵活运用。
浮动
浮动是一种常用的布局技巧，在多栏布局和图文混排中经常使用。
应用场景
- 实现多列布局
- 图片与文本混排
- 创建响应式布局
实操实践
.container {
overflow: hidden; /* 清除浮动 */
}
.column {
float: left;
width: 33.33%; /* 三栏等分 */
}
<div class="container">
<div class="column">
<!-- 第一列内容 -->
</div>
<div class="column">
<!-- 第二列内容 -->
</div>
<div class="column">
<!-- 第三列内容 -->
</div>
</div>
.container 类被设置为 overflow: hidden;，用于清除浮动。这样可以避免浮动元素对其后面的内容造成影响。
.column 类被设置为 float: left;，使列元素浮动到左侧。同时，使用 width: 33.33%; 将每个列的宽度设定为父容器宽度的三分之一，实现三栏等分布局。
浏览器渲染这段代码时，.container 容器将正常显示，其中的列元素会在水平方向上浮动到左侧，并且按照相等的比例平分可用的宽度。通过设置 overflow: hidden;，可以清除浮动以避免影响后续内容的布局。
定位
定位可以将元素精确地放置在页面的指定位置。
应用场景
- 创建浮动窗口
- 实现导航栏固定在页面顶部
- 创建粘性页脚
实操实践
.container {
position: relative;
}
.fixed-navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
.sticky-footer {
position: sticky;
bottom: 0;
}
<div class="container">
<header class="fixed-navbar">
<!-- 导航栏内容 -->
</header>
<main>
<!-- 页面主体内容 -->
</main>
<footer class="sticky-footer">
<!-- 页脚内容 -->
</footer>
</div>
.container 类被设置为 position: relative;，表示它是一个相对定位的容器，用于定位内部元素。
.fixed-navbar 类被设置为 position: fixed;，使导航栏固定在页面的顶部。
.sticky-footer 类被设置为 position: sticky;，使页脚在页面滚动时保持粘性定位。
在HTML部分，<header>、<main> 和 <footer>，分别用于显示导航栏、页面主体内容和页脚。
浏览器渲染这段代码时，.container 容器将正常显示，其中的 header 元素被固定在页面的顶部，main 元素用于显示页面的主体内容，而 footer 元素则会在页面滚动时保持粘性定位在页面的底部。通过设置不同的定位属性，实现了导航栏和页脚的特殊布局效果。
