Hi~，我是 一碗周，一个在舒适区垂死挣扎的前端，如果写的文章有幸可以得到你的青睐，万分有幸~
🍎 写在前面
前一段时间State of CSS发起了2022年的调查问卷，该文件的内容主要是CSS新特性、框架、工具库的使用情况，这里我将会用几篇文章整理一下这个问卷中涉及到的新特性。
这篇文章介绍一下问卷中关于布局相关的内容，包括一些属性属性、属性值、媒体查询以及一些单位。
🍋 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 规则 */
}例子如下：
浏览器兼容性如下：
这里仅仅介绍了最简单的内容，其他的可以参考：
- CSS Container Queries - CSS: Cascading Style Sheets | MDN (mozilla.org)
- 介绍2022最期待且已正式支持的CSS container容器查询 « 张鑫旭-鑫空间-鑫生活 (zhangxinxu.com)
- 新时代布局新特性 -- 容器查询 - 掘金 (juejin.cn)
🍊 object-view-box属性
该CSS属性裁剪或调整<img>或者video，该属性目前在Chrome104中有所支持，在caniuse中目前还没有浏览器兼容情况，该属性的例子如下：
更多资料可参考
- CSS Images Module Level 4 (csswg.org)
- First Look At The CSS object-view-box Property - Ahmad Shadeed (ishadeed.com)
🍋 媒体查询的语法优化
在媒体查询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：在不超过父级大小的情况下将自己包裹的最大容器
示例如下：
🍍 写在最后
如果对本篇文章对你有所帮助，可以点赞收藏评论支持一下我；如果有所疑问，欢迎私信~
