CSS布局技巧|豆包MarsCode AI刷题以下是一些常见的 CSS 布局技巧的汇总，包含浮动、定位、弹性盒子布局等，

以下是一些常见的 CSS 布局技巧的汇总，包含浮动、定位、弹性盒子布局等，并列出它们的应用场景和实操实践。

1. 浮动布局 (Float)

特点

元素可以左右浮动。
常用于文字环绕、简单的列布局。
会影响后续元素的文档流，需要清除浮动。

应用场景

多列布局 (如新闻版块)。
图文混排。

代码示例

<div class="container">
    <div class="box">Left</div>
    <div class="box">Right</div>
</div>


.container {
    width: 100%;
    overflow: hidden; /* 清除浮动 */
}
.box {
    float: left;
    width: 50%;
    background-color: lightblue;
    text-align: center;
}

2. 定位布局 (Position)

类型

static（默认）：普通文档流。
relative：相对于自身的偏移。
absolute：相对于最近的 relative 或 absolute 祖先。
fixed：相对于视口固定位置。
sticky：在某一滚动范围内固定。

应用场景

弹窗 (absolute)。
导航栏固定在顶部 (fixed)。
滚动吸顶效果 (sticky)。

代码示例

<div class="container">
    <div class="relative">Relative</div>
    <div class="absolute">Absolute</div>
</div>


.container {
    position: relative;
    height: 200px;
    border: 1px solid black;
}
.relative {
    position: relative;
    top: 10px;
    left: 10px;
}
.absolute {
    position: absolute;
    bottom: 10px;
    right: 10px;
}

3. 弹性盒子布局 (Flexbox)

特点

单方向布局（水平或垂直）。
自动调整子项的尺寸和间距。
支持排列、对齐、换行。

应用场景

居中对齐（水平+垂直）。
等宽/等高的多列布局。
可伸缩的导航栏。

代码示例

<div class="container">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
</div>


.container {
    display: flex;
    justify-content: space-around; /* 水平分布 */
    align-items: center; /* 垂直居中 */
    height: 100px;
}
.box {
    width: 50px;
    height: 50px;
    background-color: lightblue;
    text-align: center;
    line-height: 50px;
}

4. 网格布局 (CSS Grid)

特点

双方向布局（水平和垂直）。
精确的区域划分。
更适合复杂的页面布局。

应用场景

大型页面布局（如网页模板）。
图片/卡片网格。

代码示例

<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
</div>


.container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 两列均分 */
    gap: 10px; /* 设置间距 */
}
.item {
    background-color: lightblue;
    text-align: center;
    padding: 10px;
}

5. 多列布局 (Multi-column Layout)

特点

创建多列内容。
支持自动分割。

应用场景

文章排版。
新闻列表。

代码示例

<div class="container">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor metus in arcu.
</div>


.container {
    column-count: 3; /* 三列 */
    column-gap: 20px; /* 列间距 */
}

6. 表格布局 (Table)

特点

基于表格的行和列。
使用 table 元素或 display: table 创建。

应用场景

数据表格。
简单的页面布局（较老的技术）。

代码示例

<div class="container">
    <div class="row">
        <div class="cell">A1</div>
        <div class="cell">B1</div>
    </div>
    <div class="row">
        <div class="cell">A2</div>
        <div class="cell">B2</div>
    </div>
</div>


.container {
    display: table;
    width: 100%;
}
.row {
    display: table-row;
}
.cell {
    display: table-cell;
    padding: 10px;
    border: 1px solid black;
}

7. 块级格式化上下文 (BFC)

特点

独立的布局区域。
可以用于清除浮动，避免外边距折叠。

应用场景

清除浮动。
防止子元素影响父元素的布局。

代码示例

<div class="container">
    <div class="box">Box</div>
</div>


.container {
    overflow: hidden; /* 触发BFC */
}
.box {
    float: left;
    width: 100px;
    height: 100px;
    background-color: lightblue;
}

通过以上 CSS 布局技巧，能够灵活应对不同的页面布局需求。建议根据实际场景选择合适的布局方式，结合响应式设计实现良好的用户体验。