1026作业： 1. 实例演示BFC的三个作用 2. flex容器常用的四个属性, 并实例演示 -

实例演示BFC的三个作用

BFC作用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>
        * {
            box-sizing: border-box;
        }
        /* box1 加BFC的情况下，可以包裹住float，使得.box1-box被.box1的实线框给包裹住 */
    .box1 {
      border: 3px solid;
        border-color: blue;
        overflow: hidden;
    }
.box1-box{
width: 8em;
height: 7em;
background-color: red;
border: 2px solid rgb(14, 6, 13);
float: right;
}
    </style>
</head>
<body>
    <div class="box1">
    <div class="box1-box"></div>
    </div>
</body>
</html>

BFC作用1-效果如下：

BFC作用2-代码如下:

<!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>
        .world{
           box-sizing: border-box;
           border: 2px solid;
        }
.box{
 overflow: auto;
}
/* BFC在垂直方向上外边距不产生折叠。例如下面.box2-1下边距为5em，.box2-2上边距为5em,则.box2-1与.box2-2实际距离为：10em */
        .box2-1{
            width: 10em;
            height: 5em;
            background-color: blue;
            margin-bottom: 5em;
        }
         .box2-2{
             width: 10em;
            height: 5em;
            background-color: blue;
            margin-top: 5em;
        }
    </style>
</head>
<body>
    <div class="world">
    <div class="box">
<div class="box2-1"></div>
    </div>
<div class="box2-2"></div>
</div>
</body>
</html>

BFC作用2-效果如下：

BFC作用3-代码如下：

<!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-sizing: border-box;
    }
    .box{
        border: 2px solid;
    }
    img{
        float: right;
    }
p{
    overflow: hidden;
}
</style>
</head>
<body>
    <div class="box">
        <img src="https://img.php.cn/upload/course/000/000/003/5a699f1b2da2b398.jpg" alt="">
<p>
  今天上午10点，国新办举行新闻发布会，国家统计局发布前三季度国民经济运行情况。
前三季度，全国居民消费价格同比上涨3.3%，涨幅比上半年回落0.5个百分点。
其中，城市上涨3.1%，农村上涨4.1%。9月份，全国居民消费价格同比上涨1.7%，
环比上涨0.2%。分类别看，前三季度食品烟酒价格同比上涨10.9%，衣着下降0.2%，
居住下降0.3%，生活用品及服务上涨0.1%，交通和通信下降3.5%，教育文化和娱乐上涨1.4%，
医疗保健上涨1.9%，其他用品和服务上涨5.0%。在食品烟酒价格中，粮食上涨1.2%，鲜菜上涨6.1%；
猪肉价格上涨82.4%，比上半年回落21.9个百分点。扣除食品和能源价格后的核心CPI上涨0.9%。
（总台央视记者 徐宁宁 都昕竹）  
</p>
    </div>
</body>
</html>

BFC作用3-效果如下：

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-sizing: border-box;
        }
        .box{
            width: 40em;
            height: 20em;
            border: 2px solid;
            display: flex;
                   /* 常用属性1。flex-flow主轴方向与换行方式 */
                 flex-flow: row wrap;
                       /* 常用属性2.justify-content项目在主轴上两侧空间平均分配  */
                justify-content:space-around;
                   /* 常用属性3.align-items项目在交叉轴上居中 */
                align-items: center;
        }
        .box > .box1{
            width: 8em;
            height: 3em;
            border: 1px solid;
        }
   .box2 {
                  width: 40em;
            height: 20em;
            border: 2px solid;
            display: flex;
                /* 主轴方向与换行方式 */
                 flex-flow: row wrap;
                 /* 常用属性4.align-content项目在多行容器中的对齐方式 */
                align-content: center;
            }
   .box2 > .box2-1{
            width: 8em;
            height: 3em;
            border: 1px solid;
    </style>
</head>
<body>
   <div class="box">
<div class="box1">box1</div>
<div class="box1">box2</div>
<div class="box1">box3</div>
<div class="box1">box4</div>
<div class="box1">box5</div>
<div class="box1">box6</div>
<div class="box1">box7</div>
<div class="box1">box8</div>
<div class="box1">box9</div>
<div class="box1">box10</div>
  </div>
<hr></hr>
  <div class="box2">
     <div class="box2-1">box11</div>
     <div class="box2-1">box12</div>
     <div class="box2-1">box13</div>
     <div class="box2-1">box14</div>
     <div class="box2-1">box15</div>
     <div class="box2-1">box16</div>
     <div class="box2-1">box17</div>
     <div class="box2-1">box18</div>
     <div class="box2-1">box19</div>
     <div class="box2-1">box20</div>
  </div>
</body>
</html>