CSS 基础知识【学习笔记】04

前端布局：标准流、浮动与Flex布局

原创已于 2025-05-09 12:48:08 修改 · 402 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #学习 #css3 #html5 #笔记

于 2023-12-06 01:03:43 首次发布

本文主要介绍前端布局相关知识。首先阐述标准流是标签默认排布规则，接着讲解浮动属性float，其可让块元素水平排列，还介绍了清除浮动的方法。最后详细介绍Flex布局，它是浏览器提倡的布局模型，具有强大的空间分布和对齐能力，不会产生脱标现象。

接😁:

十六、标准流

标准流也叫文档流，指的是标签在页面中默认的排布规则，例如：块元素独占一行，行内元素可以一行显示多个。

十七、浮动

作用：让块元素水平排列。

属性名：float

属性值

left：左对齐
right：右对齐

特点：

浮动后的盒子顶对齐
浮动后的盒子具备行内块特点
浮动后的盒子脱标，不占用标准流的位置

示例：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
       /* 特点：顶对齐：具备行内块显示模式特点；浮动的盒子会脱标 */
       .one {
           width: 100px;
           height: 100px;
           background-color: brown;
           float: left;
       }
       .two {
           width: 200px;
           height: 200px;
           background-color: orange;
           /* float: left; */
           float: right;
       }
   </style>
</head>
<body>
   <div class="one">one</div>
   <div class="two">two</div>
</body>
</html>

效果：
在这里插入图片描述

总结：

浮动后的盒子的特点是：
顶对齐
具备行内块特点
脱标

1、浮动 - 产品区域布局

示例：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
        * {
            margin: 0;
            padding: 0;
        }
        li {
            list-style: none;
        }
        .product {
            margin: 50px auto;
            width: 1226px;
            height: 628px;
            background-color: pink;
        }
        .left {
            float: left;
            width: 234px;
            height: 628px;
            background-color: blue;
        }
        .right {
            float: right;
            width: 978px;
            height: 628px;
            background-color: brown;
        }
        .right li {
            float: left;
            margin-right: 14px;
            margin-bottom: 14px;
            width: 234px;
            height: 300px;
            background-color: orange;
        }
        /* 第四个li和第八个li 去掉右侧的margin */
        .right li:nth-child(4n) {
            margin-right: 0;
        }
        /* 细节：如果父级的宽度不够，浮动的盒子会掉下来 */
    </style>
</head>
<body>
    <!-- 版心：左右，右面：8个产品 → 8个 li -->
    <div class="product">
        <div class="left"></div>
        <div class="right">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>
</body>
</html>

效果：
在这里插入图片描述

2、清除浮动

场景：浮动元素会脱标，如果父级没有高度，子级无法撑开父级高度（可能导致页面布局错乱）

解决方法：清除浮动（清除浮动带来的影响）

影响效果：

方法一：额外标签法

在父元素内容的最后添加一个块级元素，设置 CSS 属性 clear: both

示例：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
       .top {
           margin: 10px auto;
           width: 1200px;
           /* height: 300px; */
           background-color: pink;
       }
       .left {
           float: left;
           width: 200px;
           height: 300px;
           background-color: skyblue;
       }
       .right {
           float: right;
           width: 950px;
           height: 300px;
           background-color: orange;
       }
       .bottom {
           height: 100px;
           background-color: brown;   
       }
       .clearfix {
           clear: both;
       }
   </style>
</head>
<body>
   <div class="top">
       <div class="left"></div>
       <div class="right"></div>
       <div class="clearfix"></div>
   </div>
   <div class="bottom"></div>
</body>
</html>

效果：
在这里插入图片描述

方法二：单伪元素法

.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

示例：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
       .top {
           margin: 10px auto;
           width: 1200px;
           /* height: 300px; */
           background-color: pink;
       }
       .left {
           float: left;
           width: 200px;
           height: 300px;
           background-color: skyblue;
       }
       .right {
           float: right;
           width: 950px;
           height: 300px;
           background-color: orange;
       }
       .bottom {
           height: 100px;
           background-color: brown;   
       }
       /* 单伪元素法 */
       .clearfix::after {
           content: "";
           display: block;
           clear: both;
       }
   </style>
</head>
<body>
   <div class="top clearfix">
       <div class="left"></div>
       <div class="right"></div>
   </div>
   <div class="bottom"></div>
</body>
</html>

效果：
同上😁

方法三：双伪元素法

.clearfix::before,
.clearfix::after {
    content: "";
    display: table;
}
.clearfix::after {
    clear: both;
}

示例：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
       .top {
           margin: 10px auto;
           width: 1200px;
           /* height: 300px; */
           background-color: pink;
       }
       .left {
           float: left;
           width: 200px;
           height: 300px;
           background-color: skyblue;
       }
       .right {
           float: right;
           width: 950px;
           height: 300px;
           background-color: orange;
       }
       .bottom {
           height: 100px;
           background-color: brown;   
       }
       /* before 解决外边距塌陷问题 */
           /* 双伪元素法 */
       .clearfix::before,
       .clearfix::after {
           content: "";
           display: table;
       }
       /* after 清除浮动 */
       .clearfix::after {
           clear: both;
       }
   </style>
</head>
<body>
   <div class="top clearfix">
       <div class="left"></div>
       <div class="right"></div>
   </div>
   <div class="bottom"></div>
</body>
</html>

效果：
同上😁

方法四：overflow

父元素添加 CSS 属性 overflow: hidden

示例：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
       .top {
           margin: 10px auto;
           width: 1200px;
           /* height: 300px; */
           background-color: pink;
           overflow: hidden;
       }
       .left {
           float: left;
           width: 200px;
           height: 300px;
           background-color: skyblue;
       }
       .right {
           float: right;
           width: 950px;
           height: 300px;
           background-color: orange;
       }
       .bottom {
           height: 100px;
           background-color: brown;   
       }
   </style>
</head>
<body>
   <div class="top">
       <div class="left"></div>
       <div class="right"></div>
   </div>
   <div class="bottom"></div>
</body>
</html>

效果：
同上😁

3、总结

浮动属性 float，left 表示左浮动，right右浮动
特点：
浮动后的盒子顶对齐
浮动后的盒子具备行内块特点
父级宽度不够，浮动的子级会换行
浮动后的盒子脱标

清除浮动：子级浮动，父级没有高度，子级无法撑开父级高度，影响布局效果
双伪元素法

拓展：浮动的本质是实现图文混排效果

十七、Flex 布局

1、认识

Flex 布局也叫弹性布局，是浏览器提倡的布局模型，非常适合结构化布局，提供了强大的空间分布和对齐能力。

Flex 模型不会产生浮动布局中脱标现象，布局网页更简单、更灵活。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
       .box {
           display: flex;
           justify-content: space-between;
           /* height: 300px; */
           border: 1px solid #000;
       }
       .box div {
           /* float: left;
           margin: 50px; */
           width: 200px;
           height: 100px;
           background-color: pink;
       }
   </style>
</head>
<body>
   <div class="box">
       <div>1</div>
       <div>2</div>
       <div>3</div>
   </div>
</body>
</html>

效果：
在这里插入图片描述

2、组成

设置方式：给父元素设置 display: flex，子元素可以自动挤压或拉伸

组成部分：

弹性容器
弹性盒子
主轴：默认在水平方向
侧轴 / 交叉轴：默认在垂直方向

示例：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
       /* 弹性容器 */
       .box {
           display: flex;
           height: 300px;
           border: 1px solid #000;
       }
       /* 弹性盒子：沿着主轴方向排列 */
       .box div {
           width: 200px;
           /* height: 100px; */
           background-color: pink;
       }
   </style>
</head>
<body>
   <div class="box">
       <div>1</div>
       <div>2</div>
       <div>3</div>
       <div>1</div>
       <div>2</div>
       <div>3</div>
       <div>1</div>
       <div>2</div>
       <div>3</div>
   </div>
</body>
</html>

效果：
在这里插入图片描述

3、布局

描述属性
创建 flex 容器 display: flex
主轴对齐方式 justify-content
侧轴对齐方式 align-items
某个弹性盒子侧轴对齐方式 align-self
修改主轴方向 flex-direction
弹性伸缩比 flex
弹性盒子换行 flex-wrap
行对齐方式 align-content

描述	属性
创建 flex 容器	display: flex
主轴对齐方式	justify-content
侧轴对齐方式	align-items
某个弹性盒子侧轴对齐方式	align-self
修改主轴方向	flex-direction
弹性伸缩比	flex
弹性盒子换行	flex-wrap
行对齐方式	align-content

4、主轴对齐方式

属性名：justify-content

属性值 效果
flex-start 默认值，弹性盒子从起点开始依次排列
flex-end 弹性盒子从终点开始依次排列
center 弹性盒子沿主轴居中排列
space-between 弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子之间
space-around 弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧
space-evenly 弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等

属性值	效果
flex-start	默认值，弹性盒子从起点开始依次排列
flex-end	弹性盒子从终点开始依次排列
center	弹性盒子沿主轴居中排列
space-between	弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子之间
space-around	弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧
space-evenly	弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等

示例：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
       .box {
           display: flex;
           /* justify-content: flex-start; */
           /* justify-content: flex-end; */
               /* 居中 */
           /* justify-content: center; */
               /* 父级剩余的尺寸分配成间距 */
               /* 弹性盒子之间的间距相等 */
           /* justify-content: space-between; */
               /* 间距出现在弹性盒子的两侧 */
               /* 视觉效果：弹性盒子之间的间距是两端间距的两倍 */
           /* justify-content: space-around; */
               /* 各个间距都相等 */
           justify-content: space-evenly;
           height: 300px;
           border: 1px solid #000;
       }+   
       .box div {
           width: 200px;
           height: 100px;
           background-color: pink;
       }
   </style>
</head>
<body>
   <div class="box">
       <div>1</div>
       <div>2</div>
       <div>3</div>
   </div>
</body>
</html>

效果：
在这里插入图片描述

5、侧轴对齐方式

属性名：

align-items：当前弹性容器内所有弹性盒子的侧轴对齐方式（给弹性容器设置）
align-self：单独控制某个弹性盒子的侧轴对齐方式（给弹性盒子设置）

属性值 效果
stretch 弹性盒子沿着侧轴线被拉伸至铺满容器（弹性盒子没有设置侧轴方向尺寸则默认拉伸）
center 弹性盒子沿侧轴居中排列
flex-start 弹性盒子从起点开始依次排列
flex-end 弹性盒子从终点开始依次排列

属性值	效果
stretch	弹性盒子沿着侧轴线被拉伸至铺满容器（弹性盒子没有设置侧轴方向尺寸则默认拉伸）
center	弹性盒子沿侧轴居中排列
flex-start	弹性盒子从起点开始依次排列
flex-end	弹性盒子从终点开始依次排列

示例：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
       .box {
           display: flex;
           /* 弹性盒子在侧轴方向没有尺寸才能拉伸 */
           /* align-items: stretch; */
           /* align-items: center; */
           /* align-items: flex-start; */
           align-items: flex-end;
           height: 300px;
           border: 1px solid #000;
       }
       /* 第二个div，侧轴居中对齐 */
       .box div:nth-child(2) {
           align-self: center;
       }
       .box div {
           width: 200px;
           height: 100px;
           background-color: pink;
       }
   </style>
</head>
<body>
   <div class="box">
       <div>1</div>
       <div>2</div>
       <div>3</div>
   </div>
</body>
</html>

效果：
在这里插入图片描述

6、修改主轴方向

主轴默认在水平方向，侧轴默认在垂直方向

属性名：flex-direction

属性值：

属性值 效果
row 水平方向，从左向右（默认）
column 垂直方向，从上向下
row-reverse 水平方向，从右向左
column-reverse 垂直方向，从下向上

属性值	效果
row	水平方向，从左向右（默认）
column	垂直方向，从上向下
row-reverse	水平方向，从右向左
column-reverse	垂直方向，从下向上

示例：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
       .box {
           display: flex;
           /* 修改主轴的方向 垂直方向：侧轴自动变换到水平方向 */
           flex-direction: column;
           /* 主轴在垂直方向，视觉效果：垂直居中 */
           justify-content: center;
           /* 侧轴在水平方向，视觉效果：水平居中 */
           align-items: center;
           width: 150px;
           height: 120px;
           background-color: pink;
       }
       .img {
           width: 32px;
           height: 32px;
       }
   </style>
</head>
<body>
   <div class="box">
       <img src="./image/avicii.jpg" alt="">
       <span>avicii</span>
   </div>
</body>
</html>

效果：
在这里插入图片描述

7、弹性伸缩比

作用：控制弹性盒子的主轴方向的尺寸。

属性名：flex

属性值：整数数字，表示占用父级剩余尺寸的份数。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
       /* 默认情况下，主轴方向的尺寸是靠内容撑开，侧轴默认拉伸 */
       .box {
           display: flex;
           flex-direction: column;
           height: 300px;
           border: 1px solid #000;
       }
       .box div {
           /* height: 100px; */
           background-color: pink;
       }
       .box div:nth-child(1) {
           width: 200px;
       }
       .box div:nth-child(2) {
           flex: 1;
       }
       .box div:nth-child(3) {
           flex: 2;
       }
   </style>
</head>
<body>
   <div class="box">
       <div>1</div>
       <div>2</div>
       <div>3</div>
   </div>
</body>
</html>

效果：
在这里插入图片描述

8、弹性盒子换行

弹性盒子可以自动挤压或拉伸，默认情况下，所有弹性盒子都在一行显示。

属性名：flex-wrap

属性值：

wrap：换行
nowrap：不换行（默认）

示例：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
       .box {
           display: flex;
           flex-wrap: wrap;
               /* 不换行 */
           /* flex-wrap: nowrap; */
           justify-content: space-between;
           height: 300px;
           border: 1px solid #000;
       }
       .box div {
           width: 200px;
           height: 100px;
           background-color: pink;
       }
   </style>
</head>
<body>
   <div class="box">
       <div>1</div>
       <div>2</div>
       <div>3</div>
       <div>4</div>
       <div>5</div>
       <div>6</div>
       <div>7</div>
       <div>8</div>
       <div>9</div>
       <div>10</div>
       <div>11</div>
       <div>12</div>
   </div>
</body>
</html>

效果：
在这里插入图片描述

9、行对齐方式

属性名：align-content

属性值：

属性值 效果
flex-start 默认值，弹性盒子从起点开始依次排列
flex-end 弹性盒子从终点开始依次排列
center 弹性盒子沿主轴居中排列
space-between 弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子之间
space-around 弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧
space-evenly 弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等

（与 4、主轴对齐方式是一样的属性值写法和用途）

属性值	效果
flex-start	默认值，弹性盒子从起点开始依次排列
flex-end	弹性盒子从终点开始依次排列
center	弹性盒子沿主轴居中排列
space-between	弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子之间
space-around	弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧
space-evenly	弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
                /* 调整 行对齐方式：对单行弹性盒子不生效 */
            /* align-content: flex-start; */
            /* align-content: flex-end; */
            /* align-content: center; */
            /* align-content: space-between; */
            /* align-content: space-around; */
                /* 没有代码提示 */
            align-content: space-evenly;
            height: 400px;
            border: 1px solid #000;
        }
        .box div {
            width: 200px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
    </div>
</body>
</html>