search

博客列表 ># 1020作业-盒模型和em 2020-10-20

# 1020作业-盒模型和em 2020-10-20

开吉尔软件
开吉尔软件原创
2020年11月03日 00:13:55632浏览

1026作业:

  1. 实例演示BFC的三个作用
  2. 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

老师讲的复习

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>BFC块级元素格式化</title>
  7.         <style>
  8.             * {
  9.                 margin: 0;
  10.                 padding: 0;
  11.                 box-sizing: border-box;
  12.             }
  13.             .container {
  14.                 border: 5px dashed; 
  15.                 border-top-color: red;
  16.                 border-bottom-color: green;
  17.             }
  18.             .container > .box {
  19.                 color:white;
  20.                 width: 10em;
  21.                 height: 5em;
  22.                 background-color: violet;
  23.                 border: 1px solid #000;
  25.             /* 将容器中的子元素进行浮动 */
  26.             /* 子元素浮动会导致父级元素高度消失，也叫“容器高度折叠” */
  28.                 float:left;
  31.             }
  33.             /* 容器折叠解决方案3 ： BFC 是目前最主流的解决方案 */
  34.             /* BFC：是一个HTML页面的独立王国容器，有权接管内部的全部元素，
  35.             包括浮动元素， */
  36.             /* BFC:块级格式化上下文 */
  37.             /* BFC特征：
  38.             1.能够包含“浮动元素”  overflow:auto/hidden/scroll; 不能是visible
  41.             */
  42.             .container {
  43.                 /* overflow:auto; */
  44.                 overflow:hidden;
  45.                 /* overflow:scroll; */
  46.                 /* overflow:visible; */
  47.             }
  49.             /* BFC特征2：不会在垂直方向产生外边距的折叠
  52.              */
  53.             .box.box1 {
  54.                 float: none;;
  55.                 margin-bottom: 1em;
  57.             }
  58.             .box.box2 {
  59.                 float:none;
  60.                 margin-top: 2em;
  62.             }
  63.             /* BFC特征3：BFC不会与外部的元素重叠 */
  64.             .container img {
  65.             width: 30em;
  66.             float:left;
  67.             }
  68.             .container p {
  69.                 overflow:hidden;
  70.             }
  73.             /* 创建BFC的属性：(自定义格式的方式 )
  74.             1.overflow:auto/hidden/scroll 不能是visible
  75.             2.display:flex ,display:grid
  76.             3.position:absolute/fixed;
  77.             4.float: left/right,不能是none
  78.             */
  79.         </style>
  80. </head>
  81. <body>
  82.     <div class="container">
  83.         <div class="box"></div>
  84.     </div>
  85.         <hr>
  86.     <div class="container">
  87.         <div class="box box1">1</div>
  88.         <div class="box box2">2</div>
  89.         <!-- 附加元素，专用于清除浮动 -->
  90.         <!-- <div class="clear"></div> -->
  91.     </div>
  92.     <hr>
  93. <div class="container">
  94.     <img src="http://24812305.s21i.faiusr.com/2/ABUIABACGAAgjZ7v_AUo8LHewwcwwAc47gU.jpg" alt="">
  95.     <p>
  96.         买软件 找【开吉尔】 公司电话：0791-88208778
  98.         【开吉尔公司】为企业，政府，教育等行业提供IT产品和服务。
  100.         主营：软件销售，服务，定制软件，网站开发，微信开发，办公设备及耗材。
  101.         买软件 找【开吉尔】 公司电话：0791-88208778
  103.         【开吉尔公司】为企业，政府，教育等行业提供IT产品和服务。
  105.         主营：软件销售，服务，定制软件，网站开发，微信开发，办公设备及耗材。        买软件 找【开吉尔】 公司电话：0791-88208778
  107.         【开吉尔公司】为企业，政府，教育等行业提供IT产品和服务。
  109.         主营：软件销售，服务，定制软件，网站开发，微信开发，办公设备及耗材。        买软件 找【开吉尔】 公司电话：0791-88208778
  111.         【开吉尔公司】为企业，政府，教育等行业提供IT产品和服务。
  113.         主营：软件销售，服务，定制软件，网站开发，微信开发，办公设备及耗材。
  114.         买软件 找【开吉尔】 公司电话：0791-88208778
  116.         【开吉尔公司】为企业，政府，教育等行业提供IT产品和服务。
  118.         主营：软件销售，服务，定制软件，网站开发，微信开发，办公设备及耗材。
  119.         买软件 找【开吉尔】 公司电话：0791-88208778
  121.         【开吉尔公司】为企业，政府，教育等行业提供IT产品和服务。
  123.         主营：软件销售，服务，定制软件，网站开发，微信开发，办公设备及耗材。        买软件 找【开吉尔】 公司电话：0791-88208778
  125.         【开吉尔公司】为企业，政府，教育等行业提供IT产品和服务。
  127.         主营：软件销售，服务，定制软件，网站开发，微信开发，办公设备及耗材。        买软件 找【开吉尔】 公司电话：0791-88208778
  129.         【开吉尔公司】为企业，政府，教育等行业提供IT产品和服务。
  131.         主营：软件销售，服务，定制软件，网站开发，微信开发，办公设备及耗材。
  132.     </p>
  133. </div>
  134. </body>
  135. </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实例演示四个属性

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>flex弹性盒子学习（容器与项目）</title>
  7. </head>
  8. <style>
  9.     * {
  10.         box-sizing: border-box; 
  11.     }
  12.     .container {
  13.         /* 父容器的大小属性 */
  14.         height: 20em;
  15.         border: 1px solid #000;
  16.         margin: 1em;
  17.         padding: 1em;
  18.         /* 容器转成弹性盒子flex布局 */
  19.         display:flex;
  20.         /* 默认对齐排列方式，可不写 */
  21.         flex-flow: row nowrap;
  22.         /* 对齐方式代码写在父容器里面 */
  24.         /* 主轴对齐方式 */
  26.         /* 居中对齐 center */
  27.         justify-content:center;
  28.         /* 起止线对齐 */
  29.         justify-content:flex-start;
  30.         /* 终止线对齐 */
  31.         justify-content:flex-end;
  32.         /* 两端对齐-剩余空间除了2端项目之外平均分配 */
  33.         justify-content:space-between;
  34.         /* 分散对齐-每个项目两边相等空间分配 */
  35.         justify-content:space-around;
  36.         /* 平均对齐：每个项目之间的空间平均分配 */
  37.         justify-content:space-evenly; 
  39.         /* 交叉轴对齐方式 */
  40.         /* 默认对齐方式 */
  41.         align-items:stretch;
  42.         /* 居中对齐 */
  43.         align-items:center;
  44.         /* 起止线对齐 */
  45.         align-items:flex-start;
  46.         /* 终止线对齐 */
  47.         align-items:flex-end;
  49.     }
  51.     .container > .box {
  52.         /* 项目大小属性（子容器） */
  53.         width: 4em;
  54.         border: 1px solid #000;
  55.         text-align: center;
  56.     }
  58.     .container {
  60.         display:flex;
  62.         /* 初始化主轴对齐方式 */
  63.         justify-content:initial;
  64.         /* 初始化交叉轴对齐方式 */
  65.         align-items:initial;
  66.         /* 定义为多行容器，允许换行 */
  67.         flex-flow:row wrap;
  69.          /* align-content:项目在多行容器的对齐方式 */
  71.             /* 起始线对齐 */
  72.             align-content:flex-start;
  73.             /* 终止线对齐 */
  74.             align-content:flex-end;
  75.             /* 拉伸对齐 */
  76.             align-content:stretch;
  77.             /* 两端对齐 */
  78.             align-content:space-between;
  79.             /* 分散对齐 */
  80.             align-content:space-around;
  81.             /* 平均对齐 */
  82.             align-content:space-evenly;
  83.             /* 居中对齐 */
  84.             align-content:center
  87.     }
  88. </style>
  89. <body>
  90.     <div class="container">
  91.         <div class="box">item1</div>
  92.         <div class="box">item2</div>
  93.         <div class="box">item3</div>
  94.         <div class="box">item4</div>
  95.         <div class="box">item5</div>
  96.         <div class="box">item6</div>
  97.         <div class="box">item7</div>
  98.         <div class="box">item8</div>
  99.         <div class="box">item9</div>
  100.         <div class="box">item10</div>
  101.         <div class="box">item11</div>
  102.         <div class="box">item12</div>
  103.     </div>
  104. </body>
  105. </html>
上一条：模态框注册用户下一条：composer安装、项目创建、composer自动加载
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多