CSS新特性，提升开发效率与视觉表现，必读！

CSS2.1中的CSS属性的设计初衷是图文展示，所以并没有专门与布局相关的CSS属性。因此，在CSS2.1中出现了很多奇怪的现象，如float属性，设计之初是为了文字环绕效果，最后居然成了布局中常用的属性。

CSS3.0及以后版本中，新的特性都是根据当下具体的 Web 场景来设计的，如设备情况等。新特性主要有4个方面：

• 更复杂、更具弹性的布局支持，如弹性布局、网格布局等；
• 更丰富的视觉表现的支持，如圆角、盒阴影、动画和渐变等；
• 更多样的浏览器设备的支持，如 CSS Media Queries 媒体查询等；
• 开发者 CSS 自定义能力的支撑，如 CSS Houdini 等。

CSS2.1从2002开开始制定，到2011年成为规范，花费了10年。 CSS3.0及以后版本，为了加速CSS标准化，将 CSS 划分为更小的组件，称之为模块。模块之间互相独立，按照各自速度走镖标准化。

下面列举一些在开发中可以经常用到，且节省大量代码及提升效率的CSS新特性：

流

CSS2.1是基于方向设计的，而整个CSS3.0世界是围绕“流”来构建的。基于方向虽然符合现实认知，但与底层不符，可能会产生问题。

示例：两个按钮之间，间隔10px

<div>
  	<button>确定</button>
	<button>取消</button>
</div>

在这里插入图片描述

基于方向设置

button {
  margin-right: 10px;
}
/*修改方向，会出现问题 */
div {
  direction: rtl;
  background: #333;
}

基于流：

button { 
  /*文档流的逻辑属性，表示内联元素文档流结束的方向*/
  maring-inline-end: 10px;
}

当然，我们可以控制，只让第一个button后增加 margin 值，如：

button~bubutton {
  margin-right: 10px;
}

这里，重点要说明的是，基于方向可能会有一些问题。基于流的逻辑属性，无需考虑方向问题。

基于流逻辑的相关属性，还有如下一些，大家可自行查阅：

fit-content

宽度、高度将随文字宽度而进行自适应。

示例：文字少的时候居中展示，文字多的时候左对齐展示

<div class="box">
    <div class="content">纸上得来终觉浅，绝知此事要躬行。</div>
</div>

在这里插入图片描述

使用传统方式：

.box {
  width: 100px;
  height: 100px;
  border: 1px solid red;
  text-align: center;
}
.content {
  display: inline-block;
  text-align: left;
}

使用 width:fit-content 方式：

.box {
  width: 100px;
  height: 100px;
  border: 1px solid red;
}
.content {
  width: fit-content;
  margin: auto;
}

好处： ① 保护了元素原始的 display 值；② 让元素的尺寸有了确定值。

兼容性情况

keep-all

CJK 文本不断行 （CJK 指中文/日文/韩文 ）

示例：名字要一行展示

<div>
  <p>张三 李四 奥斯托洛夫斯基</p>
  <p class="keep-all">张三 李四 奥斯托洛夫斯基</p>
</div>

在这里插入图片描述

p {
  width: 100px;
}
p.keep-all {
  word-break: keep-all; 
}

兼容性情况

wbr

<wbr>精确换行的控：如果宽度足够，不换行；如果宽度不足，则在<wbr>元素所在位置进行换行。 <br> 直接换行，无论是否足够。

PS：<wbr> 也可以使用 ​ 替换。

示例

<p>abcdefghigklmnopqrstuvwxyz</p>
<p>abcdefg<wbr>higklmn<wbr>opqrst<wbr>uvwxyz</p>

在这里插入图片描述

p {
  border: 1px solid; 
  width: 100px;
}

好处：更好的控制了换行位置！

兼容性情况

outline-offset

改变 outline 属性设置的轮廓的偏移位置。会悬浮在元素边框之上，不占用盒模型的空间。

示例

参考地址：https://demo.cssworld.cn/new/3/11-1.php

在这里插入图片描述

img:active {
    outline: solid deepskyblue;
}
.outline-offset {
    outline-offset: -3px;
}

兼容性情况