以下介绍我开发过程中，发现的一些常用且好用的CSS3新特性，能给开发带来更多便利。

@font-face和animate就不说了。

  1. position: sticky

sticky 英文字面意思是粘，粘贴，所以姑且称之为粘性定位。下面就来了解下这个处于实验性的取值的具体功能及实用场景。

这是一个结合了 position:relative 和 position:fixed 两种定位功能于一体的特殊定位，适用于一些特殊场景。

举个例子：

html代码：

<div class="container">
<div class="sticky-box">内容1</div>
<div class="sticky-box">内容2</div>
<div class="sticky-box">内容3</div>
<div class="sticky-box">内容4</div>
</div>

css代码：

.container {
background: #eee;
width: 600px;
height: 1000px;
margin: 0 auto;
}

.sticky-box {
position: -webkit-sticky;
position: sticky;
top: 0px;
height: 60px;
margin-bottom: 30px;
background: #ff7300;
}

div {
font-size: 30px;
text-align: center;
color: #fff;
line-height: 60px;
}

效果动图：

简单描述下生效过程，因为设定的阈值是 top:0 ，这个值表示当元素距离页面视口（Viewport，也就是fixed定位的参照）顶部距离大于 0px 时，元素以 relative 定位表现，而当元素距离页面视口小于 0px 时，元素表现为 fixed 定位，也就会固定在顶部。

2. box-sizing: border-box

border-box可以让元素正确地渲染出它应有的长宽，而边框将绘制在它的长宽内部，也就是「内边框」。

而box-sizing的默认值content-box，总是会把边框绘制在元素外部，以至于整个元素渲染出的尺寸不尽人意。

举个例子：

html代码：

<div class="border-box"></div>
<br>
<div class="content-box"></div>

css代码：

.border-box {
width: 100px;
height: 50px;
box-sizing: border-box;
border: 10px solid #000;
background: #fff;
}

.content-box {
width: 100px;
height: 50px;
box-sizing: content-box;
border: 10px solid #000;
background: #fff;
}

效果图：

如你所见，两个div同样设置的宽度100px，高度50px，可是实际渲染出来的效果相差甚远。

原因就是，border-box是内边框，内容 + 边框的总宽度是所设定的宽度。content-box是外边框，内容就是所设定的宽度，边框的宽度会额外增加。

这个属性好用，就好用在input、button、select等元素上。作为表单元素，风格统一对齐就很重要了。由于这类元素的默认边框宽度不同，所以当规定了长宽的时候，使用content-box通常会渲染得长宽不一。此时改为border-box就可以正确渲染了。

3. resize: none|both|horizontal|vertical

none：用户无法调整元素的尺寸。

both：用户可调整元素的高度和宽度。

horizontal：用户可调整元素的宽度。

vertical：用户可调整元素的高度。

举个例子：

html代码：

<div>resize 属性规定是否可由用户调整元素尺寸。</div>

css代码：

div {
border: 2px solid;
padding: 10px 40px;
width: 300px;
resize: both;
overflow: auto;
}

效果动图：

4. calc()函数

CSS3终于支持运算了，简直喜大普奔！

在没有这个特性之前，如果一个百分比宽度元素和一个固定宽度元素放在一起，简直让人头疼。

写法就像这样：

div {
width: calc(100% - 50px);
}

支持+-*/四则运算，注意运算符前后都要有空格。

5. display: flex

flex是一种弹性盒子布局，具体教程建议看这篇博文，讲得非常详细。

Flex 布局教程：语法篇 - 阮一峰的网路日志?

www.ruanyifeng.com图标

在我的开发过程中，CSS3实用且好用的就这些了。当然，还有其他超赞的CSS3新特性。

在2019年的今天，HTML5和CSS3广泛使用的时代，仍有大量教材里依然是古老的CSS写法。这是非常令人悲哀的事情。

还是要靠自己，学最新的技术，走在前端的最前沿。

推荐阅读：

相关文章