浮动和flex弹性盒子细说

浮动

  1. 什么是浮动？

    浮动是使文档脱离普通文档流，实现元素按照一定顺序去排列。直到遇到容器边框或者另外一个浮动元素为止。

  2. 浮动的特征

  • 脱离了普通文档流, 仍然在当前的父容器中, 只影响到原来排列在它后面的元素
  • 浮动元素是可以跨容器的
  • 浮动元素一定是块级元素,哪怕之前是行内元素

  1. 浮动的本质：为了实现图文混排。如首字下沉、文本环绕图片等。

  2. 浮动的语法：

/* 元素哪找从左或从右的顺序排列 */
float:left/right;
  1. 清除浮动：
/* 使用clear:both; 需在容器末尾一个附加块元素*/
clear:both;
/* 通过伪元素来清除“::” */
/* 在clear类之后清除 */
.clear::after{
display:block;
content:"";
clear:both;
}
/* 通过创建BFC 来消除 */
/* 如： */
.clear{
    overflow:hidden;
}

伪元素和伪类选择器

  1. 伪元素

  • 伪元素的作用：CSS 伪元素用于向某些选择器设置特殊效果。

  • 有那些值：作用是什么

    值 作用
    :first-letter 向文本的第一个字母添加特殊样式。
    :first-line 向文本的首行添加特殊样式。
    :before 在元素之前添加内容。
    :after 在元素之后添加内容。

  • 伪元素的用法：
    如上文：

.clear::after{
    clear:both;
}
  1. 伪类选择器
  • 伪类选择器的作用：CSS 伪类是用来添加一些选择器的特殊效果。
  • :first-child、last-child only-child、nth-chind(n)、nth-last-child不分组伪类选择器
/* first-child选择父元素下的第一个子元素 */

/* 选择div下面的第一个p元素 */
p:first-child{
    bgcolor:red;
}

/* last-child选择父元素下最后一个子元素 */
/* 选择div下面的最后一个p元素 */
p:last-child{
    bgcolor:yellow;
}

/* only-child  一个父级元素下只有一个特例的元素时用这个 */
/* 假设父元素下只有一个a标签，我想要找到这个a标签 */
a:only-child{
    bgcolor:blue;
}

/* 重点：nth-child（n）   */
/* n = an+b   n的值从0开始取， 0  1  2... */
/* 假设我想选中第二个子元素，那就是nth-chind(2) */
p:nth-child(2){
    color:blue;
}
/* 偶数的关键字：even   奇数的关键字：odd */
/* 选中偶数： */
p:nth-child(even){
    color:blue;
}

  • 分组伪类选择器:first-of-type、last-of-type、only-of-type、nth-of-type(n)

  • 使用方法和不分组伪类选择器类似，但是要特别注意的是，分组伪类选择器要分组

  • anchor 伪类

a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */

1.注意： 在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。 2.注意： 在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。 3.注意：伪类的名称不区分大小写。

容器高度折叠

  • 什么是容器高度折叠
    • 容器中的子元素进行浮动，子元素浮动会导致父级容器的高度消失,也叫"容器高度折叠
  • 解决方案 1.容器末尾一个附加块元素，清除浮动元素对当前元素的布局影响。
    <body>
  <div class="container">
    <div class="box1">容器1</div>
    <div class="box2">容器2</div>
    <!-- 添加一个附加块元素 -->
    <div class="clear"></div>
  </div>
</body>

消除浮动元素对当前元素的布局影响

.clear {
  clear: both;
}

效果展示：

  • 解决方案 2.容器尾部添加一个伪元素（伪元素: 不是通过 html 文档添加上的,而是通过 css 代码添加的元素）
/* 伪元素：上文有说到，通常使用‘：’‘::’来使用 */
 /* 在容器container之后添加元素 */
      .container::after {
        display: block;
        content: "";
        clear: both;
      }

  • 解决方案 3.BFC: 是目前最主流的解决方案

    BFC 是什么：块格式化上下文（Block Formatting Context，BFC） 是 Web 页面的可视 CSS 渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

BFC 特征：

  1. 能够包含住"浮动元素"
  2. 不会在垂直方向上产生外边距的折叠
  3. BFC 不会与外部的浮动元素重叠

下列方式会创建块格式化上下文：

元素 值
根元素 <html>
浮动元素 元素的 float 不是 none
绝对定位元素 元素的 position 为 absolute 或 fixed
行内块元素 元素的 display 为 inline-block
表格单元格 元素的 display 为 table-caption，HTML 表格标题默认为该值
表格标题 元素的 display 为 table-caption，HTML 表格标题默认为该值
匿名表格单元格元素 元素的 display 为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot 的默认属性）或 inline-table
overflow 值不为 visible 的块元素
display 值为 flow-root 的元素
contain 值为 layout、content 或 paint 的元素
弹性元素 display 为 flex 或 inline-flex 元素的直接子元素
网格元素 display 为 grid 或 inline-grid 元素的直接子元素
多列容器 元素的 column-count 或 column-width 不为 auto，包括 column-count 为 1
column-span 为 all 的元素始终会创建一个新的 BFC，即使该元素没有包裹在一个多列容器中（标准变更，Chrome bug）

块格式化上下文包含创建它的元素内部的所有内容.
块格式化上下文对浮动定位（参见 float）与清除浮动（参见 clear）都很重要。浮动定位和清除浮动时只会应用于同一个 BFC 内的元素。浮动不会影响其它 BFC 中元素的布局，而清除浮动只能清除同一 BFC 中在它前面的元素的浮动。外边距折叠（Margin collapsing）也只会发生在属于同一 BFC 的块级元素之间。

<div class="container">
  <div class="box1">容器1</div>
  <div class="box2">容器2</div>
</div>
      .container {
        /* 以下三种都可以消除折叠 */
        overflow: hidden;
        /* overflow: auto; */
        /* overflow: scroll; */
        /* 值不能为visible */
        /* overflow: visible; */
      }

  • BFC 的三个作用

    • 用途一:解决子元素浮动导致高度塌陷问题
    .container {
      border: 5px dashed red;
    }
    .container > .box {
      width: 10em;
      height: 5em;
      background-color: cyan;
      border: 1px solid blue;
      /* 将容器中的子元素进行浮动 */
      float: left;
    }
    /* 创建一个BFC容器，解决高度折叠 */
    .container {
      overflow: hidden;
    }

    效果展示：

    解决后的效果：

    • 用途二:解决外边距折叠问题
    <div class="container">
  <div class="box1">盒子1</div>
  <div class="box2">盒子2</div>
</div>
        /* 创建一个BFC容器，解决高度折叠 */
    .container {
      overflow: hidden;
    }
    .box1,
    .box2 {
      background-color: cyan;
      width: 10em;
      height: 5em;
    }
    .box1 {
      margin-bottom: 1.5em;
    }
    .box2 {
      margin-top: 1.5em;
    }

    效果展示：

    • 用途 3：解决浮动对布局的影响
    <title>解决浮动对布局排列的影响</title>
    <style>
      .container {
        /* overflow: 是一个除了 visible 之外的任何值, 都会创建一个 "BFC"; */
        overflow: hidden;
      }
      .container img {
        float: left;
      }

      .container p {
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <img
        src="https://img.php.cn/upload/course/000/000/001/5f606a9a7fe99960.jpg"
        alt=""
      />
      <p>
        BFC特征3: BFC不会与外部的浮动元素重叠BFC特征3:
        BFC不会与外部的浮动元素重叠BFC特征3:
        BFC不会与外部的浮动元素重叠BFC特征3:
        BFC不会与外部的浮动元素重叠BFC特征3:
        BFC不会与外部的浮动元素重叠BFC特征3:
        BFC不会与外部的浮动元素重叠BFC特征3:
        BFC不会与外部的浮动元素重叠BFC特征3:
        BFC不会与外部的浮动元素重叠BFC特征3:
        BFC不会与外部的浮动元素重叠BFC特征3:
        BFC不会与外部的浮动元素重叠BFC特征3:
        BFC不会与外部的浮动元素重叠BFC特征3:
        BFC不会与外部的浮动元素重叠BFC特征3:
        BFC不会与外部的浮动元素重叠BFC特征3:
        BFC不会与外部的浮动元素重叠BFC特征3:
        BFC不会与外部的浮动元素重叠BFC特征3:
        BFC不会与外部的浮动元素重叠BFC特征3:
        BFC不会与外部的浮动元素重叠BFC特征3:
        BFC不会与外部的浮动元素重叠BFC特征3:
        BFC不会与外部的浮动元素重叠BFC特征3:
        BFC不会与外部的浮动元素重叠BFC特征3:
        BFC不会与外部的浮动元素重叠BFC特征3:
        BFC不会与外部的浮动元素重叠BFC特征3:
        BFC不会与外部的浮动元素重叠BFC特征3:
        BFC不会与外部的浮动元素重叠BFC特征3:
        BFC不会与外部的浮动元素重叠BFC特征3:
        BFC不会与外部的浮动元素重叠BFC特征3: BFC不会与外部的浮动元素重叠
      </p>
    </div>
  </body>

效果展示：

flex 布局

  • flex 是什么：Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。

  • flex 有那些：弹性容器 和 弹性项目

  • 弹性容器：采用了 flexbox 的区域就叫做 flex 容器。为了创建 flex 容器， 我们把一个容器的 display 属性值改为 flex 或者 inline-flex。 完成这一步之后，容器中的直系子元素就会变为 flex 元素。

  • 弹性项目：弹性容器之中的子元素。

  • 容器属性：

序号 属性 描述
1 flex-flow 主轴方向与换行方式
2 justify-content 项目在主轴上的对齐方式
3 align-items 项目在交叉轴上的对齐方式
4 align-content 项目在多行容器中的对齐方式
  • 项目属性
序号 属性 描述
1 flex 项目的缩放比例与基准宽度
3 align-self 单个项目在交叉轴上的对齐方式
4 order 项目在主轴上排列顺序
  • 案例演示：
    <style>
      /* 样式初始化 */
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      /* 创建一个弹性容器 */
      .container {
        display: flex;
        width: 10em;
        height: 8em;
        background-color: aquamarine;
        /* 水平垂直居中 */
        justify-content: center;
        align-items: center;
      }
      .container > .box1,
      .box2 {
        background-color: blueviolet;
        width: 3em;
        height: 3em;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box1"></div>
      <div class="box2"></div>
    </div>
  </body>

效果展示：

flex 主轴方向和交叉轴方向。

  1. 主轴和交叉轴：

  2. flex-flow
    flex-flow属性设置了 flex 容器的布局主轴方向和是否换行，它的各种属性值如下：
值 作用
row 水平从左到右排列
row-reverse 水平从右到左排列，row的颠倒
column 垂直从上到下排列
column reverse 垂直从下到上排列，column的颠倒
row wrap 多行容器，水平排列允许换行
row nowrap 单行容器，水平排列不允许换行

下列演示均以此 html 代码为基础：

<body>
  <div class="container">
    <div class="box">弹性项目1</div>
    <div class="box">弹性项目2</div>
  </div>
</body>
  • row排列方式：
      .container {
        /* 设置主轴方向及是否换行 */
        flex-flow: row nowrap; /*水平 不换行*/
      }

  • row-reverse排列方式：
      .container {
        /* 设置主轴方向及是否换行 */
        flex-flow: row-reverse;
      }

  • column排列方式：
.container{
        flex-flow: column;
}

  • column-reverse排列方式：
.container{
    flex-flow:column-reverser;
}

  1. justify-content

    CSS 语法：

justify-content: flex-start|flex-end|center|space-between|space-around|initial|inherit;

  • 属性值

    值 描述
    flex-start 默认值项目位于容器的开头。
    flex-end 项目位于容器的结尾。
    center 项目位于容器的中心。
    space-between 项目位于各行之间留有空白的容器内。
    space-around 项目位于各行之前、之间、之后都留有空白的容器内。
    inherit 设置该属性为它的默认值
    initial 从父元素继承该属性

  • flex-start、flex-end

/* 沿起始线开始排列：flex-start */
.container{
  flex-flow:column；
  justify-content:flex-start；
}

/* 沿终止线开始排列：flex-end */
.container{
  flex-flow:column；
  justify-content:flex-end；
}

  • center
.container{
  flex-flow:column;
  justify-content:center;
}

  • space-between
.container {
  flex-flow: column;
  justify-content: space-between;
}

  • space-around
.container{
    flex-flow:column;
    justify-content:space-around;
}

  1. align-items：项目在交叉轴上的对齐方式

    align-items 属性定义 flex 子项在 flex 容器的当前行的侧轴（纵轴）方向上的对齐方式。

CSS 语法

align-items: stretch|center|flex-start|flex-end|baseline|initial|inherit;
值 描述
stretch 默认值。元素被拉伸以适应容器。
center 元素位于容器的中心。
flex-start 元素位于容器的开头。
flex-end 元素位于容器的结尾。
baseline 元素位于容器的基线上。
initial 设置该属性为它的默认值。
inherit 从父元素继承该属性。
  • stretch
  • center
.container{
        flex-flow: row;
        align-items: center;
}

  • flex-start
.container{
        flex-flow: row;
        align-items: flex-start;
}

  • flex-end
.container{
        flex-flow: row;
        align-items: flex-end;
}

  • baseline
.container{
        flex-flow: row;
        align-items: baseline;
}

  1. align-content
值 描述
stretch 默认值。元素被拉伸以适应容器。
center 元素位于容器的中心。
flex-start 元素位于容器的开头。
flex-end 元素位于容器的结尾。
space-between 元素位于各行之间留有空白的容器内。
space-around 元素位于各行之前、之间、之后都留有空白的容器内。
initial 设置该属性为它的默认值。
inherit 从父元素继承该属性。

flex 项目属性：

项目属性是指在弹性项目之中使用的，而不是在弹性容器之中使用，弹性容器之中使用容器属性，项目之中使用项目属性

值 作用
flex flex-grow、flex-shrink 和 flex-basis 属性的简写属性。用于设置或检索弹性盒模型对象的子元素如何分配空间
align-self align-self 属性定义flex子项单独在交叉轴方向上的对齐方式。
order 设置或检索弹性盒模型对象的子元素出现的顺序
  1. flex属性细说：
.container{
/* 默认值：flex：0 1 auto; */
/* flex: 放大因子 收缩因子 基准宽度 */
/* flex: flex-grow flex-shrink flex-basis */
/* 默认项目不放大,可收缩,宽度以width为准 */

/* 三值语法： */
/* flex：放大   收缩  基准宽度； */
flex：0 1 auto；

/* 两值语法： */
/* 第一个值是放大，第二个值有单位是基准宽度，无单位是缩小因子 */
/* 最后一个值没有单位的，表示flex：放大  收缩； */
flex：0 3;
/* 最后一个值有单位：表示flex：放大  基准宽度； */
flex：0 3%；

/* 一值语法： */
/* 只有一个值且无单位：表示放大因子 */
flex：1；

/* 只有一个值且有单位，表示基准宽度，此时放大和缩小因子被省略，都是1 */
flex：100px;
}


代码实现：

* {
        box-sizing: border-box;
      }
      /* 基础样式 */
      .container {
        height: 15em;
        display: flex;
        border: 1px solid #000;
        padding: 1em;
        margin: 1em;
      }
      .container > .item {
        width: 5em;
        background-color: lightcyan;
        border: 1px solid #000;}
      .container > .item:first-of-type {
        /* 只有一个值,且没有单位,表示增长因子 */
        flex: 1;
      }
      .container > .item:last-of-type {
        flex: 1;
      }
      .container > .item:nth-of-type(2) {
        flex: 2;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">item1</div>
      <div class="item">item2</div>
      <div class="item">item3</div>
    </div>
  </body>
  1. align-self属性：

    是设置某一个弹性项目在交叉轴上的对其方式。

值 在哪对齐
flex-start 沿交叉轴起始线对齐
flex-end 沿交叉轴终止线对齐
center 居中对齐
stretch 该子项目撑满容器 
align-self:flex-start;

align-self:flex-end;

align-self:center;

align-self:stretch;

  1. order属性细说：

    order项目在主轴上排列顺序,值越小越靠近主轴的起始线

案例解释：

最后修改：2020 年 10 月 30 日 03 : 47 PM
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏