白骑士的CSS教学语法基础篇之布局 2.5.1 流式布局与固定布局

白骑士所长

已于 2024-09-20 13:01:29 修改

阅读量1k

点赞数 17

分类专栏： CSS 教学文章标签： css 前端

于 2024-08-26 00:05:21 首次发布

本文链接：https://blog.csdn.net/JeremyTC/article/details/141327118

版权

教学同时被 2 个专栏收录

325 篇文章 3 订阅

订阅专栏

CSS

76 篇文章 0 订阅

订阅专栏

系列目录

上一篇：白骑士的CSS教学语法基础篇之盒模型 2.4.3 盒子外边距折叠

在网页设计和开发中，布局是至关重要的部分。了解不同的布局方法可以帮助你创建更具响应性和适应性的网页设计。两种常见的布局方式是流式布局和固定布局。

流式布局（Fluid Layout）

流式布局，又称为弹性布局或自适应布局，是一种布局方式，其主要特点是元素的宽度使用百分比或相对单位（如 ‘em‘、‘rem‘），而不是固定的像素值。这样，布局可以根据容器的大小自动调整，以适应不同的屏幕尺寸和设备。

特点：

自适应性：流式布局能够自动调整元素的宽度和位置，适应不同的屏幕尺寸，提供更好的响应式设计。
灵活性：由于元素的宽度使用相对单位，设计可以根据父容器的大小变化。
无需媒体查询：流式布局在许多情况下无需使用媒体查询即可实现响应式设计。

HTML示例：

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

CSS示例：

.container {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
}



.box {
    width: 48%; /* 使用百分比宽度 */
    margin: 1%;
    padding: 10px;
    background-color: lightcoral;
    box-sizing: border-box;
    float: left; /* 流式布局中的常见技术 */
}

解释：

在这个例子中，‘.box‘ 元素的宽度是相对于其父容器 ‘.container‘ 的宽度，因此当 ‘.container‘ 的宽度变化时，‘.box‘ 元素也会相应调整宽度。

优点：

适应性强：能适应不同屏幕尺寸，适合多种设备。
灵活设计：设计更具灵活性，可以应对内容和容器大小的变化。

缺点：

可能导致布局问题：在某些情况下，流式布局可能导致元素过度缩放或内容溢出。
复杂的设计：设计复杂的流式布局可能需要更多的调整和测试。

固定布局（Fixed Layout）

固定布局是一种将元素宽度和高度设置为固定像素值的布局方式。这意味着元素的大小不会随容器或视口的变化而变化。固定布局通常用于需要精确控制元素位置和大小的设计。

特点：

精确控制：固定布局允许开发者精确控制每个元素的大小和位置。
一致性：元素的大小和位置不会因容器大小变化而改变，提供一致的布局效果。

HTML示例：

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

CSS示例：

.container {
    width: 960px; /* 固定宽度 */
    margin: 0 auto; /* 居中对齐 */
    padding: 10px;
    box-sizing: border-box;
}

.box {
    width: 300px; /* 固定宽度 */
    height: 150px; /* 固定高度 */
    margin: 10px;
    padding: 10px;
    background-color: lightcoral;
    float: left;
    box-sizing: border-box;
}

解释：