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;
}
这里，重点要说明的是，基于方向可能会有一些问题。基于流的逻辑属性，无需考虑方向问题。
基于流逻辑的相关属性，还有如下一些，大家可自行查阅：
| 属性 | 作用 |
|---|---|
| padding-inline | 控制元素在水平方向上的内边距，即左右内边距 |
| padding-block | 控制元素在垂直方向上的内边距，即上下内边距 |
| border-inline | 控制元素在水平方向上的边框样式，包括边框线型、宽度和颜色等 |
| border-block | 控制元素在垂直方向上的边框样式，包括边框线型、宽度和颜色等 |
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
PS： 替换。
示例
<p>abcdefghigklmnopqrstuvwxyzp>
<p>abcdefg<wbr>higklmn<wbr>opqrst<wbr>uvwxyzp>
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;
}
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！