2022年你应该需要知道的CSS新特性-布局篇

Hi~，我是一碗周，如果写的文章有幸可以得到你的青睐，万分有幸~

🍎 写在前面

前一段时间State of CSS发起了2022年的调查问卷，该文件的内容主要是CSS新特性、框架、工具库的使用情况，这里我将会用几篇文章整理一下这个问卷中涉及到的新特性。

这篇文章介绍一下问卷中关于布局相关的内容，包括一些属性属性、属性值、媒体查询以及一些单位。

该系列文章一共有6篇，链接如下：

🍋 CSS 书写模式

这里的CSS书写模式指的是CSS中的writing-mode属性，该属性用于修改块流动方向，常用的值有三个：

horizontal-tb: 默认值，
vertical-lr: 将水平排放的文本修改为垂直排放，根据text-align属性来决定是顶部对齐还是底部对齐
vertical-rl: 将水平排放的文本修改为垂直排放，且书写方式修改为从左到右，根据text-align属性来决定是顶部对齐还是底部对齐

下面这个例子展示了vertical-lr和vertical-rl的区别：

writing-mode属性的浏览器兼容情况如下：

兼容性很好，可以放心食用；

🍌 CSS逻辑属性

这里所指的CSS逻辑属性指的是margin-block-start、margin-inline-start、margin-block-end、margin-inline-end、padding-block、padding-inline-start、border-inline等等；

我们这里就拿padding-block和padding-inline举例：

padding-block是padding-block-start和padding-block-end的简写形式；

两者的区别是padding-block是垂直方式的内边距，而padding-inline是水平方式的内边距，例如：

padding-inline-start: 32px;

上面这句的意思是正常流的情况下，水平方向的开始增加32px的内边距；

如果在正常流模式下，上面那句是与padding-left: 32px是等价的，但是如果我们使用writing-mode属性来修改块流动方向，此时如果使用padding-left就会出现问题：

我们想要设置的是文本前面和后面有内边距，但是使用padding-left设置的始终是侧边内边距，如果使用padding-inline就可以解决这个问题，例子如下：

浏览器兼容情况这里就拿padding-inline举例，如下图

浏览器的兼容情况还是非常不错的（IE：把我置于何地？），几乎已经可以用在生产环境了。

🍊 aspect-ratio属性

CSS中的aspect-ratio属性用于设置盒子的纵横比，这个纵横比可以用来计算自动尺寸以及为其他布局函数服务。

例子如下：

该属性的浏览器兼容情况如下：

🍇 content-visibility属性

CSS的content-visibility属性于控制元素的内容是否显示，主要值就是hidden和visible(默认值)；

该属性如果设置为hidden浏览器就会跳过该元素内容的渲染，需要的时候在将其设置为 visible ，这样可以提高浏览器的渲染速度。

例子如下：

该属性的浏览器兼容情况如下：

🍈 gap属性

CSS的gap属性现在已经支持flexBox中使用了，该属性用于设置元素之间的间距，浏览器兼容性如下：

🍉 CSS 容器查询

CSS容器查询说的是CSS container，其中存在一个@contianer规则，该规则可以实时匹配指定容器元素的大小，开发者可以根据不同的大小范围去编写不同的样式；

在使用@container规则之前需要先使用contienr属性建立容器元素，该属性是container-type和container-name的缩写：

container-type属性：容器类型，该属性有三个值，normal不建立容器元素、size水平和垂直都建立容器元素、inline-size水平建立容器元素；
contaienr-name属性：给容器命名，方便@container规则使用，多个容器时非常有用。

@container语法如下：

@container [name] 查询条件{
  /* css 规则 */
}

例子如下：

浏览器兼容性如下：

这里仅仅介绍了最简单的内容，其他的可以参考：

🍊 object-view-box属性

该CSS属性裁剪或调整<img>或者video，该属性目前在Chrome104中有所支持，在caniuse中目前还没有浏览器兼容情况，该属性的例子如下：

更多资料可参考

🍋 媒体查询的语法优化

在媒体查询Level 4的规范中，允许我们使用如下这种写法

/* 媒体查询Level 4之前 */
@media (max-width: 30em) {
  /* … */
}

/* 媒体查询Level 4中 */
@media (width <= 30em) {
  /* … */
}

/* 媒体查询Level 4之前 */
@media (min-width: 30em) and (max-width: 50em) {
  /* … */
}

/* 媒体查询Level 4中 */
@media (30em <= width <= 50em) {
  /* … */
}

该特性的浏览器兼容性如下：

🍌 css 比较函数

CSS中的比较函数目前有三个，分别是min()、max()和clamp()；

这三个函数中min()和max()比较好理解，分别是从逗号分隔符表达式中选择一个最小/大值作为CSS的属性值，例子如下：

width: min(20vh, 200px);

clamp()函数可以说一下，该函数接受三个值，语法如下：

clamp(MIN, VAL, MAX)

这三个参数依次分别是最小值、首选值和最大值，这三个值的关系如下：

当首选值比最小值要小时，则使用最小值；
当首选值介于最小值和最大值之间时，用首选值；
当首选值比最大值要大时，则使用最大值。

这个函数实际上就是max()和min()函数的嵌套，如下：

max(MIN, min(VAL, MAX))

clamp()函数的例子如下：

这三个函数的浏览器兼容性如下：

🍐 max-content、min-content和fit-content

max-content、min-content和fit-content均可以作为width的属性值使用，他们的区别如下：

这里用width属性解释，这三个属性值可以作为很多属性的值，例如height，block-size等。

max-content：内容有多宽，容器就有多宽，不会受父级的限制
min-content：宽度是最大内容的最小宽度
fit-content：在不超过父级大小的情况下将自己包裹的最大容器

示例如下：

🍍 写在最后

如果对本篇文章对你有所帮助，可以点赞收藏评论支持一下我；如果有所疑问，欢迎私信~