1. 浮动（Float）布局：
应用场景：用于创建多列布局，如文本环绕图片、新闻文章列表等。
实操实践：
.float-left {
float: left;
margin-right: 20px; /* 为防止重叠，添加一些间距 */
}
.float-right {
float: right;
margin-left: 20px;
}
2. 定位（Position）布局：
应用场景：用于创建特定位置的元素布局，如弹出框、导航菜单、悬浮按钮等。
实操实践：
.position-relative {
position: relative;
}
.position-absolute {
position: absolute;
top: 0;
right: 0;
}
3. 弹性盒子（Flexbox）布局：
应用场景：用于创建自适应和灵活的布局，特别适合处理一维的布局问题。
实操实践：
.flex-container {
display: flex;
justify-content: space-between; /* 在容器内均匀分布子元素 */
align-items: center; /* 在交叉轴上居中对齐 */
}
.flex-item {
flex: 1; /* 自动扩展以填充剩余空间 */
}
4. 栅格（Grid）布局：
应用场景：用于创建复杂的多行多列布局，更适合二维的布局需求。
实操实践：
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 创建3列等宽布局 */
gap: 20px; /* 设置间距 */
}
5. 响应式布局：
应用场景：用于在不同设备上适应不同屏幕尺寸，提供更好的用户体验。
实操实践：
@media (max-width: 768px) {
.responsive-element {
width: 100%; /* 在小屏幕上铺满宽度 */
}
}
6. 样式覆盖与优先级控制：
应用场景：在特定情况下，需要根据不同的状态或条件应用不同的样式。
实操实践：
/* 通过class覆盖样式 */
.element {
color: blue;
}
.element.special {
color: red;
}
/* 使用!important提高样式优先级 */
.high-priority {
background-color: green !important;
}
7. 网格（Grid）布局与弹性盒子（Flexbox）布局的结合：
应用场景：将弹性盒子嵌套在网格布局中，以创建更复杂的布局结构。
实操实践：
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr;
}
.flexbox-container {
display: flex;
flex-direction: column;
justify-content: space-between;
}
8. 多列等高布局：
应用场景：在不确定高度的情况下，使多列保持等高。
实操实践：
.column-container {
display: flex;
}
.column {
flex: 1;
display: flex;
flex-direction: column;
}
9. 伪元素（Pseudo-elements）创建清除浮动：
应用场景：在父元素内部清除浮动，避免子元素造成布局混乱。
实操实践：
.clearfix::after {
content: "";
display: table;
clear: both;
}
10. CSS网格库和框架的使用：
应用场景：在大型项目中，使用现有的CSS网格库（如Bootstrap、Foundation等）加速布局开发。
实操实践：
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
11. CSS自定义属性（Variables）用于布局：
应用场景：使用CSS变量来调整布局中的尺寸、间距等值，实现动态布局调整。
实操实践：
:root {
--main-width: 800px;
}
.container {
width: var(--main-width);
}
12. Flexbox与Grid的兼容性处理：
应用场景：在需要支持较旧浏览器的情况下，使用Flexbox和Grid的备用方案。
实操实践：
.container {
display: flex;
display: -webkit-flex; /* 适用于旧版本的WebKit内核浏览器 */
display: grid;
display: -ms-grid; /* 适用于IE 10/11 */
}
13. 网格（Grid）和媒体查询结合：
应用场景：结合网格布局和媒体查询，实现复杂的响应式布局。
实操实践：
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
@media (max-width: 768px) {
.grid-container {
grid-template-columns: 1fr;
}
}
14. 负边距和绝对定位实现居中：
应用场景：通过负边距和绝对定位，实现元素的水平垂直居中。
实操实践：
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
15. 粘性定位（Sticky Positioning）：
应用场景：使元素在特定滚动范围内保持固定位置，适用于导航栏等。
实操实践：
.sticky-element {
position: -webkit-sticky;
position: sticky;
top: 0;
}
16. BEM命名约定：
应用场景：使用块（Block）、元素（Element）、修饰符（Modifier）的命名约定，使样式结构更清晰。
实操实践：
<div class="button button--primary button--large">Click me</div>
17. CSS Grid的命名网格线：
应用场景：在CSS Grid布局中使用命名网格线，提高布局可读性。
实操实践：
.grid-container {
display: grid;
grid-template-columns: [sidebar-start] 1fr [content-start] 2fr [content-end] 1fr [sidebar-end];
}
18. 弹性盒子的弹性增长和收缩：
应用场景：在弹性盒子中，使用flex-grow和flex-shrink控制子元素的伸缩行为。
实操实践：
.flex-container {
display: flex;
}
.flex-item {
flex-grow: 1; /* 允许元素伸展以填充空间 */
flex-shrink: 0; /* 阻止元素缩小 */
}
