CSS布局技巧| 豆包MarsCode AI刷题

以下是一些常见CSS布局技巧的汇总，包括其应用场景和实操示例：

一、浮动（float）布局

应用场景：

• 用于实现多列布局，比如网页中的侧边栏和主内容区域的并列排列。

• 让图片或文字环绕效果，常见于文章中图片与文字的排版。

实操示例：

浮动布局示例 .sidebar { float: left; width: 25%; background-color: #f1f1f1; } .main-content { float: right; width: 70%; background-color: #fff; }

/* 清除浮动，防止父元素高度塌陷 */

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

在上述示例中，通过将侧边栏向左浮动，主内容区域向右浮动，实现了两列并列布局。同时使用 ::after 伪元素清除了浮动，避免父元素高度塌陷。

二、定位（position）布局

应用场景：

• 制作弹出式菜单、模态框等需要精确控制元素位置的场景。

• 实现元素的层叠效果，比如图片上叠加文字说明或图标。

实操示例：

定位布局示例 .modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 400px; height: 300px; background-color: #fff; border: 1px solid #000; z-index: 999; } .overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 998; }

打开模态框 在此示例中，利用 position: fixed 定位创建了一个模态框和覆盖层。模态框通过 transform 函数使其在页面中心显示，覆盖层则铺满整个页面，用于遮挡背景内容，当点击按钮时可显示它们。

三、弹性盒子布局（Flexbox）

应用场景：

• 自适应布局，如在不同屏幕尺寸下，让一组元素均匀分布或根据需要调整排列方式。

• 实现导航栏项目的灵活排列，可轻松实现居中、两端对齐等效果。

实操示例：

弹性盒子布局示例 .nav { display: flex; justify-content: space-between; background-color: #f1f1f1; padding: 10px; } .nav-item { text-align: center; padding: 5px 10px; }

在这个例子中，通过将导航栏的父元素设置为 display: flex，并使用 justify-content: space-between 让导航栏中的各个项目在水平方向上两端对齐，实现了一种常见的导航栏布局效果。这种布局方式可以很方便地根据元素数量和屏幕尺寸自动调整间距等。