【CSS知识点总结】CSS必会知识点以及常见需求实现总结

前言

这篇文章主要是总结目前学到的一些CSS相关的常见且重要知识点，方便自己以及大家学习~~~

CSS 核心

1. CSS 三大特性

1.1. 层叠性

• 样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式
• 样式不冲突，不会层叠

1.2. 继承性

• 子标签会继承父标签的某些样式
• 恰当地使用继承可以简化代码，降低CSS样式的复杂性

有继承性的属性

1. 字体系列属性

   • font-family：字体系列
   • font-weight：字体的粗细
   • font-size：字体的大小
   • font-style：字体的风格

2. 文本系列属性

   • text-indent：文本缩进
   • text-align：文本水平对齐
   • line-height：行高
   • word-spacing：单词之间的间距
   • letter-spacing：中文或者字母之间的间距
   • text-transform：控制文本大小写
   • color：文本颜色

3. 元素可见性：visibility

4. 列表布局属性：list-style（列表风格，包括list-style-type、list-style-image等）

5. 光标属性：cursor（光标显示为何种形态）

其他的都为不可继承属性

1.3. 优先级

• 当同一个元素指定多个选择器，就会有优先级的产生
  • 选择器相同，则执行层叠性；
  • 选择器不同，则根据选择器权重执行。
  • 选择器权重： !important(无穷大) > 行内样式(1000) > ID选择器(100) > 类/伪类(:)/属性([attr="val"])选择器(10) > 标签/伪元素(::)选择器(1) > 通配符(*)/后代/子(>)/兄弟(+)选择器/继承(0)
• 继承的权重为0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0
• 权重的叠加： 如果是复合选择器，则会有权重叠加，需要计算权重

2. 盒模型

• 盒模型由 content（内容）、padding（内边距）、border（边框）、margin（外边距） 组成
• 盒模型有 2 种：标准盒模型 和 IE 盒模型，分别是由 W3C 和 IExplore 制定的标准
• CSS3 中可以通过 box-sizing 来指定盒模型
  • box-sizing: content-box; 标准盒模型（默认），盒子的实际尺寸为 content + padding + border ， 此时我们设置的 width/height 就是 content 的宽/高
  • box-sizing: border-box; IE盒模型，盒子的实际尺寸为 width/height，我们设置的 width/height = content + padding + border，此时 padding 和 border 就不会撑大盒子了

3. 标准流（普通流/文档流）

html标签按照规定好的默认方式排列

• 块级元素 block
  • 特点：
    1. block 块级元素独占一行，垂直方向排列
    2. 宽度默认是容器（父级宽度）的 100%
    3. 高度、宽度、外边距以及内边距都可以控制
    4. 是一个容器及盒子，里面可以放行内（块）元素或者块级元素
  • 常用元素：div、p、h1~h6、ul、ol、dl、form、table 等
• 行内元素 inline
  • 特点：
    1. 行内元素会在同一行水平方向排列
    2. 默认宽度就是它本身内容的宽度
    3. 宽高设置是无效的；内边距都可以控制；外边距只可以设置水平方向的，垂直方向无效
    4. 行内元素只能容纳文本或其他行内元素
  • 常用元素：span、a、i、em 等
• 行内块元素 inline-block

  • 特点（同时具有 块级元素 和 行内元素的特点）：

    1. 行内块元素和相邻行内(块)元素在一行上，但是之间会有空白缝隙
    2. 默认宽度就是它本身内容的宽度
    3. 宽度、高度、外边距以及内边距都可以控制

  • 与块级元素、行内元素的区别：

    • 与块级元素相比，主要区别在在于行内块元素在元素之后不添加换行符，因此该元素可以位于其他元素旁边
    • 与行内元素相比，主要区别在于行内块元素可以有效设置宽度和高度

  • 常用元素：img、input、select、td 等

• 三者通过 display 切换

4. 浮动 float

有很多的布局效果，标准流没有办法完成，此时就可以利用浮动完成布局。因为浮动可以改变元素标签默认的排列方式。

浮动最典型的应用：可以让多个块级元素一行内排列显示。

4.1. 浮动特性

1. 浮动元素会脱离标准流（脱标）（最重要特性）

   • 脱离了标准普通流的控制（浮）移动到指定位置（动），俗称脱标。
   • 浮动的盒子不再保留原先的位置。

2. 浮动的元素会一行内显示并且元素顶部对齐

   注意: 浮动的元素是互相贴靠在一起的(不会有缝隙)，如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。

3. 浮动的元素会具有行内块元素的特性

   任何元素都可以浮动。不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性：

   • 如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定。
   • 浮动的盒子中间是没有缝隙的，是紧挨着一起的。

4.2 清除浮动

原因：由于父级盒子在很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为0，就会影响下面的标准流盒子。即: 1. 父级没高度; 2. 子盒子浮动了; 3. 影响下面布局了。

清除浮动本质：

• 清除浮动的本质是清除浮动元素脱离标准流造成的影响。
• 如果父盒子本身有高度，则不需要清除浮动。
• 清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了。

清除浮动的策略：闭合浮动。只让浮动在父盒子内部影响，不影响父盒子外面的其他盒子。

清除浮动float的方法：

1. 额外标签法（隔墙法），是 W3C 推荐的做法（不常用）。

   在最后一个浮动元素后面添加一个空的标签（如div、br等），添加清除浮动（clear:both）样式。

2. 开启BFC（如：给父级添加 overflow 属性）。

   可以给父级元素添加overflow属性，将其属性值设置为hidden | auto | scroll。

3. 父级添加 ::after 伪元素。

   ::after方式是额外标签法的升级版，给父元素添加如下的clearfix类。

   .clearfix::after {
       content: "";  /* 伪元素必须写的属性 */
       display: block;  /* 插入的元素必须是块级 */
       height: 0; /* 不要看见这个元素 */
       clear: both;  /* 核心代码 清除浮动 */
       visibility: hidden; /* 不要看见这个元素 */
   }
   /* 照顾低版本浏览器 */
   .clearfix {  /* IE6、7 专有 */
       *zoom: 1;
   }
   

4. 父级添加 ::before 和 ::after 双伪元素。

   给父元素添加如下的clearfix类。

   .clearfix::before, .clearfix::after { 
       content: ""; 
       display: table; /* 转换为块级元素并且一行显示 */
   }
   .clearfix::after { 
       clear: both; 
   }
   .clearfix { 
       *zoom: 1; 
   }
   

5. 定位position

定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。

定位 = 定位模式 + 边偏移

• 定位模式用于指定一个元素在文档中的定位方式。有: 静态、相对、绝对、固定、粘性五种定位模式。
• 边偏移则决定了该元素的最终位置。有: top、left、right、bottom 四种边偏移。

1. 静态定位 position: static;

   • 描述：静态定位是元素的默认定位方式，无定位的意思。
   • 特点：静态定位按照标准流特性摆放位置，它没有边偏移，且在布局中很少用到。

2. 相对定位 position: relative;

   • 描述：相对定位是元素在移动位置的时候，是相对于它原来的位置来说的。
   • 特点：
     • 它是相对于自己原来的位置来移动的。（移动位置的时候的参照点是自己原来的位置）
     • 原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。

3. 绝对定位 position: absolute;

   • 描述：绝对定位是元素在移动位置的时候，是相对于它祖先位置来说的。
   • 特点
     • 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（Document文档）。
     • 如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置。
     • 绝对定位不再占有原先的位置。

4. 固定定位 position: fixed;

   • 描述： 固定定位是元素固定于浏览器可视区的位置。
   • 主要使用场景：可以在浏览器页面滚动时元素的位置不会改变。
   • 特点：
     • 以浏览器的可视窗口为参照点移动元素。
     • 固定定位不再占有原先的位置。
   • 小技巧：固定到版心右侧。
     • 让固定定位的盒子 left: 50%;。走到浏览器可视区（也可以看做版心）的一半位置。
     • 让固定定位的盒子 margin-left: 版心宽度的一半距离。 多走版心宽度的一半位置。就可以让固定定位的盒子贴着版心右侧对齐了。

5. 粘性定位 position: sticky;

   • 描述：粘性定位可以被认为是相对定位和固定定位的混合。
   • 特点：
     • 以浏览器的可视窗口为参照点移动元素（固定定位特点）。
     • 粘性定位占有原先的位置（相对定位特点）。
     • 必须添加 top、left、right、bottom 其中一个才有效。
   • 注意：跟页面滚动搭配使用。兼容性较差，IE不支持。

6. 子绝父相

   • 描述：定位中最常用的一种方式，即子级是绝对定位的话，父级要用相对定位。
   • 为什么（它的由来）？
     • 子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。
     • 父盒子需要加定位限制子盒子在父盒子内显示。
     • 父盒子布局时，需要占有位置，因此父亲只能是相对定位。
   • 总结: 因为父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位。

6. 弹性框布局 flex

• 弹性框布局模块，可以更轻松地设计灵活的响应式布局结构，而无需使用浮动或定位。
• 影响:
  1. 子元素默认横向排列。
  2. 行内元素，变成了块级元素。
  3. 只有一个元素的时候，margin: auto; 自动水平垂直居中。
• flex 容器属性：
  • flex-direction 属性定义容器要在哪个方向上堆叠flex 项目，设置后的方向为主轴
    • row 值水平堆叠 flex 项目（从左到右）（默认），主轴为水平向右，侧轴为竖直向下
    • column 值设置垂直堆叠 flex 项目（从上到下），主轴为竖直向下，侧轴为水平向右
  • flex-wrap 属性规定是否应该对 flex 项目换行
    • nowrap 值规定将不对 flex 项目换行（默认）
    • wrap 值规定 flex 项目将在必要时进行换行
    • wrap-reverse 值规定如有必要，弹性项目将以相反的顺序换行
  • flex-flow 属性是用于同时设置 flex-direction、flex-wrap 属性的简写属性
  • justify-content 属性用于主轴对齐 flex 项目
    • center 值将 flex 项目在容器的中心对齐
    • flex-start（默认）值将 flex 项目在容器的开头对齐
    • flex-end 值将 flex 项目在容器的末端对齐
    • space-around 值在 flex 项目周围留相同的空格
    • space-between 值在 flex 项目之间留有相同的空格
  • align-items 属性用于侧轴对齐单行 flex 项目
    • center
    • flex-start
    • flex-end
    • stretch（默认）值拉伸 flex 项目以填充容器
    • baseline 值使 flex 项目基线对齐
  • align-content 属性用于侧轴对齐多行 flex 项目
    • center
    • flex-start
    • flex-end
    • stretch（默认）
    • space-around
    • space-between
• flex 容器的直接子元素会自动成为弹性（flex）项目，弹性 flex 项目的属性：
  • order 属性规定 flex 项目的顺序。值必须是数字，默认为 0
  • flex-grow 属性规定某个flex 项目相对于其余flex 项目将增长多少。该值必须是数字，默认为 0
  • flex-shrink 属性规定某个flex 项目相对于其余flex 项目将收缩多少。该值必须是数字，默认为 0
  • flex-basis 属性规定 flex 项目的初始长度。定义在分配多余空间之前，项目占据的主轴空间，浏览器根据此属性计算主轴是否有多余空间， 默认值为auto，即项目原本大小；
  • flex 属性是 flex-grow、flex-shrink、flex-basis 属性的简写属性
    • flex: 增长 缩减 基础; 可选值有：
      • initial, "flex: 0 1 auto", 默认值。
      • auto, "flex: 1 1 auto"
      • none, "flex: 0 0 auto"，弹性元素没有弹性
    • flex: 1; 等价于 flex: 1 1 0%; 不等于 flex: 1 1 auto;
    • flex: 0%;（长度或百分比）等价于 flex: 1 1 0%;
  • align-self 属性规定弹性容器内所选项目的对齐方式，属性将覆盖容器的align-items 属性所设置的默认对齐方式
    • 有时我们希望伸缩容器内部某个元素在侧轴上的排列方式有所差异。此时就不能使用align-items，因为align-items作用于整体。我们希望作用于部分。这就是align-self的发挥场地。
    • 可取值：align-self:auto|stretch|center|flex-start|flex-end|baseline|initial|inherit;
• 总结
  • flex布局是 CSS3 新增的一种布局方式，我们可以通过将一个元素的display属性值设置为flex从而使它成为一个flex容器，它的所有子元素都会成为它的项目。
  • 一个容器默认有两条轴，一个是水平的主轴，一个是与主轴垂直的交叉轴(侧轴)。我们可以使用flex-direction来指定主轴的方向。
  • 我们可以使用justify-content来指定元素在主轴上的排列方式，使用align-items来指定元素在交叉轴(侧轴)上的排列方式。还可以使用flex-wrap来规定当一行排列不下时的换行方式。
  • 对于容器中的项目，我们可以使用order属性来指定项目的排列顺序，还可以使用flex-grow来指定当排列空间有剩余时，项目的放大比例。还可以使用flex-shrink来指定当排列空间不足时，项目的缩小比例。

7. 网格布局 grid

• CSS 网格布局模块（CSS Grid Layout Module）提供了带有行和列的基于网格的布局系统，它使网页设计变得更加容易，而无需使用浮动和定位。
• display: grid | inline-grid：通过设置元素的display属性为grid | inline-grid时，它就会成为网格容器，网格容器的所有直接子元素将自动成为网格项目。
• 网格容器和网格项目与弹性容器和弹性项目一样有许多属性，具体可以参考w3school网址。

8. display:none 和 visibility: hidden 以及 opacity: 0 的区别

参考文章链接，以下将从 DOM结构、事件监听、性能、继承 与 transition 这五个方面来分析：

1. display: none;

   • DOM结构：元素完全从渲染树中消失，渲染时不会占据任何空间。
   • 事件监听：不会响应绑定的监听事件。
   • 性能：动态修改此属性时会引起重排，性能较差。
   • 继承：不会被子元素继承。由于元素从渲染树消失，造成子孙节点消失，即使修改子孙节点属性子孙节点也无法显示，毕竟子类也不会被渲染。
   • transition：不支持display

2. visibility: hidden;

   • DOM结构：元素不会从渲染树中消失，元素依然占据空间，只是内容不可见。
   • 事件监听：不会响应绑定的监听事件
   • 性能：动态修改此属性会引起重绘，性能较高；
   • 继承：会被子元素继承，子元素可以通过设置 visibility: visible; 来取消隐藏。
   • transition：支持visibility，设置visibility 会立即显示；设置hidden 隐藏时会延时，不会渐变。

3. opacity: 0;

   • DOM结构：元素不会从渲染树中消失，元素依然占据空间，只是内容不可见。
   • 事件监听：元素依然能触发已经绑定的事件。
   • 性能：提升为合成层，动态修改此属性不会引起重绘，性能较高。
   • 继承：会被子元素继承，但子元素并不能通过设置 opacity: 1; 来取消隐藏。这是因为一个元素其自身的opacity最后展现的效果，应该是是其 父元素的opacity * 其自身的opacity 。
   • transition：支持opacity，设置opacity 可以延时显示和隐藏。

9. BFC

概念：块级格式化上下文（Block Formatting Content），开启 BFC 该元素会变成一个独立的布局区域，内部的样式不会影响外部的元素。

开启 BFC 的方式

• 浮动元素：float 除 none 以外的值
• 绝对定位元素：position (absolute、fixed)
• display 为 inline-block、table-cell、flex
• overflow 除了 visible 以外的值 (hidden、auto、scroll)

BFC 的规则

• BFC就是一个块级元素，块级元素会在垂直方向一个接一个的排列
• BFC就是页面中的一个隔离的独立容器，容器里的标签不会影响到外部标签
• 垂直方向的距离由margin决定， 属于同一个BFC的两个相邻的标签外边距会发生重叠
• 计算BFC的高度时，浮动元素也参与计算

应用场景

• 解决高度塌陷
• 清除浮动
• 外边距的重叠（合并）

常见需求

1. 实现水平垂直居中的几种方法

在页面布局中，经常会碰到想要将盒子内的元素水平垂直居中的需求，那么有哪几种方法可以实现它呢？

1.1. 行内元素水平垂直居中

<div class="outdiv">
    <span>水平垂直居中</span>
</div>

实现方式：

.outdiv {
    width: 400px;
    height: 200px;
    /* 盒子内的行内元素水平居中 */
    text-align: center;
    /* 盒子内的文本垂直居中: 将行高设置为盒子的高度即可 */
    line-height: 200px;
}

1.2. 行内块元素水平垂直居中

如：想要将下面的图片居中对齐

<div class="outdiv">
    <img src='xxx.png' />  这是文字
</div>

实现方式：

.outdiv {
    width: 400px;
    height: 200px;
    /* 盒子内的行内块元素水平居中 */
    text-align: center;
    /* 盒子内的文本垂直居中: 将行高设置为盒子的高度即可 */
    line-height: 200px;
}
img {
    /* 设置图片和文本垂直居中对齐，从而达到图片也能垂直居中 */
    vertical-algin: middle;
}

vertical-align 属性应用场景：经常用于设置图片或者表单（行内块元素）和文字垂直对齐。

1.3. 块级元素水平垂直居中

<div class="outdiv">
    <div>水平垂直居中</div>
</div>

此种情况的实现方法又可以分为以下三种：

1. 使用定位position的方式

   .outdiv {
       /* 子绝父相 */
       position: relative;
       width: 400px;
       height: 200px;
   }
   /* 绝对定位的盒子水平居中和垂直居中 */
   .outdiv div {
       position: absolute;
       height: 100px;
       width: 100px;
       margin: 0;
       /* 水平居中:
           1. left走50%，父容器宽度的一半
           2. margin-left 负值，往左边走 自己盒子宽度的一半
       */
       left: 50%;
       margin-left: -50px;
       /* 垂直居中:
           1. top走50%，父容器高度的一半
           2. margin-top 负值，往上边走 自己盒子高度的一半
       */
       top: 50%;
       margin-top: -50px;
       /* 
           transform: translate(-50%, -50%); 盒子向X和Y方向走自身宽度和高度的一半
           等价于 margin-left: -50px; 和 margin-top: -100px; 这两行
           这种方式可以不用计算偏移具体的像素值，也可以不指定自身的宽高
       */
   }
   

2. 使用弹性布局flex的方式

   .outdiv {
       display: flex;  /* 将父元素变为弹性容器 */
       width: 400px; 
       height: 200px;
       /* 方式一： */
       /* 主轴方向（默认水平）居中对齐 弹性容器内的弹性项目 */
       /* justify-content: center; */
       /* 侧轴方向（默认垂直）居中对齐 弹性容器内的弹性项目 */
       /* align-items: center; */
   }
   /* 弹性容器内的所有直接子元素将自动成为弹性项目 */
   .outdiv div {
       width: 100px;
       height: 100px;
       /* 方式二：只有一个元素时 */
       /* 水平垂直居中 */
       margin: auto;
   }
   

3. 使用网格布局grid的方式

   .outdiv {
       display: grid;  /* 将父元素变为网格容器 */
       width: 400px;
       height: 200px;
       /* 方式一： */
       /* 水平居中对齐 网格容器内的网格项目 */
       /* justify-content: center; */
       /* 垂直居中对齐 网格容器内的网格项目 */
       /* align-items: center; */
   }
   /* 网格容器内的所有直接子元素将自动成为网格项目 */
   .outdiv div {
       width: 100px;
       height: 100px;
       /* 方式二：只有一个元素时 */
       /* 水平垂直居中 */
       margin: auto;
   }
   

实现效果图

2. 解决外边距合并问题的方法

使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。

1. 为父元素定义边框。
2. 为父元素定义内边距。
3. 为父元素添加overflow: hidden。

.demo1 {
    width: 500px;
    height: 200px;
    margin-top: 20px;
    background-color: pink;
    /* 解决外边距合并问题:下面任选一种 */
    /* 方案一: 使用border */
    border: 1px solid transparent;
    /* 方案二: 使用padding */
    /* padding: 1px; */
    /* 方案三: 使用overflow */
    /* overflow: hidden; */
}
.demo2 {
    width: 200px;
    height: 100px;
    margin-top: 10px;
    background-color: gray;
}

3. CSS 实现三角

原理：设置盒子的 width/height 为0，设置边框 border 的宽度和颜色

思考：在具体实现之前，可以先思考一下下面这个样式会得到什么样的结果？

div {
    width: 0;
    height: 0;
    border-top: 50px solid red;
    border-right: 50px solid green;
    border-bottom: 50px solid blue;
    border-left: 50px solid black;
}

实现效果：

3.1. 普通三角形

只需要将上面代码中的任意三边颜色设置为透明即可

div {
    width: 0;
    height: 0;
    /* 兼容性问题，照顾低版本浏览器 */
    line-height: 0;
    font-size: 0;
    /* 将其中一边边框设置颜色，其余三边变成透明色 */
    border: 50px solid transparent;
    border-bottom-color: red;
}

实现效果图

3.2. 直角三角形

直接在上面三角形的基础上再设置相邻一条边框的颜色，如在上面的基础上设置 border-right-color: red;

div {
    width: 0;
    height: 0;
    border-width: 50px;
    border-style: solid;
    border-color: transparent red red transparent;
}

实现效果图

如果想设置两直角边不等的三角形的话，则可以修改各个方向的 border-width 属性值，如下：

div {
    width: 0;
    height: 0;
    /* 设置两个相邻边框的宽度，然后再为其中一个添加颜色，其余三边变成透明色 */
    border-width: 100px 50px 0 0;
    border-style: solid;
    border-color: transparent red transparent transparent;
}

实现效果图

4. CSS 实现梯形

4.1. 普通梯形

这里其实就是在 CSS 实现三角的基础上修改一行代码即可 —— 修改盒子的宽度或高度。

注意：

• 如果只设置宽度，则需要设置上或下边框的颜色为不透明，其他三边设置为透明色；
• 如果只设置高度，则需要设置左或右边框的颜色为不透明，其他三边设置为透明色。
• 如果同时设置了宽度和高度，则任意设置一边的边框颜色为不透明，其他三边设置为透明色。

div {
    /* 加个宽度，就能将三角形撑开，变成梯形 */
    width: 100px;
    height: 0;
    border: 50px solid transparent;
    border-bottom-color: red;
}

实现效果图

4.2. 直角梯形

对于直角梯形，与直角三角形一样类似操作，修改各个方向的 border-width 属性值即可

div {
    width: 100px;
    height: 0;
    /* 把其余三边变成透明色，修改宽度 */
    border-width: 0 40px 60px 0;
    border-style: solid;
    border-color: transparent transparent red transparent;
}

实现效果图

5. 溢出文字显示省略号

5.1. 单行文本溢出显示省略号

1. 使用 white-space: nowrap; 属性，即如果文字一行显示不开也必须强制一行内显示。
2. 使用 overflow: hidden; 属性，即将溢出的部分隐藏起来。
3. 使用 text-overflow: ellipsis; 属性，即文字溢出时用省略号来显示。

div {
    width: 200px;
    /* 1. 先强制一行内显示文本，不换行 */
    white-space: nowrap;
    /* 2. 盒子溢出部分隐藏 */
    overflow: hidden;
    /* 3. 文字溢出部分用省略号来显示 */
    text-overflow: ellipsis;
}

5.2. 多行文本溢出控制最后一行显示省略号效果

在WebKit浏览器或移动端（绝大部分是 WebKit 内核的浏览器）的页面实现比较简单，可以直接使用 WebKit 的 CSS 扩展属性( WebKit 是私有属性)-webkit-line-clamp。

注意：这是一个不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。

div {
    /* 必须结合的属性，将对象作为弹性伸缩盒子模型显示 */
    display: -webkit-box;
    width: 200px;
    /* -webkit-line-clamp 用来限制在一个块元素显示的文本的行数 */
    -webkit-line-clamp: 2;
    /* 必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式  */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

6. 三栏布局

可以参考这篇文章实现三栏布局的7种方法

结尾

这篇文章目前只总结了一部分知识点，后续还会接着补充总结一些其他CSS相关且比较重要的知识点...

如有问题，请指正我修改。欢迎评论交流！！！觉得不错请给个赞👍吧😁