Community Learn Tools Library Leisure
search
English
Home > List of blog posts > BFC的作用以及flex布局的容器属性
Blogger Information
Blog 13
fans 0
comment 0
visits 10412
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
BFC的作用以及flex布局的容器属性
微光
Original
894 people have browsed it

1、 BFC

问：什么是BFC？
答：BFC(Block formatting context)，中文叫“块级格式化上下文”。它在html页面中有自己独立的“王国”，它可以管理自己内部的所有元素。

下面介绍一下它的几个主要作用：

1、它可以清除浮动。通过在父级元素中设置overflow属性，达到清除浮动目的。

  1.   <head>
  2.     <style>
  3.       .continer {
  4.         border: 3px solid red;
  5.         /* 创建BFC */
  6.         overflow: hidden;
  7.       }
  8.       .box1 {
  9.         width: 10em;
  10.         height: 10em;
  11.         background-color: royalblue;
  12.         /* 使内容浮动 */
  13.         float: left;
  14.       }
  15.     </style>
  16.   </head>
  17.   <body>
  18.     <div class="continer">
  19.       <div class="box1"></div>
  20.     </div>
  21.   </body>

效果图：

2、 不会使垂直的两个元素外边距重叠

  1.  <style>
  2.       .continer {
  3.         border: 3px solid red;
  4.         /* 创建BFC */
  5.         overflow: hidden;
  6.       }
  7.       .box1,
  8.       .box2 {
  9.         width: 10em;
  10.         height: 10em;
  11.         background-color: royalblue;
  12.         border: 1px solid;
  13.       }
  14.       .box1 {
  15.         margin-bottom: 2em;
  16.       }
  17.       .box2 {
  18.         margin-top: 2em;
  19.       }
  20.     </style>
  21.   </head>
  22.   <body>
  23.     <div class="continer">
  24.       <div class="box1"></div>
  25.       <div class="box2"></div>
  26.     </div>
  27.   </body>

效果图：


3、BFC块不会与外部的浮动元素重叠

  1.   <head>
  2.     <style>
  3.       .continer {
  4.         border: 3px solid red;
  5.       }
  6.       .box1 {
  7.         float: left;
  8.       }
  9.       .box2 {
  10.         overflow: auto;
  11.       }
  12.     </style>
  13.   </head>
  14.   <body>
  15.     <div class="continer">
  16.       <div class="box1">
  17.         <img  src="https://img.php.cn/upload/course/000/000/001/5f59db624c2e2735.png"
  18.         />
  19.       </div>
  20.       <div class="box2">
  21.         <span
  22.           >php中文网第十三期前端开发部分学习目标：1、HTML5+CSS3基础知识与实战；
  23.           2、完成网站所有静态页面布局；重点：弹性布局与网格布局；3.JavaScript、jQuery、ES6基础与实战
  24.           ；4.LayUI基础与实战；5.Vue.js基础与实战php中文网第十三期前端开发部分学习目标：1、HTML5+CSS3基础知识与实战；
  25.           2、完成网站所有静态页面布局；重点：弹性布局与网格布局；3.JavaScript、jQuery、ES6基础与实战
  26.           ；4.LayUI基础与实战；5.Vue.js基础与实战
  27.         </span>
  28.       </div>
  29.     </div>
  30.   </body>

效果图：

2、flex布局的容器属性

2.1 在css中有一种布局方式叫做flex布局，在其中有4个基本常识要知道，分别是：容器、项目、主轴与交叉轴。

如图：

2.2 容器的4个基本属性
  • flex-flow：用于设置主轴方向以及项目的换行方式。它有4个属性值：row水平方向、column垂直方向、wrap换行、nowrap不换行。
  • justify-content：将项目当作一个整体在主轴的对齐方式。它有6个属性值：start起始位置、end结束位置、center中间位置、space-between两端对齐、space-around分散对齐、space-evenly分均对齐。
  • align-itmes：将项目当作一个整体在交叉轴的对齐方式。他有3个属性值：tart起始位置、end结束位置、center中间位置。这里要注意的是默认单行容器中，垂直方向是没有剩余空间的。
  • align-content：多行容器项目在交叉轴的对齐方式。它有6个属性值：start起始位置、end结束位置、center中间位置、space-between两端对齐、space-around分散对齐、space-evenly分均对齐。

    下面做一个水平方向，多行排列，水平两端对齐，垂直分均对齐的案例：

    1. <style>
    2.   * {
    3.     margin: 0;
    4.     padding: 0;
    5.     box-sizing: border-box;
    6.   }
    7.   .continer {
    8.     display: flex;
    9.     flex-flow: row wrap;
    10.     justify-content: space-between;
    11.     align-content: space-evenly;
    12.     height: 20em;
    13.     border: 2px dashed;
    14.     margin: 1em;
    15.     padding: 1em;
    16.   }
    17.   .itmes {
    18.     border: 1px solid;
    19.     background-color: #cccccc;
    20.     width: 5em;
    21.   }
    22. </style>

效果图：

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：其实grid比flex还要简单一些, 是不是
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