Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 1026作业： 1. 实例演示BFC的三个作用 2. flex容器常用的四个属性, 并实例演示
Blogger Information
Blog 7
fans 0
comment 1
visits 4250
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
1026作业： 1. 实例演示BFC的三个作用 2. flex容器常用的四个属性, 并实例演示
Vic
Original
529 people have browsed it

实例演示BFC的三个作用

BFC作用1-代码如下：

  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>Document</title>
  8.     <style>
  9.         * {
  10.             box-sizing: border-box;
  12.         }
  14.         /* box1 加BFC的情况下，可以包裹住float，使得.box1-box被.box1的实线框给包裹住 */
  15.     .box1 {
  16.       border: 3px solid;
  17.         border-color: blue;
  18.         overflow: hidden;
  19.     }
  20. .box1-box{
  21. width: 8em;
  22. height: 7em;
  23. background-color: red;
  24. border: 2px solid rgb(14, 6, 13);
  25. float: right;
  26. }
  29.     </style>
  30. </head>
  31. <body>
  33.     <div class="box1">
  34.     <div class="box1-box"></div>
  35.     </div>
  38. </body>
  39. </html>

BFC作用1-效果如下：

BFC作用2-代码如下:

  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>Document</title>
  7.     <style>
  8.         .world{
  9.            box-sizing: border-box;
  10.            border: 2px solid;
  12.         }
  14. .box{
  15.  overflow: auto;
  16. }
  17. /* BFC在垂直方向上外边距不产生折叠。例如下面.box2-1下边距为5em，.box2-2上边距为5em,则.box2-1与.box2-2实际距离为：10em */
  18.         .box2-1{
  19.             width: 10em;
  20.             height: 5em;
  21.             background-color: blue;
  22.             margin-bottom: 5em;
  24.         }
  26.          .box2-2{
  27.              width: 10em;
  28.             height: 5em;
  29.             background-color: blue;
  30.             margin-top: 5em;
  32.         }
  33.     </style>
  35. </head>
  36. <body>
  37.     <div class="world">
  38.     <div class="box">
  39. <div class="box2-1"></div>
  40.     </div>
  42. <div class="box2-2"></div>
  43. </div>
  44. </body>
  45. </html>

BFC作用2-效果如下：

BFC作用3-代码如下：

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

BFC作用3-效果如下：

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>Document</title>
  7.     <style>
  8.         *{
  9.             box-sizing: border-box;
  10.         }
  11.         .box{
  12.             width: 40em;
  13.             height: 20em;
  14.             border: 2px solid;
  15.             display: flex;
  19.                    /* 常用属性1。flex-flow主轴方向与换行方式 */
  20.                  flex-flow: row wrap;
  22.                        /* 常用属性2.justify-content项目在主轴上两侧空间平均分配  */
  23.                 justify-content:space-around;
  25.                    /* 常用属性3.align-items项目在交叉轴上居中 */
  26.                 align-items: center;
  27.         }
  29.         .box > .box1{
  30.             width: 8em;
  31.             height: 3em;
  32.             border: 1px solid;
  33.         }
  36.    .box2 {
  37.                   width: 40em;
  38.             height: 20em;
  39.             border: 2px solid;
  40.             display: flex;
  42.                 /* 主轴方向与换行方式 */
  43.                  flex-flow: row wrap;
  45.                  /* 常用属性4.align-content项目在多行容器中的对齐方式 */
  46.                 align-content: center;
  47.             }
  49.    .box2 > .box2-1{
  50.             width: 8em;
  51.             height: 3em;
  52.             border: 1px solid;
  55.     </style>
  56. </head>
  57. <body>
  58.    <div class="box">
  59. <div class="box1">box1</div>
  60. <div class="box1">box2</div>
  61. <div class="box1">box3</div>
  62. <div class="box1">box4</div>
  63. <div class="box1">box5</div>
  64. <div class="box1">box6</div>
  65. <div class="box1">box7</div>
  66. <div class="box1">box8</div>
  67. <div class="box1">box9</div>
  68. <div class="box1">box10</div>
  69.   </div>
  71. <hr></hr>
  73.   <div class="box2">
  75.      <div class="box2-1">box11</div>
  76.      <div class="box2-1">box12</div>
  77.      <div class="box2-1">box13</div>
  78.      <div class="box2-1">box14</div>
  79.      <div class="box2-1">box15</div>
  80.      <div class="box2-1">box16</div>
  81.      <div class="box2-1">box17</div>
  82.      <div class="box2-1">box18</div>
  83.      <div class="box2-1">box19</div>
  84.      <div class="box2-1">box20</div>
  86.   </div>
  87. </body>
  88. </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