【H2O2|全栈】关于CSS（9）CSS3扩充了哪些新鲜的东西？（二）

目录

CSS3 入门

前言

准备工作

伪元素补充

:before

:after 

文本溢出属性

转换效果

预告和回顾

后话

---

CSS3 入门

前言

本系列博客主要介绍 CSS 相关的知识点。

这一期主要介绍以下几个 CSS3 的知识点：

• 伪元素补充
• 文本溢出属性
• 转换 

没有基础的朋友，最好不要从这里开始看，否则有些地方可能会看不明白哦~

准备工作

软件：【参考版本】Visual Studio Code

插件（扩展包）：Open in browser, Live Preview, Live Server

浏览器版本：Chrome

系统版本：Win10/11/ 其他非 Windows 版本

* 我的电脑是 Win10 的版本，仅供参考 *

伪元素补充

本期主要补充两个伪元素，:before和:after。

:before

用于在元素之前插入内容，相当于在原来的元素的前面添加了一个子元素。

伪元素的属性与元素基本相同，但是它有一个必须的属性：

:before {content:"需要插入的内容（文本）";}

如果想插入一个图片或者链接，content 属性还有 url()这一属性值。

需要注意的是，在浏览器检查的时候，伪元素的检查结果往往就是 :before 等等，而不会像其他元素一样占用自己的位置。所以伪元素也可以看做一种显示的效果。

比如，对于如下的 CSS 代码：

.box {background: green;}
.box:before {
		content: "在元素前面插入内容";
		display: block;
		width: 300px;
		height: 200px;
		background: skyblue;
}
.box:after {content: "2694";}

在浏览器中显示的效果如下：

但是在浏览器中检查，可以看到两个伪元素只有名称，不占位置：

:after 

:after 与:before 的用法完全相同，不再重复说了。

由于伪元素不占位置的特性，我们也可以使用它来 清除浮动。

比如，在导航栏中我们常常需要使用到左浮动的 ul，我们当然可以使用设置了清除浮动的 clear 盒子，但是现在我们可以用伪元素统一设置清除：

ul:after{
	display: block;
	content: "";
	clear: both;
}

注意，ul 最好换成需要使用浮动的具体的 ul 的类名或统一设置的某个类名，毕竟不是所有 ul 都在浮动嘛。

文本溢出属性

文本溢出属性用于设置当文本长度超出指定的区域范围时，超出的部分显示的样式。

具体而言，有下面几种属性值：

属性值	作用	特殊性
initial	设置为默认值	/
clip	裁剪文本	/
ellipsis	显示省略号  代替被修剪的文本	常用的文本处理方式
string	使用特定的字符串代表被修剪的文本	只针对火狐浏览器

特别的，我们来展开讲一下常用的 ellipsis。

对于只需要显示一行的长文本，设置如下的 CSS 代码以实现末尾省略：

 .your-class{
 	white-space: nowrap;/* 文本不换行 */
 	overflow: hidden;/* 溢出隐藏 */
 	text-overflow: ellipsis;/* 文本溢出部分被省略号代替 */
 }

对于需要显示指定行数，然后再进行省略的文本，则需要要求浏览器支持webkit 内核，我们使用的 edge 和 Chrome 浏览器都是支持该内核的。

 .your-class{
 	width: 140px;
 	height: 65px;
 	overflow: hidden;/* 溢出隐藏 */
 	display: -webkit-box;/* 兼容到使用 webkit 内核的浏览器 */
 	-webkit-line-clamp: 3;/* 显示的最大行数 */
 	-webkit-box-orient: vertical;/* 设置垂直方向上排列 */
 	text-overflow: ellipsis;/* 文本溢出部分被省略号代替 */
 }

对于溢出的单行省略、超出裁剪和多行省略，效果如下：

转换效果

转换 transform，可以为元素提供 2D 或 3D 变换效果。具体而言，有下面几种变换方式：
旋转：
  rotate()：定义 2D 的旋转  单位 deg
  rotateX()：沿 X 轴旋转
  rotateY()：沿 Y 轴旋转
  rotateZ()：沿 Z 轴旋转
  rotate3d(x,y,z,deg)：定义 3D 的旋转 0/1,0/1,0/1, 角度
缩放：
  scale() 定义 2D 的缩放
  scaleX() 沿着 X 轴的缩放
  scaleY() 沿着 Y 轴的缩放
  scaleZ() 沿着 Z 轴的缩放
  scale3d(x,y,z) 定义 3D 的缩放
移动：
  translate()  定义 2D 的移动
  translateX()  沿着 X 轴移动
  translateY()  沿着 Y 轴移动
  translateZ()  沿着 Z 轴移动
  translate3d()  定义 3D 的移动
倾斜 / 斜切
  skew()：定义 2D 的倾斜
  skewX()：沿着 X 轴倾斜
  skewY()：沿着 Y 轴倾斜

此外，还可以用 transform-origin 属性改变转换元素的位置 / 轴，可以分别设置 x，y，z 三个轴上的转换起始位置。
  x：left right center px %
  y：top bottom center px %
  z：px

预告和回顾

对网页布局和制作感兴趣的朋友，可以看下面的 CSS 专栏，里面有很多讲解详尽的案例，当前为第九期：

专栏 | CSS 入门http://t.csdnimg.cn/4bvCJ当然，也欢迎对全栈项目感兴趣的朋友查看我的其他专栏。

后话

在全栈领域，博主也只不过是一个普通的萌新而已。本系列的博客主要是记录一下自己学习的一些经历，然后把自己领悟到的一些东西总结一下，分享给大家。

文章全篇的操作过程都是笔者亲自操作完成的，一些定义性的文字加入了笔者自己的很多理解在里面，所以仅供参考。如果有说的不对的地方，还请谅解。

== 期待与你在下一期博客中再次相遇 ==

——已经缺氧的【H2O2】