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

一、浮动布局 (Float)

原理

浮动布局通过 float 属性将元素从文档流中移出，使其浮动到容器的一侧。通常用于实现简单的多列布局或文字环绕效果。

常用属性

• float用于指定元素的浮动方向: left ， right ，none
• clear清除浮动对后续元素的影响: left ， right ， both ， none

应用场景

1. 文字环绕效果：如图文混排。
2. 简单的多列布局：如新闻页面的内容分栏。

实践示例

<div class="container">
  <div class="left">左侧内容</div>
  <div class="right">右侧内容</div>
</div>

.container {
    width: 100%;
  }
  
  .left {
    float: left;
    width: 30%;
    height: 100px;
    background-color: lightblue;
  }
  
  .right {
    float: right;
    width: 70%;
    height: 100px;
    background-color: lightcoral;
  }

效果演示：

---

二、定位布局 (Positioning)

原理

定位布局通过 position 属性控制元素的位置。

常用属性

• position：定义定位方式，取值包括：

static：静态定位，元素按文档流正常排列（默认值）。

relative：相对定位，元素相对于其正常位置进行偏移。

absolute：绝对定位，元素相对于最近的已定位祖先元素进行定位。

fixed：固定定位，元素相对于视口进行定位，滚动页面时保持固定不动。

sticky：粘性定位，元素在特定的滚动范围内表现为固定定位。

• top、right、bottom、left：用于设置元素偏移距离。

应用场景

1. 固定头部或侧边栏 ：使用 fixed 实现。
2. 弹窗 ：使用 absolute 定位到容器中心。
3. 粘性导航栏 ：使用 sticky。

实践示例

固定表头

<header class="fixed-header">固定表头</header>
<p>第 1 行。</p>
<p>第 2 行。</p>
......
<p>第 n行。</p>

.fixed-header {
  position: fixed;/*将元素设置为固定定位*/
  top: 0;
  width: 100%;
  background-color: lightgray;
}

效果演示 ：

---

三、弹性盒子布局 (Flexbox)

原理

弹性盒子通过 display: flex 定义一个灵活的容器，子元素可沿主轴和交叉轴排列。

常用属性

• 容器属性：flex-direction、justify-content、align-items、flex-wrap
• 子元素属性：flex（定义子元素的伸缩比例）、align-self、order（定义子元素的排列顺序）

应用场景

1. 水平/垂直居中。
2. 自适应布局：如响应式导航栏。
3. 等分布局：如网格图片布局。

实践示例

    <div class="flex-container">
        <div class="d1"></div>
        <div class="d2"></div>
        <div class="d3"></div>
      </div>

.d1, .d2, .d3 {
    width: 100px;
    height: 100px;
}
.d1 {
    background-color: yellow;
}
.d2 {
    background-color: red;
}
.d3 {
    background-color: blue;
}

使用弹性盒子前：

使用弹性盒子，增加水平居中显示相关属性后：

.flex-container{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

---

四、流体布局 (Fluid Layout)

原理

流体布局使用百分比单位或视口单位（vw 和 vh）定义宽度和高度，从而实现自适应不同屏幕尺寸的效果。

应用场景

• 响应式网页设计：让页面在不同设备上都能友好显示。

• 全屏内容块：如全屏背景图、全屏广告区域。

实践示例

<div class="fluid-container">流体布局</div>

.fluid-container {
  width: 80%;
  height: 50vh;/* 容器高度占视口的 50% */
  margin: 0 auto;
  background-color: lightblue;
}

缩小浏览器页面时：

放大浏览器页面时：

我们发现背景色是可以适配不同尺寸的页面的。

---