浮动和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-childlast-child only-childnth-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-typelast-of-typeonly-of-typenth-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
绝对定位元素 元素的 positionabsolutefixed
行内块元素 元素的 displayinline-block
表格单元格 元素的 displaytable-caption,HTML 表格标题默认为该值
表格标题 元素的 displaytable-caption,HTML 表格标题默认为该值
匿名表格单元格元素 元素的 displaytabletable-rowtable-row-grouptable-header-grouptable-footer-group(分别是HTML tablerowtbodytheadtfoot 的默认属性)或 inline-table
overflow 值不为 visible 的块元素
display 值为 flow-root 的元素
contain 值为 layoutcontentpaint 的元素
弹性元素 displayflexinline-flex 元素的直接子元素
网格元素 displaygridinline-grid 元素的直接子元素
多列容器 元素的 column-countcolumn-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-startflex-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-growflex-shrinkflex-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
如果觉得我的文章对你有用,请随意赞赏