前端实践选题：CSS布局技巧 | 豆包MarsCode AI刷题

钱里共相会
57 阅读7分钟

此篇笔记是本人根据学习和拓展，总结的CSS布局技巧，包括浮动、定位、弹性盒子布局等，同时写出了一些它们的应用场景和实操实践，以下是我笔记的完整内容

一、CSS布局概述

CSS布局是指使用层叠样式表（Cascading Style Sheets，简称CSS）来定义网页元素在页面上的排列和显示方式的过程。它是网页设计和前端开发中的一个重要部分，用于控制网页的结构和外观。CSS布局使得开发者能够创建出既美观又功能性强的网页界面。

CSS中有三种常用的布局方式，（1）常规流布局方式；（2）浮动布局方式；（3)绝对定位布局方式。接下来我会分别介绍这三种布局方式。

二、常规流（又称文档流）布局

1. 行级排版上下文(lFC)

（1）概述：只包含行级盒子的容器会创建一个IFC，行级盒子会在水平方向排列。

（2）应用场景：适用于文本和行内元素的默认排列。

（3）实践操作：

<h3>常规流 - 行级排版上下文(lFC)</h3>
<hr>
<span style="background-color: rgb(104, 201, 128);">行级盒子1</span>
<span style="background-color: rgb(225, 224, 142);">行级盒子2</span>
<span style="background-color: rgb(161, 178, 238);">行级盒子3</span>

代码实现结果展示：

image.png

=> 补充，如果不是行级元素可以通过display: inline;属性通过将其转换成行级元素

2.块级排版上下文(BFC)

（1）概述：块级盒子会创建一个BFC，块级盒子会在垂直方向排列，并且每个块级盒子独占一行。

（2）应用场景：适用于创建结构化的页面布局，如头部、内容区域、侧边栏和底部。

（3）实践操作：

<h3>常规流 - 块级排版上下文(BFC)</h3>
<hr>
<header>这是头部</header>
<main>这是主体</main>
<footer>这是尾部</footer>

header, main, footer {
    margin: 10px;
    padding: 10px;
}

header {
    background-color: rgb(104, 201, 128);
}

main {
    background-color: rgb(192, 221, 144);
    height: 200px;
}

footer {
    background-color: rgb(155, 176, 224);
}

代码实现结果展示： image.png

=> 补充，如果不是块级元素可以通过display: block;属性通过将其转换成行级元素

3. Flex 排版上下文

（1）概述：使用Flex布局可以更灵活地对齐和分布容器内的子元素。

（2）应用场景：适用于需要响应式设计的布局，如导航栏、卡片布局等。

（3）实践操作：

以实现盒子中子元素的水平垂直居中为例

<h3>常规流 - Flex 排版上下文</h3>
<hr>
<div class="father">
    <div class="son">我是子元素，我想要水平垂直居中</div>
</div>


.father {
    width: 300px;
    height: 300px;
    background-color: rgb(104, 201, 128);
    display: flex;
    justify-content: center;
    align-items: center;
}

.son {
    height: 100px;
    line-height: 100px;
    background-color: rgb(214, 126, 126);
}

代码实现结果展示：

image.png

4. Grid 排版上下文（网格布局/栅格布局）

（1）概述：Grid布局是一个二维布局系统，可以创建行和列的网格。

（2）应用场景：适用于复杂的页面布局，如页面杂志布局等。

（3）实践操作：

以实现一个基本的二维布局为例

<h3>常规流 - Grid 排版上下文</h3>
<hr>
<div class="container">
    <div class="grid-child1">我是1号网格,我占据了2行3列</div>
    <div class="grid-child2">我是2号网格,我占据了2行1列</div>
    <div class="grid-child3">我是3号网格,我占据了1行1列</div>
    <div class="grid-child4">我是4号网格,我占据了1行2列</div>
    <div class="grid-child5">我是5号网格,我占据了1行1列</div>
</div>

.container {
    width: 400px;
    height: 200px;
    background-color: rgb(104, 201, 128);
    /* 设置 grid 布局，将盒子划分为 3 行 4 列 */
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    grid-gap: 5px;
}
/* 根据需求划分布局 */
.grid-child1 {
    grid-row: 1/3;
    grid-column: 1/4;
    background-color: rgb(214, 126, 126);
}
.grid-child2 {
    grid-row: 1/3;
    grid-column: 4/6;
    background-color: rgb(220, 226, 147);
}
.grid-child3 {
    grid-row: 3/5;
    grid-column: 1/2;
    background-color: rgb(193, 139, 207);
}
.grid-child4 {
    grid-row: 3/5;
    grid-column: 2/4;
    background-color: rgb(142, 181, 214);
}
.grid-child5 {
    grid-row: 3/5;
    grid-column: 4/6;
    background-color: rgb(214, 126, 126);
}

代码实现结果展示：

image.png

5. Table 排版上下文

（1）概述：Table布局使用表格模型来排列元素，类似于HTML表格。适用于需要展示数据表格的情况。

（2）应用场景：适用于需要展示数据表格的情况。

（3）实践操作：

<h3>常规流 - Table排版上下文</h3>
<hr>
<div class="table">
    <div class="row">
        <div class="cell header-cell">列1</div>
        <div class="cell header-cell">列2</div>
        <div class="cell header-cell">列3</div>
    </div>
    <div class="row">
        <div class="cell">数据1</div>
        <div class="cell">数据2</div>
        <div class="cell">数据3</div>
    </div>
    <div class="row">
        <div class="cell">数据4</div>
        <div class="cell">数据5</div>
        <div class="cell">数据6</div>
    </div>
</div>

/* 容器设置为表格显示 */
.table {
    display: table;
    width: 100%;
    border-collapse: collapse;  /* 合并边框 */
}

/* 行设置为表格行 */
.row {
    display: table-row;
}

/* 单元格设置为表格单元格 */
.cell {
    display: table-cell;
    border: 1px solid #000000;/* 设置单元格边框 */
    padding: 10px;   /* 设置单元格内边距 */
}

/* 表头单元格样式设置 */
.header-cell {
    background-color: rgb(186, 238, 161);
    font-weight: bold;
}

代码实现结果展示：

image.png

三、flow浮动布局

  1. 概述：浮动布局通过设置元素的 float 属性，使元素向左或向右浮动，脱离常规流。

  2. 应用场景：多适用于创建图文环绕效果（其他效果建议使用，其他布局同样可以实现）

  3. 实践操作：

<h3>float浮动布局</h3>
<hr>
<div class="image">我是浮动图片</div>
<p>这里是文字介绍这里是文字介绍这里是文字介绍这里是文字介绍这里是文字介绍
    这里是文字介绍这里是文字介绍这里是文字介绍这里是文字介绍这里是文字介绍
    这里是文字介绍这里是文字介绍这里是文字介绍这里是文字介绍这里是文字介绍
    这里是文字介绍这里是文字介绍这里是文字介绍这里是文字介绍这里是文字介绍
</p>

.image {
    width: 150px;
    height: 100px;
    background-color: rgb(104, 201, 128);
    float: left;
}

代码实现结果展示：

image.png

四、绝对定位布局

  1. 概述：绝对定位布局通过设置元素的 position 属性为 absolute，使元素相对于其最近的已定位（非 static）祖先元素进行定位。

  2. 应用场景：适用于创建弹出窗口、固定位置的导航栏等。

  3. 实践操作：

以一个顶部弹窗实现为例

 <h3>绝对定位布局</h3>
<hr>
<div class="container">
    <div class="popup">我是弹窗</div>
    <p>这里是正文文字这里是正文文字这里是正文文字这里是正文文字这里是正文文字
        这里是正文文字这里是正文文字这里是正文文字这里是正文文字这里是正文文字
        这里是正文文字这里是正文文字这里是正文文字这里是正文文字这里是正文文字
        这里是正文文字这里是正文文字这里是正文文字这里是正文文字这里是正文文字
    </p>
</div>

.container {
    width: 100%;
    height: 300px;
    background-color: blanchedalmond;
    position: relative;
}

.popup {
    position: absolute;
    top: 10px;
    left: 35%;
    width: 150px;
    height: 70px;
    background-color: rgb(116, 211, 132);
}

代码实现结果展示：

image.png

一些AI练中学的使用体会：

在编写这篇笔记的时候，我的所有实践操作都是在“AI练中学”模块进行代码编写和运行的，这为我提供了很大的便利。首先，该模块具有很好的页面设计效果，使用起来非常舒适；其次，该模块的右侧提供了效果实现的页面，让我能够更方便的查看我编写代码后页面的变化；再者，该模块还有AI功能，让我在编写代码的过程中如果遇到什么问题，也能直接向ai进行询问，并及时的给我答案，该ai功能还有代码提示功能，同时也方便了我的代码编写。总的来说，该AI练中学功能非常有利于学习。

avatar
文章
阅读
粉丝