1026作业:

实例演示BFC的三个作用
flex容器常用的四个属性, 并实例演示
可以参考课堂代码, 但建议有所改变
如果要抄课堂代码, 就必须在本地写三遍以上
作业只需要提交关键代码就可以了, 一定要配图

1. 实例演示BFC的三个作用

(1)BFC:是一个html页面的独立王国，块级格式化上下文

(2)BFC的三个作用

a.能包含浮动元素
b.不会在垂直方向产生外边距的折叠
c.不会与外部元素重叠

(3)BFC的属性（自定义显示与定位元素）

a. overflow:hiden/auto/scroll ,不是visible
b. display:flex 和display:grid
c. position:absolute /fixed
d. float:left/right 不是none

老师讲的复习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BFC块级元素格式化</title>
        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            .container {
                border: 5px dashed; 
                border-top-color: red;
                border-bottom-color: green;
            }
            .container > .box {
                color:white;
                width: 10em;
                height: 5em;
                background-color: violet;
                border: 1px solid #000;
            /* 将容器中的子元素进行浮动 */
            /* 子元素浮动会导致父级元素高度消失，也叫“容器高度折叠” */
                float:left;
            }
            /* 容器折叠解决方案3 ： BFC 是目前最主流的解决方案 */
            /* BFC：是一个HTML页面的独立王国容器，有权接管内部的全部元素，
            包括浮动元素， */
            /* BFC:块级格式化上下文 */
            /* BFC特征：
            1.能够包含“浮动元素”  overflow:auto/hidden/scroll; 不能是visible
            */
            .container {
                /* overflow:auto; */
                overflow:hidden;
                /* overflow:scroll; */
                /* overflow:visible; */
            }
            /* BFC特征2：不会在垂直方向产生外边距的折叠
             */
            .box.box1 {
                float: none;;
                margin-bottom: 1em;
            }
            .box.box2 {
                float:none;
                margin-top: 2em;
            }
            /* BFC特征3：BFC不会与外部的元素重叠 */
            .container img {
            width: 30em;
            float:left;
            }
            .container p {
                overflow:hidden;
            }
            /* 创建BFC的属性：(自定义格式的方式 )
            1.overflow:auto/hidden/scroll 不能是visible
            2.display:flex ,display:grid
            3.position:absolute/fixed;
            4.float: left/right,不能是none
            */
        </style>
</head>
<body>
    <div class="container">
        <div class="box"></div>
    </div>
        <hr>
    <div class="container">
        <div class="box box1">1</div>
        <div class="box box2">2</div>
        <!-- 附加元素，专用于清除浮动 -->
        <!-- <div class="clear"></div> -->
    </div>
    <hr>
<div class="container">
    <img src="http://24812305.s21i.faiusr.com/2/ABUIABACGAAgjZ7v_AUo8LHewwcwwAc47gU.jpg" alt="">
    <p>
        买软件 找【开吉尔】 公司电话：0791-88208778
        【开吉尔公司】为企业，政府，教育等行业提供IT产品和服务。
        主营：软件销售，服务，定制软件，网站开发，微信开发，办公设备及耗材。
        买软件 找【开吉尔】 公司电话：0791-88208778
        【开吉尔公司】为企业，政府，教育等行业提供IT产品和服务。
        主营：软件销售，服务，定制软件，网站开发，微信开发，办公设备及耗材。        买软件 找【开吉尔】 公司电话：0791-88208778
        【开吉尔公司】为企业，政府，教育等行业提供IT产品和服务。
        主营：软件销售，服务，定制软件，网站开发，微信开发，办公设备及耗材。        买软件 找【开吉尔】 公司电话：0791-88208778
        【开吉尔公司】为企业，政府，教育等行业提供IT产品和服务。
        主营：软件销售，服务，定制软件，网站开发，微信开发，办公设备及耗材。
        买软件 找【开吉尔】 公司电话：0791-88208778
        【开吉尔公司】为企业，政府，教育等行业提供IT产品和服务。
        主营：软件销售，服务，定制软件，网站开发，微信开发，办公设备及耗材。
        买软件 找【开吉尔】 公司电话：0791-88208778
        【开吉尔公司】为企业，政府，教育等行业提供IT产品和服务。
        主营：软件销售，服务，定制软件，网站开发，微信开发，办公设备及耗材。        买软件 找【开吉尔】 公司电话：0791-88208778
        【开吉尔公司】为企业，政府，教育等行业提供IT产品和服务。
        主营：软件销售，服务，定制软件，网站开发，微信开发，办公设备及耗材。        买软件 找【开吉尔】 公司电话：0791-88208778
        【开吉尔公司】为企业，政府，教育等行业提供IT产品和服务。
        主营：软件销售，服务，定制软件，网站开发，微信开发，办公设备及耗材。
    </p>
</div>
</body>
</html>

2.flex容器常用的四个属性, 并实例演示

（1）flex容器常用的四个属性

属性1：
flex-flow:设置主轴方式和项目在主轴上的换行方式
flex-flow:row nowrap; (默认方式,按行的方向排列，不换行)
flex-flow:column nowrap;(按交叉轴方向排列，不换行)
flex-flow:row wrap:(按行方向排列，换行)
属性2：justify-content:项目在主轴方式对齐方式
justify-content:flex-start;(起止线对齐）
justify-content:flex-end:(终止线对齐)
justfiy-content:flex-center;(居中对齐)
justify-content:space-between;(两端对齐)
justify-content:space-around;(分散对齐)
justify-content:space-evenly;(平均对齐)

属性3：align-items:项目在交叉轴上的对齐方式
/ 默认对齐方式 /
align-items:stretch;
/ 居中对齐 /
align-items:center;
/ 起止线对齐 /
align-items:flex-start;
/ 终止线对齐 /
align-items:flex-end;

属性4：align-content:项目在多行容器的对齐方式
/ 起始线对齐 /
align-content:flex-start;
/ 终止线对齐 /
align-content:flex-end;
/ 拉伸对齐 /
align-content:stretch;
/ 两端对齐 /
align-content:space-between;
/ 分散对齐 /
align-content:space-around;
/ 平均对齐 /
align-content:space-evenly;
/ 居中对齐 /
align-content:center

（2）flex实例演示四个属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex弹性盒子学习（容器与项目）</title>
</head>
<style>
    * {
        box-sizing: border-box; 
    }
    .container {
        /* 父容器的大小属性 */
        height: 20em;
        border: 1px solid #000;
        margin: 1em;
        padding: 1em;
        /* 容器转成弹性盒子flex布局 */
        display:flex;
        /* 默认对齐排列方式，可不写 */
        flex-flow: row nowrap;
        /* 对齐方式代码写在父容器里面 */
        /* 主轴对齐方式 */
        /* 居中对齐 center */
        justify-content:center;
        /* 起止线对齐 */
        justify-content:flex-start;
        /* 终止线对齐 */
        justify-content:flex-end;
        /* 两端对齐-剩余空间除了2端项目之外平均分配 */
        justify-content:space-between;
        /* 分散对齐-每个项目两边相等空间分配 */
        justify-content:space-around;
        /* 平均对齐：每个项目之间的空间平均分配 */
        justify-content:space-evenly; 
        /* 交叉轴对齐方式 */
        /* 默认对齐方式 */
        align-items:stretch;
        /* 居中对齐 */
        align-items:center;
        /* 起止线对齐 */
        align-items:flex-start;
        /* 终止线对齐 */
        align-items:flex-end;
    }
    .container > .box {
        /* 项目大小属性（子容器） */
        width: 4em;
        border: 1px solid #000;
        text-align: center;
    }
    .container {
        display:flex;
        /* 初始化主轴对齐方式 */
        justify-content:initial;
        /* 初始化交叉轴对齐方式 */
        align-items:initial;
        /* 定义为多行容器，允许换行 */
        flex-flow:row wrap;
         /* align-content:项目在多行容器的对齐方式 */
            /* 起始线对齐 */
            align-content:flex-start;
            /* 终止线对齐 */
            align-content:flex-end;
            /* 拉伸对齐 */
            align-content:stretch;
            /* 两端对齐 */
            align-content:space-between;
            /* 分散对齐 */
            align-content:space-around;
            /* 平均对齐 */
            align-content:space-evenly;
            /* 居中对齐 */
            align-content:center
    }
</style>
<body>
    <div class="container">
        <div class="box">item1</div>
        <div class="box">item2</div>
        <div class="box">item3</div>
        <div class="box">item4</div>
        <div class="box">item5</div>
        <div class="box">item6</div>
        <div class="box">item7</div>
        <div class="box">item8</div>
        <div class="box">item9</div>
        <div class="box">item10</div>
        <div class="box">item11</div>
        <div class="box">item12</div>
    </div>
</body>
</html>