资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/《css揭秘》下（伪元素，文字背景，垂直居中技巧，文字环绕）

《css揭秘》下（伪元素，文字背景，垂直居中技巧，文字环绕）

longmon / 1204人阅读

摘要：本篇主要记录揭秘一书中后面几章的常用技巧。文字环绕的重点在于即文字围绕着路径来显示。

本篇主要记录《CSS3揭秘》一书中后面几章的常用技巧。

1、伪元素换行

先看下HTML代码，如下

</>复制代码 
  2.     
  3.         当爱的故事剩听说
  4.         我找不到你单纯的面孔
  5.

默认显示效果：

一般情况下，我们喜欢直接在第一个span元素后面加个换行符
，但是它对于语义来说并不友好,或者将第一个span设置成块元素。这里说的换行技巧是使用 伪元素+字符 来实现：

</>复制代码 
  1. .text {
  2.     span:first-child:after{
  3.         display: block;
  4.         content: "A"
  5.     }
  6. }

2、文字条纹背景

之前有遇到这样一个场景，一个标签，里面的数据是后台传入的数据源（字数不定），要求自动换行，且有条纹背景，当时首先想到的是使用js+css的方式来实现。但是现在想来css3也完全可以实现的。
原始代码：

</>复制代码 
  3.     When I was young,
  4.     my homesickness was a small stamp,
  5.     I was here,
  6.     my mother was there.
  7.     After growing up,
  8.     my homesickness was a narrow ticket,
  9.     I was here,
  10.     my bride was there.

默认显示：

效果分析：
我们现在想给文字加入条纹背景，想到我们在上篇提到的条纹效果没？这里也是一样的，直接上代码，2行代码搞定，so amazing!

</>复制代码 
  1. .demo{
  2.     background-image: linear-gradient(rgba(255, 0, 0, 0.24) 50%, rgba(0, 0, 255, 0.25) 0);
  3.     background-size: 100% 60px;
  4. }

3、垂直居中新技巧

垂直居中是CSS中的老话题，在之前我们可以采用很多种方式来处理包括文字居中，块状元素居中，定宽定高居中，不定宽不定高的居中。。。常规的解决方法有：

  • position+margin方法
  • line-height方法
  • table-cell方法

这里不再赘述，这边要汇总的是属于css3的新方法。
案例演示：要求box（知道宽高）在视图窗口居中，item（不知宽高）在box视口居中，基本样式如下：

</>复制代码 
  2.     
  3.         幸福就像穿鞋子 不舒服的 都只是脚镣
  4.         倒不如去赤脚奔跑
  5.

position + translate

</>复制代码 
  1. .box {
  2.     position: relative;
  3.     margin: 0 auto;
  4.     top: 50%;
  5.     transform: translateY(-50%);
  6.     .item {
  7.         position: absolute;
  8.         left: 50%;
  9.         top: 50%;
  10.         transform: translate(-50%, -50%); // 表示向左移动自身宽的一半，向上移动自身高的一半
  11.     }
  12. }

先通过定位的方式，将元素向左边和顶部移动50%，这里的50%是相对于relative的父元素的，然后使用 translate(-50%,-50%) 移动自身宽高的50%，没错，这里的重点就是，translate移动的是自身的宽高，不管是否知道自身的宽高，是不是比margin更灵活了？

vw + vh

vm和vh是一种css3的新的视窗单位，相对的不是父节点而是由视窗大小来决定的。它可以用户相对于视口做居中处理以及对body元素设置宽高（无需再设置根节点），适用于做一些响应式的布局。

  • vm：视窗宽度的百分百（1表示1%）
  • vh：视窗高度的百分百（1表示1%）
  • vmin：当前 vw 和 vh 中较小的一个值
  • vmax：当前 vw 和 vh 中较大的一个值

因此可以将box的代码改为：

</>复制代码 
  1. .box{
  2.     margin: 50vh auto 0;
  3.     transform: translateY(-50%);
  4. }

flex

其实最好的布局方式就是使用flex啦！熟读一下阮大神的 flex教程 就可以对各个属性一目了然了~这里，我们可以把box设置成容器（display:flex），再将 justify-content 和 align-items 设置成 center 就可以使item垂直居中了。

</>复制代码 
  1.     .box{
  2.         display: flex;
  3.         justify-content: center;
  4.         align-items: center;
  5.     }

最终方案：上面三种方法，多带带使用都可以达到垂直居中的效果，我们也可以三合一来使用，达到代码最简，即仅仅对box进行样式设置：

</>复制代码 
  1. .box{
  2.     margin: 45vh auto 0;
  3.     transform: translateY(-50%);
  4.     display: flex;
  5.     justify-content: center;
  6.     align-items: center;
  7. }

最终效果：

4、文字环绕效果

先上个效果图：

华丽丽的大爱心，再上下代码，是不是一脸萌？

</>复制代码 
  2.     
  3.     
  4.         
  5.             you feel lonely Do you feel blue Alright too Leaves dancing in the wind No brakes in your broken world Don"t prey happy~
  6.         
  7.

path

path元素是SVG中最强大的一个，它可以绘制很多不同的形状。path元素的形状是通过属性d来定义的，属性d的值是一个“命令+参数”的序列，然后就写命令。参数说明：

方法 说明
M 移动到的点的x,y坐标
L L命令将会在当前位置和新位置（L前面画笔所在的点）之间画一条线段。
H 绘制平行线
V 绘制垂直线
Z 从当前点画一条直线到路径的起点（回到起点）
A 绘制弧线
Q 二次贝塞尔曲线 Q x1 y1, x y
C 三次贝塞尔曲线 C x1 y1, x2 y2, x y

画不出来也是没关系的，其实现在线上有很多的图形path生成工具，可以帮助我们快速生成path，但是我们需要知道其中字母表示的意思。比如上面的爱心，就是先移动到坐标点(m)，然后绘制2条曲线(c)，最后回到原点(z)。

textPath

文字环绕的重点在于textPath即文字围绕着路径来显示。定义完path后使用href引用即可。是不是很简单了~

GPU云服务器 云服务器 文字垂直居中 html使文字垂直居中 文字环绕图片 文字垂直滚动

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1614.html

相关文章

  • CSS实现模拟float: center文字左右环绕图片的效果

    摘要：什么是文字左右环绕图片就是下图的效果效果的代码可以点击这里查看在中，并没有这种设置，但是我们可以通过一些小技巧来模拟出类似的效果。下面，就要使用一些技巧来实现左右环绕的文字效果了。 什么是文字左右环绕图片？就是下图的效果：showImg(https://segmentfault.com/img/bVbr3Wt?w=627&h=461); 效果的CSS代码可以点击这里查看 在CSS中，并...

    ShevaKuilin 评论0 收藏0

  • CSS实现模拟float: center文字左右环绕图片的效果

    摘要：什么是文字左右环绕图片就是下图的效果效果的代码可以点击这里查看在中，并没有这种设置，但是我们可以通过一些小技巧来模拟出类似的效果。下面，就要使用一些技巧来实现左右环绕的文字效果了。 什么是文字左右环绕图片？就是下图的效果：showImg(https://segmentfault.com/img/bVbr3Wt?w=627&h=461); 效果的CSS代码可以点击这里查看 在CSS中，并...

    you_De 评论0 收藏0

  • css-secrets (css揭秘) 知识点目录，值得深入学习！

    摘要：通过模糊来弱化背景和滚动提示使用两层背景，控制交互式的图片对比控件范围输入控件方式书中有很详细的解答提醒自己要回顾。 1. 第一章 css编码技巧 第二章 边框与背景 半透明边框 hsla 多重边框 box-shadow outline 灵活的背景定位 background-position css3该属性可以指定偏移量，////bac...

    DevWiki 评论0 收藏0

  • 《css世界》- 详细重点笔记与技巧

    摘要：概述在世界这本书中有一些黑魔法给列举出来，在结合自己的理解。篇幅有点长，希望大家能够坚持看完，一定会有收获以下是摘自每章内一些重要的概念与技巧。 概述 在《css世界》这本书中有一些黑魔法给列举出来，在结合自己的理解。篇幅有点长，希望大家能够坚持看完，一定会有收获！！！以下是摘自每章内一些重要的概念与技巧。其中有解决图片间隙的问题、小图标与文字居中问题等; ps: 特别是 line-h...

    MasonEast 评论0 收藏0

  • 《css世界》- 详细重点笔记与技巧

    摘要：概述在世界这本书中有一些黑魔法给列举出来，在结合自己的理解。篇幅有点长，希望大家能够坚持看完，一定会有收获以下是摘自每章内一些重要的概念与技巧。 概述 在《css世界》这本书中有一些黑魔法给列举出来，在结合自己的理解。篇幅有点长，希望大家能够坚持看完，一定会有收获！！！以下是摘自每章内一些重要的概念与技巧。其中有解决图片间隙的问题、小图标与文字居中问题等; ps: 特别是 line-h...

    赵连江 评论0 收藏0

发表评论

登陆后可评论

0条评论

longmon

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<