search

博客列表 >BFC的三个作用和flex 容器常用的四个属性

BFC的三个作用和flex 容器常用的四个属性

YwQ
YwQ原创
2020年10月27日 19:32:34679浏览
实例演示 BFC 的三个作用
bfc：使当前元素不受当前文档流约束

实例演示 BFC 的三个作用：1.能够清除浮动

  1. <!DOCTYPE html>
  2. <html lang="">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>实例演示BFC的三个作用：1.能够清除浮动 </title>
  7.     <style>
  8.         * {
  9.             /* margin: 0;
  10.             padding: 0; */
  11.             box-sizing: border-box;
  12.         }
  13.         .content{border: 3px solid #000;}
  14.         .content > .box{width: 20em;height: 5em;background-color: slategrey;float: left;}
  15.         /* 使用浮动会导致父级容器content的高度折叠/消失 */
  17.         /* 解决方案： */
  18.         .content{overflow: hidden;}
  19.         /* 使用这个方法包含住浮动元素，使父级存在高度 */
  21.     </style>
  22. </head>
  23. <body>
  24.     <div class="content">
  25.         <div class="box">
  26.             这是一些内容这是一些内容这是这是一些内容这是
  27.             一些内容这是一些内容这是一些内容一些内容这是一些这是一些内容这是一些内容
  28.         </div>
  29.     </div>
  31. </body>
  32. </html>

实例演示 BFC 的三个作用：2.能够不使垂直方向上的外边距折叠

  1. <!DOCTYPE html>
  2. <html lang="">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>实例演示BFC的三个作用：2.能够不使垂直方向上的外边距折叠 </title>
  7. </head>
  8. <style>
  9.     * {
  10.         /* margin: 0;
  11.         padding: 0; */
  12.         box-sizing: border-box;
  13.     }
  14.     .box-1{width: 30em;height: 10em;background-color: skyblue;margin-bottom: 1em;}
  15.     .box-2{width: 30em;height: 10em;background-color: springgreen;margin-top: 2em;}
  16.     /* 测试显示：box-1中的下外边距和box-2中的上外边距重叠，只显示共计2em的外边距。 */
  17.     .content{overflow: hidden;}
  18.     /* 将父级元素content转为bfc，尝试解决边距重叠问题 */
  19.     /* 结果：失败 */
  20.     .box{overflow: hidden;}
  21.     /* 给box-1外加一个box，将他转为bfc，尝试解决边距重叠问题 */
  22.     /* 结果：成功 */
  23. </style>
  24. <body>
  25.     <div class="content">
  26.         <div class="box">
  27.             <div class="box-1">
  28.                 这是第一部分内容这是第一部分内容
  29.                 这是第一部分内容这是第一部分内容
  30.             </div>
  31.         </div>
  33.         <div class="box-2">
  34.             这是第二部分内容这是第二部分内容
  35.             这是第二部分内容这是第二部分内容
  36.         </div>
  37.     </div>
  39. </body>
  40. </html>

实例演示 BFC 的三个作用：3.不受外部浮动元素的影响

  1. <!DOCTYPE html>
  2. <html lang="">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>实例演示BFC的三个作用：3.不受外部浮动元素的影响 </title>
  7. </head>
  8. <style>
  9.     * {
  10.         /* margin: 0;
  11.         padding: 0; */
  12.         box-sizing: border-box;
  13.     }
  14.     .content{width: 20em;}
  15.     .img{width: 10em;height: 10em;background-color: steelblue;float: left;}
  16.     /* 加个浮动，box中文字围绕img进行排列，实现图文混排的效果 */
  17.     /* bfc的第三个作用就是使后面的元素不受前面浮动的影响 */
  18.     .box{overflow: hidden;}
  19.     /* 使box自成bfc，不受外部的浮动元素影响 */
  20. </style>
  21. <body>
  22.     <div class="content">
  23.         <div class="img">
  24.         </div>
  25.         <div class="box">
  26.             这是文字这是文字这是文字
  27.             这是文字这是文字这是文字
  28.             这是文字这是文字这是文字
  29.             这是文字这是文字这是文字
  30.             这是文字这是文字这是文字
  31.             这是文字这是文字这是文字
  32.             这是文字这是文字这是文字
  33.             这是文字这是文字这是文字
  34.             这是文字这是文字这是文字
  35.             这是文字这是文字这是文字
  36.         </div>
  37.     </div>
  39. </body>
  40. </html>

flex 容器常用的四个属性, 并实例演示，配图。

转为 flex 盒子

  1. <!DOCTYPE html>
  2. <html lang="">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>将盒子转化为flex容器</title>
  7.     <style>
  8.     .content{
  9.         width: 30em;
  10.         height: 20em;
  11.         background-color: tomato;
  12.         /* 转为弹性容器 */
  13.         /* display: flex; */
  14.         /* 弹性容器中的项目顺着主轴方向进行排列（主轴默认是水平方向的） */
  15.         }
  16.     .content > .box{
  17.         background-color: turquoise;
  18.         border: blue 1px solid;
  19.     }
  20.     </style>
  22. </head>
  23. <style>
  24. </style>
  25. <body>
  26.     <div class="content">
  27.         <div class="box">box1</div>
  28.         <div class="box">box2</div>
  29.         <div class="box">box3</div>
  30.         <div class="box">box4</div>
  31.         <div class="box">box5</div>
  32.         <div class="box">box6</div>
  33.         <div class="box">box7</div>
  34.     </div>
  35. </body>
  36. </html>

flex 容器常用的四个属性

1.flex-flow 主轴方向和换行方式

  1. <!DOCTYPE html>
  2. <html lang="">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>flex容器常用的四个属性, 1.flex-flow主轴方向和换行方式</title>
  7.     <style>
  8.       .content {
  9.         width: 30em;
  10.         height: 20em;
  11.         background-color: tomato;
  12.         /* 转为弹性容器 */
  13.         display: flex;
  14.         /* 弹性容器中的项目顺着主轴方向进行排列（主轴默认是水平方向的） */
  15.       }
  16.       .content > .box {
  17.         background-color: turquoise;
  18.         border: blue 1px solid;
  19.         width: 5em;
  20.         height: 5em;
  21.       }
  22.       .content {
  23.         flex-flow: row nowrap;
  24.         /* 默认值：水平方向和不换行 */
  25.         flex-flow: column nowrap;
  26.         /* 垂直方向和不换行 */
  27.         flex-flow: row wrap;
  28.         /* 水平方向和换行 */
  29.         flex-flow: column wrap;
  30.         /* 垂直方向和换行 */
  31.       }
  32.     </style>
  33.   </head>
  34.   <style></style>
  35.   <body>
  36.     <div class="content">
  37.       <div class="box">box1</div>
  38.       <div class="box">box2</div>
  39.       <div class="box">box3</div>
  40.       <div class="box">box4</div>
  41.       <div class="box">box5</div>
  42.       <div class="box">box6</div>
  43.       <div class="box">box7</div>
  44.     </div>
  45.   </body>
  46. </html>

2.项目在主轴上的对齐方式

  1. <!DOCTYPE html>
  2. <html lang="">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>flex容器常用的四个属性：2.项目在主轴上的对齐方式</title>
  7.     <style>
  8.       .content {
  9.         width: 20em;
  10.         height: 10em;
  11.         background-color: tomato;
  12.         display: flex;
  13.       }
  14.       .content > .box {
  15.         background-color: turquoise;
  16.         border: blue 1px solid;
  17.       }
  18.       .content {
  19.         justify-content: flex-start;
  20.         /* 默认，贴紧起始线对齐 */
  21.         justify-content: flex-end;
  22.         /* 贴紧终止线对齐 */
  23.         justify-content: center;
  24.         /* 贴紧中间线对齐 */
  25.       }
  26.       /* 进行整体分配 */
  27.       .content {
  28.         justify-content: space-between;
  29.         /* 两端对齐 */
  30.         justify-content: space-around;
  31.         /* 分散对齐 */
  32.         justify-content: space-evenly;
  33.         /* 平均对齐 */
  34.       }
  35.       /* 将每个项目作为单独个体进行分配 */
  36.     </style>
  37.   </head>
  38.   <style></style>
  39.   <body>
  40.     <div class="content">
  41.       <div class="box">box1</div>
  42.       <div class="box">box2</div>
  43.       <div class="box">box3</div>
  44.       <div class="box">box4</div>
  45.       <div class="box">box5</div>
  46.       <div class="box">box6</div>
  47.       <div class="box">box7</div>
  48.     </div>
  49.   </body>
  50. </html>

3.项目在交叉轴上的对齐方式

  1. <!DOCTYPE html>
  2. <html lang="">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>flex容器常用的四个属性：3.项目在交叉轴上的对齐方式</title>
  7.     <style>
  8.       .content {
  9.         width: 20em;
  10.         height: 10em;
  11.         background-color: tomato;
  12.         /* 转为弹性容器 */
  13.         display: flex;
  14.         /* 弹性容器中的项目顺着主轴方向进行排列（主轴默认是水平方向的） */
  15.       }
  16.       .content > .box {
  17.         background-color: turquoise;
  18.         border: blue 1px solid;
  19.       }
  20.       .content {
  21.         align-items: flex-start;
  22.         /* 靠近起始线 */
  23.         align-items: flex-end;
  24.         /* 靠近终止线 */
  25.         align-items: center;
  26.         /* 靠近中间线 */
  27.         align-items: stretch;
  28.         /* 默认值，默认充满容器的全部高度 */
  29.       }
  30.     </style>
  31.   </head>
  32.   <style></style>
  33.   <body>
  34.     <div class="content">
  35.       <div class="box">box1</div>
  36.       <div class="box">box2</div>
  37.       <div class="box">box3</div>
  38.       <div class="box">box4</div>
  39.       <div class="box">box5</div>
  40.       <div class="box">box6</div>
  41.       <div class="box">box7</div>
  42.     </div>
  43.   </body>
  44. </html>

4.项目在多行容器中的对齐方式

  1. <!DOCTYPE html>
  2. <html lang="">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>flex容器常用的四个属性：4.项目在多行容器中的对齐方式</title>
  7.     <style>
  8.       .content {
  9.         width: 20em;
  10.         height: 10em;
  11.         background-color: tomato;
  12.         /* 转为弹性容器 */
  13.         display: flex;
  14.         /* 弹性容器中的项目顺着主轴方向进行排列（主轴默认是水平方向的） */
  15.       }
  16.       .content > .box {
  17.         width: 4em;
  18.         background-color: turquoise;
  19.         border: blue 1px solid;
  20.       }
  21.       .content {
  22.         flex-flow: row wrap;
  23.         /* 先转为多行文本 */
  24.         align-content: stretch;
  25.         /* 默认值,，默认填充全部高度 */
  26.         align-content: flex-start;
  27.         /* 整体分配：贴紧起始线 */
  28.         align-content: flex-end;
  29.         /* 整体分配：贴紧终止线 */
  30.         align-content: center;
  31.         /* 整体分配：贴紧中间线 */
  32.         align-content: space-around;
  33.         /* 单个分配：分散对齐 */
  34.         align-content: space-between;
  35.         /* 单个分配：两端对齐 */
  36.         align-content: space-evenly;
  37.         /* 单个分配：平均对齐 */
  38.       }
  39.     </style>
  40.   </head>
  41.   <style></style>
  42.   <body>
  43.     <div class="content">
  44.       <div class="box">box1</div>
  45.       <div class="box">box2</div>
  46.       <div class="box">box3</div>
  47.       <div class="box">box4</div>
  48.       <div class="box">box5</div>
  49.       <div class="box">box6</div>
  50.       <div class="box">box7</div>
  51.     </div>
  52.   </body>
  53. </html>

上一条：上帝你好啊下一条：实例演示BFC的三个作用
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多