CSS新世界是知名博主张鑫旭CSS世界三部曲的最后⼀部，主要讲述CSS3及其之后很多实⽤

的新特性，介绍了很多潜藏的特性和有⽤的细节。CSS世界介绍的是CSS2.1规范及其之前内

容，CSS选择器世界介绍的是CSS LV1-LV4的选择器知识，CSS新世界介绍的是CSS3及其之

后的知识。

CSS基础知识

CSS全局关键字属性值

• inherit 继承关键字 实现属性继承，如 input { font-family:

inherit;height:inherit }

• initial 初始关键字 适合⽤在需要重置某些CSS样式，但⼜不记得初始值的场景，

如 ul { font-size: 14px } ul li:last-child { font-size: initial }

• unset 不固定值关键字 只有配合all属性使⽤才有意义，批量重置内置样式，如

dialog { all: unset }

• revert 恢复关键字 让当前元素的样式还原成浏览器内置的样式，如 ol { list-

style-type: repeat }

@supports规则⽤来检测当前浏览器是否⽀持某个CSS新特性
<style>
/* ⽀持⽹格布局 */
@supports (display:grid) { .item { background:red } }
/* 不⽀持⽹格布局 */
@supports not (display:grid) { .item { background:red } }
/* 同时⽀持弹性布局和⽹格布局 */
@supports (display:flex) and (display:grid) { .item {
background:red } }
/* ⽀持弹性布局或⽹格布局 */
@supports (display:flex) or (display:grid) { .item { background:red
} }
/* ⽀持弹性布局 但不⽀持⽹格布局 */
@supports (display:flex) and (not (display:grid)) { .item {
background:red } }
/* @supports规则的⼤括号⾥ 可以包含其他@规则*/
@supports (display:flex) {
 @media screen and (max-width: 750px) {}
 @supports (animation: none) { .box { animation: skip }}
 @keyframes skip {}
}
</style>
<!-- 浏览器还提供了CSS.supports()⽅法，⽤来在javascript代码中检测
当前浏览器是否⽀持某个CSS特性-->
<script>
// CSS.supports(propertyName, value)
if (window.CSS || CSS.supports || CSS.supports('position',
'sticky')){
 document.getElementById('box').style.position = 'sticky'
}
</script>

增强的CSS属性

• fit-content关键字 实现元素尺⼨的⾃适应

<!-- 设置元素的width或height为fit-content关键字后，元素的尺⼨就是⾥⾯内容的尺
⼨ -->
<!-- 使⽤width:fit-content加margin:0 auto实现单⾏⽂字居中，多⾏⽂字居左对⻬
-->
<div class="box">单⾏⽂字居中，多⾏⽂字居左对⻬</div>
<style>
.box { width:fit-content; margin:0 auto; }
/* fit-content关键字的兼容性处理 IE浏览器、Edge79之前不⽀持 但可以⽤在移动端
*/
.ex { width:-webkit-fit-content; width:-moz-fit-content;width:fit-
content; }
</style>

• position:sticky 黏性定位

1.黏性定位：当元素在屏幕内时，随屏幕滚动;当元素滚出屏幕时，元素变成固定定位

2.黏性定位过去都是使⽤javascript实现，在现代浏览器可以使⽤position: sticky实现

3.在使⽤position: sticky时，务必保证黏性定位元素的祖先元素没有可滚动元素

• currentColor 关键字

<!-- currentColor 表示当前元素所使⽤的color属性的计算值 -->
<div class="box">currentColor 使⽤当前color相同的颜⾊</div>
<style>
.box { color: red; border: 1px solid currentColor; /* 边框的颜⾊和⽂字
颜⾊⼀致*/ }
</style>

• zoom 缩放 除Firefox外其他浏览器都⽀持

语法 zoom: normal | reset | <number> | <percentage>
zoom 和 scale 的区别
1. zoom属性缩放的中⼼坐标是元素的左上⻆，且不能修改。transform中的scale缩放默
认的中⼼坐标是元素的中⼼点
2. zoom属性缩放会改变元素占据的尺⼨空间，transform中的scale缩放不会改变元素占
据的尺⼨
3. zoom属性不会改变元素的层级，不会影响元素的fixed定位

• backface-visiblility 元素背⾯是否可⻅

backface-visiblility: visible 默认值
元素背⾯是可⻅的
backface-visiblility: hidden 元素背⾯是不可⻅的
常⽤于transform变换中，是否要隐藏元素的背⾯，使变换效果更好

• justify-content: space-evenly 每个flex⼦项空⽩间距相等

ul{
 display: flex;
 justify-content: space-evenly;
}

• prefers-color-scheme ⽤来检测当前⽹⻚是否处于深⾊(⿊暗)模式的媒体属性

<style>
/* ⽀持三个属性：
dark 系统倾向于使⽤深⾊模式
light 系统倾向于使⽤浅⾊模式
no-perference 系统未告知⽤户使⽤的颜⾊⽅案 */
/* 深⾊模式 */
@media (prefers-color-scheme: light) {
 body{ color:#333; background-color: #fff; }
}
/* 浅⾊模式 */
@media (prefers-color-scheme: dark) {
 body{ color:#fff; background-color: #000; }
}
/* 快速对现有⽹⻚进⾏深⾊模式改造的技巧 */
body {
 /* 使⽤filter:invert(1)滤镜对⽂字颜⾊和背景⾊等进⾏反相 */
 filter: invert(1) hue-rotate(180deg);
 background-color: #000;
}
/* 对图⽚进⾏再次反相将图⽚还原成真实颜⾊ 避免应body反相后 图⽚颜⾊出现异常*/
img{ filter: invert(1) hue-rotate(180deg); }
</style>
<script>
// 判断当前⼿机浏览器是否⽀持深⾊或浅⾊模式
// 是否⽀持 prefers-color-scheme 属性
console.log(window.matchMedia('(prefers-color-scheme)').matches) //
true
// 是否是浅⾊模式 prefers-color-scheme: light
console.log(window.matchMedia('(prefers-color-scheme:
light)').matches) // true
// 是否是深⾊模式 prefers-color-scheme: dark
console.log(window.matchMedia('(prefers-color-scheme:
dark)').matches) // false
</script>

• touch-action: manipulation 取消移动端点击事件300ms延迟和双击⾏为

/* touch-action: manipulation 只允许浏览器进⾏滚动和持续缩放操作 */
html { touch-action: manipulation; }

• scroll-behavior: smooth 平滑滚动 safari不⽀持

.box{ scroll-behavior: smooth; } /* 平滑滚动 */

• overscroll-behavior: contain 滚动嵌套时，终⽌外层滚动 safari不⽀持

/* 局部滚动的滚动条滚动到底部边缘时，再继续滚动时，外部容器不会再跟滚动 */
.box{ overscroll-behavior: contain;-ms-overscroll-behavior: contain;
}

• pointer-events: none 元素⽆法点击

caret-color: red 更改输⼊光标的颜⾊

/* 设置输⼊光标的颜⾊
也可以⽤于设置了 contenteditable的html标签 */
input{ caret-color: red; }

简单实⽤的css函数

• calc()函数的使⽤

⽀持“+”、“-”、“*” 和 “/”四则运算；
可以使⽤百分⽐、px、em、rem等单位，不能使⽤当前CSS属性不⽀持的单位，可以混合使⽤
各种单位进⾏计算；
表达式中有“+”和“-”时，其前后必须要有空格，如"widht: calc(12%+5em)"这种没有空
格的写法是错误的；
表达式中有“*”和“/”时，其前后可以没有空格，但建议留有空格。
.elm { width: calc(100% - 20px + 5px*2)) }

• min()函数的使⽤

min(expression [, expression]) ⽀持⼀个或多个表达式，使⽤逗号分隔，将最⼩表
达式的值作为返回结果
实现⽹⻚在⼤于等于1024px的PC浏览器显示宽度为1024px，在⼩于1024px时显示宽度为
100%
el { width: 1024px; max-width:100% } 使⽤min()函数 el { min(1024px,
100%) }
min()⽤来限制最⼤值（即最⼤宽度值为1024px），IE和其他低版本浏览器不⽀持

• max()函数的使⽤

max(expression [, expression]) ⽀持⼀个或多个表达式，使⽤逗号分隔，将最⼤表
达式的值作为返回结果
实现⽹⻚在⼩于等于1024px的PC浏览器显示宽度为1024px，在⼤于1024px时显示宽度为
100%
使⽤max()函数 el { max(1024px, 100%) }
max()⽤来限制最⼩值（即最⼩宽度值为1024px），IE和其他低版本浏览器不⽀持

• clamp()函数的使⽤

clamp()函数的作⽤是返回⼀个区间范围的值，语法：clamp(MIN, VAL, MAX),MIN表示
最⼩值，MAX表示最⼤值，
VAL表示⾸选值，如果VAL在MIN~MAX范围内，则将VAL作为返回值，如果VAL⼤于MAX则将
MAX作为返回值，如果VAL
⼩于MIN，则将MIN作为返回值。clamp(MIN, VAL, MAX)等同于max(MIN, min(VAL,
MAX))
IE和其他低版本浏览器不⽀持
<button>宽度⾃适应变化</button>
button{
 width: clamp(100px, 50%, 600px)
}
不断改变浏览器视⼝的宽度，按钮宽度在100px~600px范围内变化，当屏幕宽度的⼀半⼤于
600px时，宽度为600px
当屏幕宽度的⼀半⼩于600px时，宽度在200px~600px之间，当屏幕宽度的⼀半⼩于200px
时，宽度为200px。

• env() 环境变量函数

环境变量env()规范的制定是源于解决‘刘海屏’和‘底部触摸⿊条’的移动设备的出现
在使⽤safe-area-inset-*等env的属性时，⼀定要设置meta信息<meta
name="viewport" content="viewport-fit="cover"">
使⽤4个安全内边距值， 同时设置兜底尺⼨，⽆法使⽤safe-area-inset-*时，会使⽤兜
底的值
env(safe-area-inset-top, 20px) 距离顶部 设置顶部刘海区域安全距离
env(safe-area-inset-right, 1em) 距离右边
env(safe-area-inset-bottom, 20px) 距离底部
env(safe-area-inset-left, 20px) 距离左边 设置底部⼩⿊条安全距离

Css变量和⾃定义属性

• 变量名:值 声明css变量

属性：var(--变量名) 使⽤css变量
<div class="box">深浅⾊模式</div>
<style>
:root{ --primary-color: pink; } /* 声明css变量 */
.box{ color: var(--primary-color)} /* 使⽤css变量 */
.box{ color: var(--primary-color, red)} /* 使⽤ var(css变量, 备⽤值)
当css变量⽆效时 使⽤备⽤值 */
</style>
<script>
// 在js中设置和获取 css⾃定义属性
// 只能借助 xx.style.setProperty 在js中设置 css变量
document.documentElement.style.setProperty('--myColor', '#0000ff')
// 使⽤
getComputedStyle(document.querySelector('.box')).getPropertyValue('
--myColor') 获取css变量
console.log(getComputedStyle(document.querySelector('.box')).getPro
pertyValue('--myColor')) // #0000ff
</script>