带有html的css（层叠样式表）的发展令人难以置信。最近引入了很多功能，例如flexbox，css grid和css自定义属性。
它的不断发展和巨大的潜力吸引了开发人员尝试新的css技术并超越了其功能范围。毫无疑问，html 5和css3技术的结合是一个杀手er。
难怪一个执行良好的css计划几乎可以控制设计的任何方面并带来更好的用户体验，这是非常必要的。毕竟，访问者通过笔记本电脑，台式机，平板电脑或任何其他媒体查看您的网站时，会有某些期望。
但是css技术有哪些发展趋势？当我们谈论设计一个有吸引力的用户友好型网站时，这不是一个显而易见的问题吗？
这就是为什么我们提出一些新的css技术和技巧来掌握您的web设计技能的原因。每篇文章都包含一些说明和示例代码片段。
因此，让我们直接开始吧！
1.与flexbox垂直对齐早期的开发人员过去在对齐文本或任何其他元素垂直居中时遇到很多困难。但是现在，在引入了新的css3规范flexbox之后，事情变得更加容易了。
属性display：flex为用户提供了一种轻松的方式来使其居中对齐任何文本或元素。这是示例代码！
html：
1 <div?class=align-vertically>
2 vertically centered!
3 </div>
css：
1 .align-vertically {
2 background:?#ffa500;
3 color: #hhh;
4 display: flex;
5 align-items:?center;
6 height:?200px;
7 }
在上面的css代码中，display：flex描述了元素的flexbox布局，而align-items：center;?负责文本的垂直居中。
结果：
2.响应式css网格不要使网格成为例外，也要使其具有响应能力，就像设计中的其他所有事物一样。
有多种方法可以使您的网格以css grid响应。使用它的最好的部分是，无论设备大小如何，您都可以创建一个更灵活的网格，以提供所需的外观。
除此之外，css网格还允许您使用不相等和相等的列大小。这是一项很棒的技术，其中包含各种选项，这些选项使用户可以自由控制自己的设计。
您可以使用各种断点，多个尺寸的高度以及其他位置，如下例所示。
html：
1 <div?class=grid>
2 <div?class=grid-item></div>
3 <div?class=grid-item></div>
4 <div?class=grid-item></div>
5 <div?class=grid-item></div>
6 <div?class=grid-item></div>
7 <div?class=grid-item></div>
8 <div?class=grid-item></div>
9 <div?class=grid-item></div>
10 <div?class=grid-item></div>
11 <div?class=grid-item></div>
12 <div?class=grid-item></div>
13 <div?class=grid-item></div>
14 <div?class=grid-item></div>
15 <div?class=grid-item></div>
16 <div?class=grid-item></div>
17 <div?class=grid-item></div>
18 <div?class=grid-item></div>
19 <div?class=grid-item></div>
20 <div?class=grid-item></div>
21 <div?class=grid-item></div>
22 <div?class=grid-item></div>
23 <div?class=grid-item></div>
24 <div?class=grid-item></div>
25 <div?class=grid-item></div>
26 <div?class=grid-item></div>
27 <div?class=grid-item></div>
28 <div?class=grid-item></div>
29 <div?class=grid-item></div>
30 <div?class=grid-item></div>
31 <div?class=grid-item></div>
32 <div?class=grid-item></div>
33 <div?class=grid-item></div>
34 <div?class=grid-item></div>
35 <div?class=grid-item></div>
36 <div?class=grid-item></div>
37 <div?class=grid-item></div>
38 </div>
css：
1 .grid
2 ?{
3 display: grid;
4 grid-template-rows:?repeat(5,?1fr);
5 grid-auto-columns: calc((100vh -?3em) /?4);
6 grid-auto-flow: column;
7 grid-gap:?1em;
8 height:?100vh;
9 }
10 .grid-item:nth-child(3n)
11 ?{
12 background-color:?purple;
13 }
14 .grid-item:nth-child(3n +?2)
15 {
16 background-color: pink;
17 }
上面的css代码中使用的小数单位（fr）是根据您的准则分隔开阔空间的灵活单位。每个fr语句均用于该列，然后您可以将这些间隙加起来并准备好网格。
结果：
3.文字动画您可能已经使用css创建了背景动画，但是现在它还影响了用户与网站的文本元素进行交互和互动的方式。从悬停调整到使文字漂浮在空中，ccs3使其成为可能。
没有太多吸引人的元素来吸引用户的网站可以充分利用此特征。这是一个小例子。
html：
<div class=menu>
<ul class=menu-list data-offset=10>
<li class=menu-list-item data-offset=20 onclick>
live
<span class=mask><span>live</span></span>
<span class=mask><span>live</span></span>
</li>
<li class=menu-list-item data-offset=16 onclick>
laugh
<span class=mask><span>laugh</span></span>
<span class=mask><span>laugh</span></span>
</li>
<li class=menu-list-item data-offset=12 onclick>
love
<span class=m