Flex 补充属性与实战一、补充：Flex 容器属性1.1 row-gap、column-gap、gap 设置 flex 子项间隔属性名说明row-gap用于设置 flex 项目行之间的间隔大小（默认主轴为水平方向时）column-gap用于设置 flex 项目列之间的间隔大小（默认主轴为水平方向时）gapgap 为 row-gap 与 column-gap 的复合写法，即 gap: row-gap column-gap案例演示 1 2 3 4 5 6 7 8 1.2 单行宽自适应两端对齐 1.3 多行宽自适应两端对齐 二、Flex 实战案例2.1 元素水平垂直居中 2.2 画 3 点色子 关于 1 点色子到 6 点色子，如何用弹性布局来实现：详细可以参考博客地址：https://www.arryblog.com/2.3 双飞翼布局需求： 左右固定，中间自适应，最中间的内容放在第一位，有利于 SEO 搜索引擎优化。 中间 左边 右边 2.4 Flex 实现盒子 1 在最左边，2、3 在最右边 2.5 左右布局，左侧文字支持溢出显示省略号 我是标题内容，我希望占据剩余的空间。如果内容放不下，我不换行，要显示省略号 新 我是标题内容，我希望占据剩余的空间 新 2.6 星级评估 ☆ ☆ ☆ ☆ ☆ 2.7 阶梯式布局 第一阶段 第二阶段 第三阶段 第三阶段 第四阶段 2.8 时间轴布局 2.9 解决 Flex 布局最后一行两边分布的问题问题描述当我们使用 space-between 两端对齐时，最后一行元素不足时，会出现元素靠左分布，而不是两端对齐的问题。解决方案如果我们每一行显示的个数为 n，那可以在最后一行子项的后面加上 n-2 个 span 元素，span 元素的宽度和其它子项元素宽度一样，但不用设置高度。为什么是添加 n-2 个 span 元素呢？当最后一行只有 1 个子元素时，它会默认靠左，不用处理当最后一行子元素正好时，我们就不用关心这个问题所以要去掉这两种情况，只需要加 n-2 个 span 元素就好案例演示没有添加 span 元素前的效果： 1 2 3 4 5 6 7 添加了 n-2 个 span 元素后效果（这里每行 4 个，4-2=2，所以只需要加 2 个 span 就可以了）： 1 2 3 4 5 6 7
Flex 项目属性一、Flex 项目属性概览以下 6 大属性为 Flex 项目属性，都是直接添加到项目身上：属性名说明默认值order定义项目的排列顺序。数值越小，排列越靠前0align-self单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性autoflex-growflex 项主尺寸的 flex 增长系数。默认为 0，即如果存在剩余空间，也不放大0flex-shrinkflex 项主尺寸的缩小比例，默认为 1，即如果空间不足，该项目将缩小1flex-basis定义了在分配多余空间之前，项目占据的主轴空间（main size）autoflexflex 属性是 flex-grow, flex-shrink 和 flex-basis 的简写0 1 auto二、order 项目的排列顺序2.1 基本说明order 属性定义项目的排列顺序order 属性值为 >= 0 的整数，数值越小，排列越靠前默认值为 02.2 语法order: 1;2.3 案例演示 1 2 3 4 三、align-self 单个项目交叉轴对齐方式3.1 基本说明align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性align-self 的默认值为 auto，表示继承父元素的 align-items 属性如果父元素没有设置 align-items 属性，则等同于 stretch（要生效，元素自身没有设置高度）3.2 属性值属性值说明auto默认值，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretchstretch如果项目未设置高度或设为 auto，将占满整个容器的高度flex-start交叉轴的起点对齐flex-end交叉轴的终点对齐center交叉轴的中点对齐baseline项目的第一行文字的基线对齐3.3 语法/* 与交叉轴起点对齐 */ align-self: flex-start;3.4 案例演示 auto stretch flex-start flex-end center baseline 3.5 换行时的注意事项当项目换行时，其 align-self 单个项目对齐方式，是相对于其所在的那一行的轴线而言。 auto stretch flex-start flex-end center baseline 四、flex-grow 项目主轴放大系数4.1 基本说明flex-grow 设置 flex 项目主尺寸（main size）的 flex 增长系数主尺寸是项目的宽度还是高度，这取决于 flex-direction 值flex-grow 属性，在 Flex 容器有剩余空间时生效（默认主轴为水平轴）4.2 计算公式剩余空间计算：剩余空间 = flex 容器宽大小 - 所有 flex 项目占位宽加起来的大小注意： 剩余空间的值一定要是大于 0 的，否则就是没有剩余空间。放大计算公式：当所有项目的 flex-grow 值的总和加起来 < 1 时：项目放大后宽（width 属性） = 项目原始宽 + 剩余空间 * 项目的 flex-grow 值当所有项目的 flex-grow 值的总和加起来 >= 1 时：项目放大后宽 = 项目原始宽 + 剩余空间 * (flex-grow 值) / 所有项目的 flex-grow 值总和4.3 flex-grow 默认值flex-grow 的默认值为 0，表示即使有剩余空间，也不增长（放大）。4.4 案例 1：所有 flex-grow 值总和 < 1 1 2 3 4.5 案例 2：所有 flex-grow 值总和 >= 1 1 2 3 4.6 温馨提示flex 容器的剩余空间为 0 时，不管 flex 项目的 flex-grow 的值是多少，flex 项都不会放大。五、flex-shrink 项目主轴上缩小系数5.1 基本说明flex-shrink 属性指定了 flex 元素的收缩规则当所有 flex 项目占位宽度之和大于容器时候才会发生收缩（默认主轴为水平方向）flex 项目收缩的大小是依据所有 flex 项的 flex-shrink 的值决定的只有当 flex 容器设置了 flex-wrap: nowrap 时，才能看到效果5.2 flex-shrink 默认值flex-shrink 的默认值为 1，表示容器空间不足时，所有 flex 项目等比缩小。5.3 计算公式总缩放宽 = 所有子项宽 - 父容器宽 每种子项宽占比 = 每个子项宽 / 所有子项总宽 缩小宽 = 每个子项宽占比 * 总缩放宽注意： 元素无论如何都不会缩小到比自身内容宽还小。5.4 案例：默认等比缩小 1 2 3 5.5 flex-shrink 值为 0flex-shrink: 0 表示元素无论如何不缩放。 5.6 所有元素 flex-shrink 值的和大于 1所有元素的 flex-shrink 值大于 1，正常情况下则会将所有溢出容全部收缩至父容器内。flex-shrink 的值越大，表示收缩量尽可能越大。注意： 元素无论如何都不会缩小到比自身内容宽还小。 5.7 所有元素 flex-shrink 值的和小于 1最终所有元素的总收缩宽 = 总溢出宽 * 所有元素的 flex-shrink 值之和注意： 元素默认 flex-shrink 的值为 1。要想使所有元素的 flex-shrink 值之和小于 1，则每个元素都需要单独设置 flex-shrink 的值。 5.8 实际开发常用场景在实际开发中，用的最多的是以下两种情况：flex-shrink: 0 - 元素无论如何不缩放所有元素的 flex-shrink 值，默认都为 1，等比缩小六、flex-basis 分配剩余空间前，项目占据主轴空间大小（main size）6.1 基本说明flex-basis 属性定义了在分配多余空间之前，项目占据的主轴空间（main size）也就是 flex 项目的起始宽或高浏览器根据这个属性，计算主轴是否有多余空间它的默认值为 auto，即项目的本来大小（如果 width: 200px，则缩放以 200px 为参考）flex-basis 的优先级要高于 width（如果同时设置 width 和 flex-basis，则元素宽以 flex-basis 值为主）6.2 语法示例.flex-item:nth-child(1) { width: 100px; /* 在计算剩余空间之前，元素宽为 200px */ flex-basis: 200px; }6.3 案例演示 1 2 3 6.4 注意区分下面两种情况/* 在计算剩余空间之前，元素宽为 200px */ .flex-auto { width: 200px; flex-basis: auto; /* 这里 auto 相当于 200px */ } /* 在计算剩余空间之前，元素的宽为 0 */ .flex-auto { width: 200px; flex-basis: 0%; /* 这里相当于元素宽为 0 */ }七、flex 属性7.1 基本说明flex 属性是 flex-grow、flex-shrink 和 flex-basis 的简写flex 属性的默认值：0 1 autoflex: 1 1 auto; /* 以上 css 等价于以下三个属性的简写 */ flex-grow: 1; flex-shrink: 1; flex-basis: auto;7.2 flex 一个值写法一个 flex-grow 的有效值：此时简写会扩展为 flex: <flex-grow> 1 0flex: 1; /* 上面简写，等价于下面写法 */ flex: 1 1 0;一个 flex-basis 的有效值：此时简写会扩展为 flex: 1 1 <flex-basis>flex: 0px; /* 这里为 0 必须带单位，否则会被当成 flex-grow 处理 */ /* 上面写法等价于下面写法 */ flex: 1 1 0px;关键字：flex: initial; /* 等价于 flex: 0 1 auto，为 flex 的默认值 */ flex: none; /* 等价于 flex: 0 0 auto */ flex: auto; /* 等价于 flex: 1 1 auto，默认值 */7.3 flex 两个值写法第一个值必须是一个 flex-grow 的有效值。第二个值必须是以下之一：一个 flex-shrink 的有效值：此时简写会扩展为 flex: <flex-grow> <flex-shrink> 0flex: 1 1; /* 等价于 flex: 1 1 0 */一个 flex-basis 的有效值：此时简写会扩展为 flex: <flex-grow> 1 <flex-basis>flex: 1 auto; /* 等价于 flex: 1 1 auto */7.4 推荐记住以下常见的简写简写完整形式说明flex: noneflex: 0 0 auto不支持弹性伸缩flex: autoflex: 1 1 auto在元素设置宽的基础上自动伸缩flex: 1flex: 1 1 0%在元素宽为 0 的基础上伸缩 logo 搜索 登录 八、z-index 属性8.1 基本说明z-index 属性用于控制 Flex 子项的层叠顺序（也就是元素在 z 轴上的顺序），值越大元素越在上面显示。flex 子项的 z-index 属性默认值为 auto。8.2 案例演示
Flex 容器属性一、Flex 容器属性概览以下 6 个属性都是设置在 Flex 容器上：属性名说明flex-direction设置主轴的方向flex-wrap设置（项目）子元素是否换行flex-flow复合属性，相当于同时设置了 flex-direction 和 flex-wrapjustify-content设置主轴上的（项目）子元素排列方式align-items设置交叉轴上的（项目）子元素排列方式（单行）align-content设置多轴线在交叉轴上排列方式（多行）二、flex-direction 设置主轴方向2.1 基本说明flex-direction 属性决定了 Flex 容器的主轴方向即 Flex 项目的排列方向默认主轴方向就是 x 轴，水平向右默认交叉轴就是 y 轴，垂直向下2.2 属性值属性值说明row（默认值）主轴为水平方向，起点在左端。交叉轴在垂直方向，起点在上边框位置row-reverse主轴为水平方向，起点在右端。交叉轴在垂直方向，起点在元素上边框位置column主轴为垂直方向，起点元素上边框位置。交叉轴为水平方向，起点在左端column-reverse主轴为垂直方向，起点在下沿。交叉轴为水平方向，起点在左端2.3 语法/* 主轴为行（x轴），水平向右 */ flex-direction: row;2.4 案例演示 1 2 3 不同值的效果：row - 从左到右水平排列row-reverse - 从右到左水平排列column - 从上到下垂直排列column-reverse - 从下到上垂直排列三、flex-wrap 项目如何换行3.1 基本说明默认情况下，项目都排在一条线（又称"轴线"）上排列flex-wrap 属性定义，如果项目在一条轴线（主轴）排不下时，如何换行3.2 属性值属性值说明nowrap（默认）不换行wrap换行，第一行在上方（或第一列左边）wrap-reverse换行，第一行在下方（或第一列在右边）3.3 语法/* 放不下时，不换行 */ flex-wrap: nowrap;3.4 案例演示 1 2 3 4 5 不同主轴方向下的效果：主轴为 row（水平方向）时：nowrap - 不换行，元素被压缩wrap - 换行，第一行在上方wrap-reverse - 换行，第一行在下方主轴为 column（垂直方向）时：nowrap - 不换行，元素被压缩wrap - 换行，第一列在左边wrap-reverse - 换行，第一列在右边四、flex-flow 主轴方向和项目如何换行4.1 基本说明flex-flow 属性是 flex-direction 属性和 flex-wrap 属性的简写形式，默认值为 row nowrap。4.2 语法flex-flow: row nowrap;4.3 案例演示 1 2 3 4 5 五、justify-content 项目在主轴上对齐方式5.1 基本说明justify-content 属性定义了项目在主轴上的对齐方式。5.2 属性值属性值说明flex-start（默认值）左对齐flex-end右对齐center居中space-between两端对齐，项目之间的间隔都相等space-around每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍space-evenly使每个元素之间和元素距离边距的距离都相等5.3 语法/* 项目在主轴上左对齐 */ justify-content: flex-start;5.4 案例演示 1 2 3 4 效果说明：flex-start - 左对齐flex-end - 右对齐center - 居中对齐space-between - 两端对齐，项目之间的间隔相等space-around - 每个项目两侧的间隔相等（项目之间的间隔比项目与边框的间隔大一倍）space-evenly - 每个元素之间和元素距离边距的距离都相等六、align-items 项目在交叉轴上对齐方式6.1 基本说明align-items 属性定义项目在交叉轴上如何对齐，只对单行有效。6.2 属性值属性值说明stretch（默认值）如果项目未设置高度或设为 auto，将占满整个容器的高度flex-start交叉轴的起点对齐flex-end交叉轴的终点对齐center交叉轴的中点对齐baseline所有元素向基线对齐。侧轴起点到元素基线距离最大的元素将会于侧轴起点对齐以确定基线6.3 语法/* 默认值，项目未设置高度或设为auto，将占满整个容器的高度 */ align-items: stretch;6.4 注意事项align-items 的值不是 stretch 时，其项目未设置高时，其高为内容大小，并不会拉伸到容器高度6.5 案例演示 1 2 3 效果说明：stretch - 项目未设置高度时拉伸到容器高度flex-start - 交叉轴起点对齐flex-end - 交叉轴终点对齐center - 交叉轴中点对齐baseline - 基线对齐6.6 换行时的效果当项目放不下，换行时：可以把每一行看作一个新的 flex 容器align-items 控制项目在这个新容器的交叉轴上的对齐方式每一行容器占的高度 = 当前行最高元素的高 +（容器高 - 所有行最高的那一个元素的高之和）/ 行数 1 2 3 4 5 6 七、align-content 多根轴线对齐方式（多行）7.1 基本说明align-content 属性定义了多根轴线在交叉轴上的对齐方式如果项目只有一根轴线，该属性不起作用7.2 属性值属性值说明stretch（默认值）轴线占满整个交叉轴（没有设置高度时生效）flex-start与交叉轴的起点对齐flex-end与交叉轴的终点对齐center与交叉轴的中点对齐space-between与交叉轴两端对齐，轴线之间的间隔平均分布space-around每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍7.3 语法/* 多行在交叉轴上居中对齐 */ align-content: center;7.4 案例演示 1 2 3 4 5 6 效果说明：flex-start - 与交叉轴起点对齐flex-end - 与交叉轴终点对齐center - 与交叉轴中点对齐space-between - 与交叉轴两端对齐，轴线之间的间隔平均分布space-around - 每根轴线两侧的间隔相等stretch - 轴线占满整个交叉轴（项目没有设置高度时生效）
Flex 布局的基本概念一、什么是 Flex 布局1.1 基本定义Flex 是 Flexible Box 的缩写，意为"弹性盒子"Flex 布局是一种一维的布局模型，它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力Flexbox 是一种一维的布局，因为一个 flexbox 一次只能处理一个维度上的元素布局，一行或者一列1.2 为什么使用 Flex 布局传统布局的问题：浮动+定位布局兼容性好，但布局繁琐在移动端应用起来相对麻烦Flex 布局的优势：操作方便，布局极为简单非常适合移动端布局现在 PC 端和移动端都应用很广泛二、Flex 容器和 Flex 项目2.1 基本概念采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"Flex 容器的所有直接子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"通过给元素添加 display:flex 或 display:inline-flex 来指定元素为 Flex 布局容器2.2 display 属性值属性值说明display:flex;弹性布局，元素自身以块级元素显示display:inline-flex;弹性布局，元素自身以行内块元素呈现2.3 基本示例 Flex项目 Flex项目 Flex项目 Flex项目 2.4 注意事项任何一个元素都可以指定为 Flex 布局Flex 布局项目（子元素）的 float、clear 和 vertical-align 属性将失效三、主轴和交叉轴3.1 基本概念Flex 容器默认存在两根轴：轴类型说明方向主轴（main axis）水平方向默认从左到右交叉轴（cross axis）垂直方向默认从上到下3.2 相关术语术语说明main start主轴的开始位置（与边框的交叉点）main end主轴的结束位置cross start交叉轴的开始位置cross end交叉轴的结束位置main size单个 Flex 项目占据的主轴空间cross sizeFlex 项目占据的交叉轴空间3.3 默认行为Flex 项目默认沿主轴排列默认从左往右沿水平排列四、Flex 项目的默认表现形式当 flex 容器和 flex 项目没有添加任何 Flex 容器和 Flex 项目相关属性时，flex 项目默认的表现形式如下：4.1 默认表现特性说明排列方式子元素（项目）排列为一行（flex-direction 属性的初始值是 row）排列起点子元素（项目）从主轴的起始线开始排列主维度拉伸子元素（项目）不会在主维度方向拉伸（放的下，不会拉伸），但放不下，会缩小交叉轴拉伸子元素（项目）没有设置 height 时，元素被拉伸来填充交叉轴大小（单行时项目的高度等于容器高），设置了高，则按设置高显示宽度设置如果 flex 容器能放下所有子元素时，子元素设置了 width，则宽为 width 大小，没有设置，则宽为元素内容宽（因为 flex-basis 默认值为 auto）换行子项默认放不下时，不会换行（因为 flex-wrap 属性默认为值 nowrap）4.2 代码演示 1 2 3 4 4.3 不同容器宽度的效果容器宽度不设置（与浏览器一样大时）子项可以完全放下容器宽度为 200px（所有子项宽加起来 400px，大于了容器宽）元素并没换行，而是缩小宽度，自动压缩到容器中显示容器宽度为 50px子项缩小到只有内容宽时，容器还是放不下，则会溢出4.4 高度说明.flex-item 没有设置高度时，其高度会被拉伸与父容器 .flex-container 的高一样大小。
清除浮动的最佳实践1. 概念清除浮动: 浮动一定要封闭到一个盒子中,否则就会对页面后续元素产生影响。当子元素浮动后,父元素如果不设置高度,就会出现高度塌陷的问题,影响后续布局。2. 清除浮动方法 1: 使用 BFC2.1 原理让内部有浮动的父盒子形成 BFC,它就能关闭住内部的浮动。此时,最好的方法就是 overflow: hidden; 属性。2.2 示例* { margin: 0; padding: 0; } div { /* 清除浮动方法1: 让内部有浮动的父盒子形成 BFC, 它就能关闭住内部的浮动 此时,最好的方法就是 overflow: hidden; 属性 */ overflow: hidden; margin-bottom: 10px; } p { width: 100px; height: 100px; background-color: orange; margin-right: 10px; float: left; } 2.3 优缺点优点:代码简单兼容性好缺点:overflow: hidden 会隐藏溢出内容不适合所有场景3. 清除浮动方法 2: 使用 clear 属性3.1 原理给后面的父盒子设置 clear: both; 属性。clear 表示清除浮动对自己的影响both 表示左右浮动都清除3.2 示例* { margin: 0; padding: 0; } .box { border: 2px solid red; margin-bottom: 20px; } .box2 { /* 清除左右浮动 */ clear: both; } p { width: 100px; height: 100px; background-color: orange; margin-right: 10px; float: left; } 3.3 优缺点优点:简单直接缺点:不推荐使用需要额外添加标签不够语义化影响布局灵活性4. 清除浮动方法 3: 使用伪元素(推荐)4.1 原理使用 ::after 伪元素给盒子添加最后一个子元素:将 ::after 设置 content: ""; 属性让其成为一个块级元素 display: block;并且给 ::after 设置 clear: both;强烈推荐使用,最佳实践(大厂都这么用)4.2 示例* { margin: 0; padding: 0; } div { border: 2px solid red; margin-bottom: 20px; } /* 添加伪元素 */ /* ::after 匹配选中的元素的最后一个子元素 */ .clearfix::after { content: ""; clear: both; /* 转为块级元素 */ display: block; } p { width: 100px; height: 100px; background-color: orange; margin-right: 10px; float: left; } 4.3 优缺点优点:✅ 推荐使用不需要额外添加 HTML 标签语义化好可维护性强缺点:代码稍多(但可以封装成通用类)5. 清除浮动方法 4: 隔墙法5.1 原理在两个父盒子之间"隔墙"额外一个携带 clear: both; 的盒子。5.2 示例* { margin: 0; padding: 0; } div { border: 2px solid red; } p { width: 100px; height: 100px; background-color: orange; margin-right: 10px; float: left; } /* 清除浮动方法4: 在两个父盒子之间 "隔墙" 额一个携带 clear: both; 的盒子 */ .cl { clear: both; } .h20 { height: 20px; } 5.3 优缺点优点:简单直接缺点:不推荐需要额外添加无意义的 HTML 标签污染 HTML 结构不够语义化6. 清除浮动方法对比方法代码量语义化兼容性推荐度BFC (overflow: hidden)少好好⭐⭐⭐clear: both少差好⭐伪元素(::after)中好好⭐⭐⭐⭐⭐⭐隔墙法中差好⭐7. 最佳实践7.1 推荐的清除浮动方案使用伪元素清除浮动(强烈推荐):/* 通用清除浮动类 */ .clearfix::after { content: ""; display: block; clear: both; } /* 兼容 IE6、7 */ .clearfix { *zoom: 1; }使用方法: 7.2 完整的最佳实践代码/* 清除浮动最佳实践 */ .clearfix::after { content: ""; display: block; clear: both; height: 0; visibility: hidden; } .clearfix { /* 触发 hasLayout (IE6、7) */ *zoom: 1; } /* 或者使用双伪元素 */ .clearfix::before, .clearfix::after { content: ""; display: table; } .clearfix::after { clear: both; } /* 触发 hasLayout (IE6、7) */ .clearfix { *zoom: 1; }7.3 在项目中的应用/* 全局清除浮动类 */ .clearfix::after { content: ""; display: block; clear: both; } /* 使用示例 */ .container { width: 1000px; margin: 0 auto; } .left { width: 700px; float: left; } .right { width: 280px; float: right; } 左侧内容 右侧内容 8. 常见问题Q1: 为什么需要清除浮动?A: 因为浮动元素脱离文档流,不占据空间,会导致父元素高度塌陷,影响后续布局。Q2: 哪种清除浮动方法最好?A: 伪元素方法(方法3) 最好,因为:不需要额外 HTML 标签语义化好可维护性强大厂都这么用Q3: overflow: hidden 有什么缺点?A:会隐藏溢出内容不适合有下拉菜单、工具提示等需要溢出的场景需要考虑是否适合当前布局Q4: 如何选择清除浮动方法?A:优先使用伪元素方法如果确定不会有溢出,可以用 overflow: hidden其他方法不推荐,了解即可Q5: IE6、7 如何处理?A: 使用 *zoom: 1; 触发 hasLayout:.clearfix { *zoom: 1; }9. 总结清除浮动关键要点:为什么要清除浮动:浮动元素脱离文档流造成父元素高度塌陷影响后续布局清除浮动的四种方法:方法1: BFC (overflow: hidden)方法2: clear: both (不推荐)方法3: 伪元素 ::after (强烈推荐)方法4: 隔墙法 (不推荐)推荐方法:✅ 使用伪元素清除浮动✅ 封装成通用类 .clearfix✅ 注意 IE6、7 兼容性方法对比:伪元素法: 最佳实践BFC 法: 简单,但有局限性其他方法: 不推荐最佳实践代码:.clearfix::after { content: ""; display: block; clear: both; }注意事项:浮动要封闭到盒子中否则会影响后续元素选择合适的清除浮动方法记住: 使用伪元素清除浮动是最佳实践,强烈推荐!
BFC 规范1. 概念BFC (Block Formatting Context,块级格式上下文) 是页面上的一个隔离的独立容器。容器里的子元素不会影响到外面的元素反之亦然示例一个盒子不设置 height,当内容子元素都浮动时,无法撑起自身。原因: 这个盒子没有形成 BFC。2. 创建 BFC2.1 创建 BFC 的方法方法说明备注float 的值不是 nonefloat: left 或 right可以实现,但没有意义,不可能随意给盒子设置浮动position 的值不是 static 或 relativeposition: absolute 或 fixed可以实现,但不靠谱display 的值是 inline-block、flex 或 inline-flex改变显示类型可以实现,但没有意义,可能随便改变盒子的显示类型overflow: hidden溢出隐藏最佳方法,但有时不满足所有场景2.2 溢出隐藏.box { overflow: hidden; }作用:溢出盒子边框的内容将会被隐藏overflow: hidden; 是非常好用的让盒子形成 BFC 的方法2.3 创建 BFC 示例.box { width: 500px; border: 5px solid red; /* 方法1: float 的值不是 none */ /* float: left; */ /* 方法2: position 的值不是 static 或者 relative */ /* position: absolute; */ /* 方法3: display 的值是 inline-block、flex 或 inline-flex */ /* display: inline-block; */ /* display: flex; */ /* display: inline-flex; */ /* 方法4: overflow: hidden; */ overflow: hidden; } .box .c1 { width: 200px; height: 200px; background-color: orange; float: left; } .box .c2 { width: 200px; height: 200px; background-color: skyblue; float: left; } 效果: 父元素能够包裹浮动的子元素,不再高度塌陷3. BFC 的其他作用3.1 BFC 可以取消盒子 margin 塌陷p { width: 200px; height: 200px; background-color: orange; margin: 50px; /* 垂直方向上下 margin 会重合,距离依然是 50 */ } /* BFC 作用: 可以取消盒子 margin 塌陷 */ div { overflow: hidden; } 3.2 BFC 可以阻止元素被浮动元素覆盖.box1 { width: 300px; height: 300px; background-color: skyblue; float: left; } .box2 { width: 200px; height: 200px; background-color: tomato; /* 形成BFC,不会被浮动元素覆盖 */ overflow: hidden; } 注意:这个方法没有实际意义,实际开发不会这么用只具有理论意义,要明白需要并排显示的盒子,要么都浮动,要么都不写以下的写法是不合法规范的4. 浏览器差异4.1 IE6、7 浏览器的差异IE6、7 浏览器使用 hasLayout 机制和 BFC 规范略有差异比如: IE 浏览器可以使用 zoom: 1 属性,让盒子拥有 layout4.2 兼容性处理如果要制作兼容到 IE6、7 的网页时:尽量让网页布局变得简单内部有浮动的盒子要设置 height 属性规范编程,就没有问题兼容性示例.box { /* 现代浏览器: 形成 BFC */ overflow: hidden; /* IE6、7: 触发 hasLayout */ *zoom: 1; }5. BFC 应用场景5.1 清除浮动.container { overflow: hidden; } .item { float: left; }5.2 防止 margin 塌陷.parent { overflow: hidden; } .child { margin: 20px 0; }5.3 两列布局.container { overflow: hidden; } .left { width: 200px; float: left; } .right { overflow: hidden; /* 创建 BFC */ height: 200px; background: #f0f0f0; }6. 总结BFC 规范关键要点:BFC 概念:Block Formatting Context (块级格式上下文)隔离的独立容器子元素不影响外部元素创建 BFC 的方法:float 不为 noneposition 不为 static 或 relativedisplay 为 inline-block、flex 或 inline-flexoverflow: hidden (推荐)BFC 的作用:解决父元素高度塌陷取消 margin 塌陷阻止元素被浮动元素覆盖实现两列布局浏览器差异:IE6、7 使用 hasLayout 机制可用 zoom: 1 触发建议尽量简化布局最佳实践:优先使用 overflow: hidden注意兼容性处理合理使用 BFC 解决布局问题注意事项:overflow: hidden 会隐藏溢出内容不适合所有场景选择合适的 BFC 创建方法
浮动布局基础1. 概念网页布局的本质是:用 CSS 来摆放盒子,把盒子摆放到页面对应的位置。在 CSS 中提供了以下几种不同的布局策略来实现页面的布局:正常布局流浮动布局定位布局表格布局 (display: table)响应式设计弹性布局网格布局多列布局以上每种布局方式,都有自己的用途,也有各自的优缺点,相互辅助。2. 正常布局流(Normal Flow)2.1 概念正常布局流(normal flow)是指:在不对页面进行任何布局控制时,浏览器默认的 HTML 布局方式HTML 元素有块级元素和内联元素更简单直白的理解,正常布局流就是规定了,在默认情况下块级元素和内联元素的排版方式2.2 块级元素的排列方式块级盒子会从包含块的顶部开始,按序垂直排列:同级盒子间的垂直距离会由 margin 属性决定相邻两个块级盒子之间的垂直间距会遵循外边距折叠原则div { /* 默认垂直排列 */ margin: 10px; }2.3 内联元素排版方式内联元素盒子的排列方式:盒子会从包含块的顶部开始,按序水平排列只有水平外边距(垂直方向无效)、边框和内边距会被保留这些盒子可以以不同的方式在垂直方向对齐:底部对齐、顶部对齐、文字底部对齐span { /* 默认水平排列 */ margin: 0 10px; }3. 浮动布局3.1 浮动布局起源最初引入 float 属性是为了能让 Web 开发人员实现简单的布局,包括在一列文本中浮动的图像,文字环绕在它的左边或右边。但 Web 开发人员很快意识到,任何东西都可以浮动,而不仅仅是图像,所以浮动的使用范围扩大了。3.2 浮动是如何工作的把一个元素"浮动"(float)起来,会改变该元素本身和在正常布局流(normal flow)中跟随它的其他元素的行为:元素会浮动到左侧或右侧从正常布局流(normal flow)中移除其他的周围内容就会在这个被设置浮动(float)的元素周围环绕简单理解:当元素添加了浮动后,元素就会脱离文档流,按照指定方向(左右)发生移动,遇到父级边界或者相邻的浮动元素就会停下来,同时会影响到它后面元素的排版行为。术语:文档流: 文档中可显示对象在排列时所占用的位置/空间(在页面中占位置)脱离文档流: 元素相当于漂浮起来,不占据页面中的位置3.3 浮动的本质和要点浮动的本质功能: 用来实现并排浮动使用要点:要浮动,并排的盒子都要设置浮动父盒子要有足够的宽度,否则子盒子会掉下去示例: 浮动并排.box { width: 600px; height: 200px; border: 1px solid #000; } .box .c1 { width: 200px; height: 200px; background-color: skyblue; float: left; } .box .c2 { width: 200px; height: 200px; background-color: gold; float: left; } .box .c3 { width: 200px; height: 200px; background-color: pink; float: left; } float: left; float: left; float: left; 3.4 如何产生浮动给需要浮动的元素添加 float 属性:属性值说明none默认值,元素不浮动left元素向左浮动right元素向右浮动inherit规定应该从父元素继承 float 属性的值(一般不用,了解即可)4. 元素浮动的特性4.1 元素添加浮动后,脱离文档流特性: 同时会影响其后面的元素,但不影响它前面的元素示例.box { width: 300px; height: 200px; border: 2px solid red; } .box1 { width: 100px; height: 50px; background-color: khaki; } .box2 { width: 200px; height: 50px; background-color: rgb(133, 206, 235); float: left; /* 添加浮动 */ } .box3 { width: 100px; height: 100px; background-color: pink; } 1 2 3 效果:蓝色 div 加了浮动后,相当于漂浮起来,不占据页面空间粉色盒子的位置发生改变,移动到上面来蓝色的盒子相当于漂浮在红色的上面黄色的盒子不受任何影响4.2 父元素宽度不够特性: 子元素在放不下的情况下会换行显示示例.main { width: 240px; height: 150px; background-color: khaki; } .box { width: 50px; height: 50px; background-color: skyblue; margin: 10px; float: left; } 框1 框2 框3 框4 4.3 浮动的顺序贴靠特性特性: 子盒子会按顺序进行贴靠,如果没有足够空间,则会寻找在前一个兄弟元素示例.box { width: 300px; height: 200px; border: 1px solid #000; } .box .c1 { width: 200px; height: 100px; background-color: orange; float: left; } .box .c2 { width: 100px; height: 50px; background-color: skyblue; float: left; } .box .c3 { width: 100px; height: 50px; background-color: tomato; float: left; } 效果: c3 会贴靠在 c1 的下面,因为 c2 占据了 c1 右侧的空间。4.4 元素浮动后,具有行内块级元素特性特性:浮动的元素不再区分块级元素、行内元素,已经脱离了标准文档流一律能够设置宽度和高度,即使它是 span 标签或 a 标签等示例span { width: 100px; height: 30px; background-color: tomato; /* 只要设置了浮动的元素,不再区分块级元素和行内元素 */ /* 都能设置高度和宽度 */ float: left; margin-right: 10px; text-align: center; line-height: 30px; color: #fff; } 浮动的元素一定能设置宽高 1 2 3 4 5 右浮动:float: right; 即可设置右浮动实际工作中,右浮动没有左浮动用的多原理同左浮动4.5 浮动的元素会造成父元素高度塌陷特性:当给子元素添加了浮动后,子元素相当于漂浮起来,不占据页面空间这样就造成父级元素在没有设置高度时,高度塌陷问题示例.main { width: 200px; border: 2px solid red; } .item { width: 100px; height: 100px; background-color: pink; float: left; /* 添加浮动 */ } 效果: 父元素高度塌陷,只有边框可见解决方案: 见后续"清除浮动"章节4.6 浮动对文字的影响特性:常见的图片文字环绕效果,其实现方式主要是将图片左浮动或右浮动浮动后其相邻的文字,就会环绕图片排列示例.box { width: 200px; background-color: #ddd; padding: 10px; } .img { width: 80px; height: 80px; background-color: skyblue; float: left; margin: 10px; } 最初,引入float属性是为了能让 web 开发人员实现简单的布局,包括在一列文本中浮动的图像,文字环绕在它的左边或右边 4.7 使用浮动实现网页布局要点:垂直显示的盒子,不要设置浮动,只有并排显示的盒子才要设置浮动每一个盒子都是独立存在,每个盒子中又是一个小天地,内部可以继续使用浮动5. 总结浮动布局基础关键要点:布局策略:正常布局流(默认)浮动布局(并排)定位布局(精确定位)其他布局(Flex、Grid 等)正常布局流:块级元素: 垂直排列内联元素: 水平排列浮动工作原理:脱离文档流按指定方向移动遇到边界或相邻浮动元素停止影响后面元素的排版浮动七大特性:脱离文档流父元素宽度不够会换行顺序贴靠特性具有行内块级元素特性造成父元素高度塌陷对文字有环绕效果可用于网页布局浮动属性值:none: 不浮动left: 左浮动right: 右浮动记住: 浮动主要用于实现元素并排,但需要注意清除浮动解决父元素高度塌陷问题!
CSS 函数详解一、calc() 函数calc() 函数用于动态计算长度值。基本语法/* 最终计算得到 width:300px */ width: calc(100px + 200px); /* 先算乘法,再算减法 得到 width:150px */ width: calc(100px - 50px * -1); /* 先算除法,再算减法 得到 width:75px */ width: calc(100px - 50px / 2); /* 先算除法,再算减法,假设 100% 对应父元素宽为 200px,则算得结果 175px */ width: calc(100% - 50px / 2);使用注意事项注意事项说明支持运算符calc() 函数支持 + - * / 运算运算符空格运算符前后都需要保留一个空格,例如:width: calc(100% - 10px);* / 空格* 和 / 时,其前后可以没有空格,但建议留有空格支持单位任何长度值都可以使用 calc() 函数进行计算单位类型可以使用百分比、px、em、rem 等单位运算优先级calc() 函数使用标准的数学运算优先级规则案例演示 实战应用场景场景1: 自适应宽度减去固定值.container { width: calc(100% - 200px); /* 总宽度减去侧边栏宽度 */ } /* 侧边栏 + 主内容布局 */ .sidebar { width: 200px; } .main { width: calc(100% - 200px); }场景2: 居中对齐.center-element { position: absolute; left: calc(50% - 50px); /* 水平居中,元素宽 100px */ top: calc(50% - 50px); /* 垂直居中,元素高 100px */ width: 100px; height: 100px; }场景3: 响应式网格布局.grid-item { width: calc(33.33% - 20px); /* 三列布局,减去间距 */ margin-right: 20px; } .grid-item:last-child { margin-right: 0; }二、var() 函数1. :root 选择器:root 选择器用于匹配文档的(html)根元素。/* 页面背景色为红色 */ :root { background-color: red; }:root 与 html 选择器的区别两者的唯一区别在于 :root 选择器的优先级要高于 html 标签选择器。:root { /* 背景黄色 */ background-color: khaki; } html { /* 背景天蓝色 */ background-color: skyblue; }结果: 因为 :root 的优先级高于 html 标签选择器,则最终的浏览器背景以 khaki 黄色呈现。2. var() 函数解读var() 函数用于插入自定义的属性值(CSS 变量),如果一个属性值在多处被使用,该方法就很有用。规则自定义属性一定要以 -- 开头自定义属性会从自身开始一直向外找,以最近找到的为主写在后面的自定义属性会覆盖写在前面的基本用法 自定义属性的寻找原则:就近原则 全局自定义属性通常自定义属性是写在 :root 选择器中,并且 :root 选择器会放在 CSS 的最上面,这样所有的选择器都能用到这个自定义变量属性。 实战应用场景场景1: 主题切换 我是页面中文字 按钮 场景2: 间距统一管理:root { --spacing-xs: 4px; --spacing-sm: 8px; --spacing-md: 16px; --spacing-lg: 24px; --spacing-xl: 32px; } .card { padding: var(--spacing-md); margin-bottom: var(--spacing-lg); } .button { padding: var(--spacing-sm) var(--spacing-md); }场景3: 颜色系统:root { --color-primary: #007bff; --color-secondary: #6c757d; --color-success: #28a745; --color-danger: #dc3545; --color-warning: #ffc107; } .btn-primary { background-color: var(--color-primary); } .btn-success { background-color: var(--color-success); }三、其他 CSS 函数1. rgb() 和 rgba()/* RGB */ color: rgb(255, 0, 0); /* RGBA - 带透明度 */ color: rgba(255, 0, 0, 0.5); background-color: rgba(0, 0, 0, 0.1);2. hsl() 和 hsla()/* HSL */ color: hsl(120, 100%, 50%); /* 绿色 */ /* HSLA - 带透明度 */ color: hsla(120, 100%, 50%, 0.5);3. url()background-image: url('./images/bg.png'); background-image: url('https://example.com/image.jpg');四、综合实战案例案例1: 竖状文件夹结构 前端 HTML CSS 文本样式 盒子模型 position 定位 背景样式 JavaScript Vue React Java Python 五、最佳实践1. 合理命名 CSS 变量/* ✅ 推荐: 语义化命名 */ :root { --color-primary: #007bff; --font-size-base: 16px; --spacing-md: 16px; } /* ❌ 不推荐: 无意义命名 */ :root { --color1: #007bff; --fs: 16px; --s: 16px; }2. 提供默认值/* 提供默认值,防止变量未定义 */ .element { color: var(--font-color, #000); padding: var(--spacing, 16px); }3. 使用 calc() 结合变量:root { --spacing-base: 16px; --container-width: 1200px; } .element { padding: calc(var(--spacing-base) / 2); width: calc(var(--container-width) - 200px); }
不透明度 (opacity)一、opacity 概述opacity 属性指定了一个元素的不透明度。属性值属性值描述0元素完全透明(即元素不可见)0.0 - 1.0元素半透明(元素后面的背景可见),值越大,元素透明度越低1元素完全不透明(即元素后面的背景不可见)二、基本用法案例演示 .item1 .item2 .item3 三、注意事项1. 值的范围opacity 的值是一个 0.0 到 1.0 范围内的数字值值如果大于 1,相当于 1值小于 0,则相当于 02. 子元素继承opacity 设置透明度时,其里面的子元素和内容也会被透明掉。所以也可以用 opacity: 0; 来隐藏一个元素,及其里面的子元素一起隐藏掉。3. 创建层叠上下文opacity 的属性值不为 1 时,元素会创建自己的层叠上下文。 四、对比学习属性说明visibility: hidden隐藏元素,但元素还占着原有的空间,在 DOM 树中display: none元素隐藏,不占着原来空间,不在 DOM 树中background-color: rgba(0,0,0,0.1)仅背景颜色透明,并不影响元素中的内容opacity: 0元素透明,连同其内容和子元素一起透明掉overflow: hidden内容超出部分隐藏,影响的是子元素五、实战应用场景场景1: 悬停透明度变化.card { opacity: 1; transition: opacity 0.3s; } .card:hover { opacity: 0.8; }场景2: 禁用状态.button:disabled { opacity: 0.5; cursor: not-allowed; }场景3: 加载状态.loading-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(255, 255, 255, 0.8); opacity: 0; transition: opacity 0.3s; } .loading-overlay.active { opacity: 1; }场景4: 图片淡入淡出.gallery-image { opacity: 0; transition: opacity 0.5s; } .gallery-image.loaded { opacity: 1; }场景5: 遮罩层.modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); opacity: 0; transition: opacity 0.3s; } .modal-overlay.active { opacity: 1; }六、opacity vs rgba区别对比特性opacityrgba()作用范围整个元素及其子元素仅背景颜色对子元素影响子元素也会变透明不影响子元素对文字影响文字也会变透明文字不受影响应用场景整体透明度调节背景透明度调节案例对比 文字和背景都变透明 文字不透明,仅背景变透明 七、性能优化1. 使用 transform 代替 opacity 动画/* ❌ 不推荐: opacity 动画在某些浏览器中性能较差 */ .element { transition: opacity 0.3s; } /* ✅ 推荐: 使用 will-change 提示浏览器 */ .element { will-change: opacity; transition: opacity 0.3s; }2. 避免频繁触发重绘/* ❌ 不推荐: 在 JavaScript 中频繁修改 opacity */ element.style.opacity = '0.5'; element.style.opacity = '0.6'; element.style.opacity = '0.7'; /* ✅ 推荐: 使用 class 切换 */ .element.faded { opacity: 0.5; } // JavaScript element.classList.add('faded');八、浏览器兼容性/* 旧版 IE */ .filter-box { opacity: 0.5; filter: alpha(opacity=50); /* IE8 及以下 */ }
文本溢出显示省略号单行文本和多行文本溢出隐藏并显示省略号 ... 在实际项目开发中经常使用。一、单行文本溢出显示省略号必要属性/* 文字不换行 */ white-space: nowrap; /* 超出显示省略号 */ text-overflow: ellipsis; /* 超出部分隐藏 */ overflow: hidden;案例演示 当文字的内容超容器的宽度时,会显示3个省略号 text-overflow 属性值属性值描述clip默认值,裁剪文本,不显示省略号ellipsis显示省略号 ...二、多行文本溢出显示省略号必要属性/* 超出部分隐藏 */ overflow: hidden; /* 超出部分显示省略号 */ text-overflow: ellipsis; /* 对象做为弹性盒子模型显示 */ display: -webkit-box; /* 块容器中的内容限制为指定的行数 */ -webkit-line-clamp: 2; /* 弹性盒子对象的子元素排列方式为竖排 */ -webkit-box-orient: vertical;案例演示 当文字的内容超容器的宽度时,会显示3个省略号当文字的内容超容器的宽度时, 重要注意事项⚠️ 只有当元素的高 = line-height 大小 × -webkit-line-clamp(指定行数)时,才能显示出正确的效果。/* ✅ 正确 */ p { width: 200px; height: 100px; /* 50px × 2 = 100px */ line-height: 50px; -webkit-line-clamp: 2; } /* ❌ 错误 */ p { width: 200px; height: 80px; /* 50px × 2 ≠ 80px,高度不够 */ line-height: 50px; -webkit-line-clamp: 2; }三、实战应用场景场景1: 文章标题.article-title { width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }场景2: 文章摘要.article-summary { width: 100%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; /* 显示3行 */ -webkit-box-orient: vertical; line-height: 1.6; max-height: calc(1.6em * 3); /* 确保高度正确 */ }场景3: 用户简介.user-bio { width: 300px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }场景4: 评论内容.comment-text { width: 100%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; }场景5: 卡片标题和描述 这是一个很长的卡片标题,超过宽度会显示省略号 这是卡片的描述内容,如果超过两行也会显示省略号,这样可以保持卡片的整齐美观。 四、兼容性问题1. 多行省略号兼容性多行文本省略号主要使用 -webkit- 前缀,在 WebKit 内核浏览器中支持良好。不支持多行省略号的浏览器:旧版 FirefoxIE某些移动端浏览器解决方案:/* 方案1: 使用 JavaScript */ .truncate-text { width: 200px; overflow: hidden; position: relative; } /* 方案2: 使用 line-clamp 属性(新标准) */ .truncate-text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; /* 新标准 */ line-clamp: 3; }2. 添加浏览器前缀/* 单行省略号 */ .text-overflow { -ms-text-overflow: ellipsis; /* IE */ -o-text-overflow: ellipsis; /* Opera */ text-overflow: ellipsis; }五、常见问题问题1: 单行省略号不显示可能原因:没有设置 overflow: hidden没有设置 white-space: nowrap元素宽度不够或未设置宽度解决方法:/* ✅ 完整的三个属性必须同时设置 */ .ellipsis { width: 200px; /* 或 max-width */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }问题2: 多行省略号不显示可能原因:高度计算不正确没有使用 -webkit- 前缀浏览器不支持解决方法:/* ✅ 确保高度正确 */ .multi-ellipsis { width: 200px; line-height: 1.5; max-height: calc(1.5em * 3); /* 3行的高度 */ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }问题3: 省略号显示但不换行可能原因: 多行省略号时忘记设置 display: -webkit-box解决方法:/* ✅ 必须设置 display: -webkit-box */ .multi-ellipsis { display: -webkit-box; /* 必须设置 */ -webkit-line-clamp: 3; -webkit-box-orient: vertical; }六、最佳实践1. 使用 CSS Mixin(预处理器)// 单行省略号 @mixin text-overflow { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } // 多行省略号 @mixin text-overflow-multiline($lines: 2) { display: -webkit-box; -webkit-line-clamp: $lines; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } // 使用 .title { @include text-overflow; width: 100%; } .description { @include text-overflow-multiline(3); line-height: 1.6; }2. 使用 CSS 自定义属性:root { --max-lines: 3; --line-height: 1.6; } .multi-ellipsis { display: -webkit-box; -webkit-line-clamp: var(--max-lines); -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; line-height: var(--line-height); max-height: calc(var(--line-height) * var(--max-lines)); }