【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】