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>

Correcting teacher：

天蓬老师

Correction status：qualified

Teacher's comments：图呢,下次放上,全是文字, 其它读者不一定愿意看.. 不是只有你我看

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

PHP作业-HTML-2020-09-28

2020-09-29 00:28:16