Web前端一套全部清晰 ⑨ day5 CSS.4 标准流、浮动、Flex布局

我走我的路，有人拦也走，没人陪也走

------ 24.5.24

一、标准流

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

二、浮动

作用:

让块级元素水平排列。

属性名:float

属性值

left:左对齐

right:右对齐

特点

浮动后的盒子顶对齐

浮动后的盒子具备行内块特点

浮动后的盒子脱标，不占用标准流的位置

三、浮动 ------ 产品布局

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动-产品布局</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: skyblue;
        }

        .right{
            /* 浮动属性 */
            float: right;
            width: 978px;
            height: 628px;
            background-color: darkred;
        }

        .right li{
            /* 浮动属性 */
            float: left;
            margin-right: 14px;
            margin-bottom: 14px;
            width: 234px;
            height: 300px;
            background-color: orange;
        }

        /* 每一行最右边的li清除浮动 */
            .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>

浮动------总结

浮动属性 float，left 表示左浮动，right 表示右浮动

特点

浮动后的盒子顶对齐

浮动后的盒子具备行内块特点

父级宽度不够，浮动的子级会换行

浮动后的盒子会脱标

清除浮动:

子级浮动，父级没有高度，子级无法撑开父级高度，影响布局效果

① 双伪元素法

拓展:浮动本质作用是实现图文混排效果

四、Flex布局

Flex-认识

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

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

Flex-组成

设置方式:

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

组成部分：

弹性容器

弹性盒子

主轴:默认在水平方向

侧轴/交叉轴:默认在垂直方向

示例：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex布局-组成</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>4</div>
        <div>5</div>
        <div>6</div>
    </div>
</body>
</html>

主轴对齐方式 justify-content

属性名

justify-content

后四个常用前两个不常用

示例

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex布局 主轴对齐方式</title>
    <style>
        .box{
            display: flex;
            /* 主轴对齐方式 不常用 */
            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>

侧轴对齐方式 align-items

属性名

align-items：当前弹性容器内所有弹性盒子的侧轴对齐方式(给弹性容器设置)

align-self:单独控制某个弹性盒子的侧轴对齐方式(给弹性盒子设置)

前两个常用，后两个不常用

修改主轴方向flex-direction

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

属性名

flex-direction

属性值

示例

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex布局-修改主轴方向</title>
    <style>
        .box{
            /* flex标签 */
            display: flex;

            /* 修改主轴方向 主轴方向变换垂直方向，侧轴自动变换 */
            flex-direction: column;

            /* 主轴在垂直方向，视觉效果：垂直居中 */
            justify-content: center;

            /* align-items：当前弹性容器内所有弹性盒子的侧轴对齐方式 */
            /* 侧轴在水平方向，视觉效果：水平居中 */
            align-items: center;

            width: 150px;
            height: 120px;
            background-color: pink;
        }

        img{
            width: 32px;
            height: 32px;
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="#" alt="">
        <span>媒体</span>
    </div>
</body>
</html>

弹性伸缩比 flex

作用:

控制弹性盒子的主轴方向的尺寸,水平方向控制宽度，竖直方向控制高度

属性名:

属性值:

整数数字，表示占用父级剩余尺寸的份数

示例

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex布局-弹性伸缩比</title>
    <style>
        /* 在默认情况下，主轴（水平）方向上的尺寸靠内容撑开，侧轴（垂直方向）默认拉伸效果 */
        /* 父集 */
        .box{
            display: flex;
            /* flex-direction，修改主轴方向，主轴在哪个方向，控制就是哪个方向 */
            /* 修改主轴方向为竖直方向 */
            flex-direction: column;

            /* 高度 */
            height: 300px;
            /* 描边 */
            border: 1px solid #000;
        }

        /* 第一个子集 */
        .box div{
            /* 高度 */
            height: 100px;
            /* 背景色 */
            background-color: pink;
        }

        /* 结构伪类选择器 nth-child */
        .box div:nth-child(1){
            /* 宽度 */
            width: 200px;
        }

        /* 占父级剩余空间份数中的几份 */
        .box div:nth-child(2){
            flex:1
        }

        /* 占父级剩余空间份数中的几份 */
        .box div:nth-child(3){
            flex: 3;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
</html>

主轴在水平方向，控制盒子的宽，主轴在竖直方向，控制盒子的高

弹性盒子换行 flex-wrap

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

属性名：flex-wrap

属性值

wrap：换行

nowrap：不换行(默认)

示例：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex布局-弹性换行</title>
    <style>
        .box{
            /* 将盒子变成flex布局模型,弹性盒子自动挤压或压伸 */
            display: flex;

            /* 弹性换行属性 */
            flex-wrap: wrap; /* 允许弹性盒子自动换行 */

            /* 不换行
                flex-wrap: nowrap;  不允许弹性盒子自动换行 */
        
            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>
</body>
</html>

行对齐方式 align-content

属性名：align-content

属性值

和主轴对齐方式justify-content的属性值一样

示例

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>flex布局-行对齐方式</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-around; /* 行对齐方式为平均分布 */
            align-content: space-between; /* 行对齐方式为两端对齐 */

            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>

五、综合案例 - 抖音解决方案

标签结构

div ------> ul ------> li*4

ul样式

1.flex 布局

2.弹性换行 flex-wrap:wrap

3.主轴对齐方式:space-between

4.行对齐方式:space-between

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>抖音解决方案</title>
    <style>
        /* 全局属性 */
        *{
            /* 清除默认属性 */
            margin: 0;
            padding: 0;
            /* 盒子内减属性 */
            box-sizing: border-box;
        }

        li{
            /* 清除默认属性 */
            list-style: none;
        }

        /* 盒子的属性 */
        .box{
            /* 移动盒子位置 */
            /* 设置距离顶部的长度 */
            margin:81px auto;
            /* 设置宽度 */
            width: 1200px;
            /* 设置高度 */
            height: 418px;
            /* 设置边框 */
            border: 1px solid #e1e0e3;
           
            /* 圆角效果 */
            border-radius: 10px;
        }

        /* 列表布局区域 */
        .box ul{
            /* 设置flex弹性布局属性 */
            display: flex;
            /* 弹性盒子换行 */
            flex-wrap: wrap;
            /* 设置主轴对齐方式 */
            justify-content: space-between;
            /* 设置行对齐方式 实现两行之间有区域间隔 */
            align-content: space-between;
            /* 设置位置 */
            padding: 91px 41px 90px 59px;
            /* 设置高度 */
            height: 418px;
        }

        /* 列表项 */
        .box li{
            /* flex弹性布局属性 */
            display: flex;
            /* 设置宽度 */
            width: 500px;
            height: 88px;
            /* background-color: pink; */
        }

        /* 列表项图片 */
        .box pic{
            /* 设置字图距离 */
            margin-right: 16px;
        }

        /* 列表项文字 */
        .box .text h4{
            /* 设置行高 */
            line-height: 41px;
            /* 设置字体大小 */
            font-size: 20px;
            /* 设置字体颜色 */
            color: #363636;
        }

        .box .text p{
            /* 设置字体大小 */
            font-size: 13px;
            color:#7b7b7b
    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li>
                <div class="pic">
                    <img src="./images/1.svg" alt="">
                </div>
                <div class="text">
                    <h4>一键发布多端</h4>
                    <p>发布视频到抖音短视频、西瓜视频及今日头条</p> 
                </div>   
            </li>         
            <li>
                <div class="pic">
                    <img src="./images/2.svg" alt="">
                </div>
                <div class="text">
                    <h4>发布携带组件</h4>
                    <p>支持分享内容携带小程序、地理位置信息等组件，扩展内容及突出地域性</p> 
                </div>   
            </li>            
            <li>
                <div class="pic">
                    <img src="./images/3.svg" alt="">
                </div>
                <div class="text">
                    <h4>一键发布多端</h4>
                    <p>支持修改已发布稿件状态和实时查询视频审核状态</p> 
                </div>   
            </li>
            <li>
                <div class="pic">
                    <img src="./images/4.svg" alt="">
                </div>
                <div class="text">
                    <h4>数据评估分析</h4>
                    <p>获取视频在对应产品内的数据表现、获取抖音热点，及时进行表
现评估</p> 
                </div>   
            </li>
        </ul>
    </div>
</body>
</html>