css 小记

# 新的 CSS 伪类函数 :is() 和 :where()

## :is()

/* 旧的写法  */
h1 > b, h2 > b, h3 > b, h4 > b, h5 > b, h6 > b {
  color: hotpink;
}


/* 新的写法：伪类  ：is */
:is(h1,h2,h3,h4,h5,h6) > b {
  color: hotpink;
}

## :where()

:where() 伪类函数与:is()功能相同，仅仅选择器权重不同

/* at the beginning */
:where(h1,h2,h3,h4,h5,h6) > b {
  color: hotpink;
}

/* in the middle */
article :is(header,footer) > p {
  color: gray;
}

/* at the end */
.dark-theme :where(button,a) {
  color: rebeccapurple;
}

/* multiple */
:is(.dark-theme, .dim-theme) :where(button,a) {
  color: rebeccapurple;
}

/* stacked */
:is(h1,h2):where(.hero,.subtitle) {
  text-transform: uppercase;
}

/* nested */
.hero:is(h1,h2,:is(.header,.boldest)) {
  font-weight: 900;
}

CSS3四个自适应关键字——fill-available、max-content、min-content、fit-content

[注意]IE浏览器不支持，webkit内核浏览器需添加-webkit-前缀

fill-available

表示撑满可用空间：

例 width:-webkit-fill-available;

登高布局：height:-webkit-fill-available;

CSS中width:fill-available和width:100%的区别？

区别:一旦跟padding/margin结合一起使用的时候，width:100%会撑破布局，而width:fill-available却不会。

fit-content

将元素宽度收缩为内容宽度

width:fit-content可以实现元素收缩效果的同时，保持原本的block水平状态，于是，就可以直接使用margin:auto实现元素向内自适应同时的居中效果了

类似地，高度也有此特性，但不常用

div{
  width:-webkit-fit-content;
  margin:auto;
}

min-content

width:min-content表示采用内部元素最小宽度值最大的那个元素的宽度作为最终容器的宽度

<div style="width:-webkit-min-content;">
  <div style="height:10px;width:100px;"></div>
  <div style="">hehe</div>
</div>

max-content

width:max-content表示采用内部元素宽度值最大的那个元素的宽度作为最终容器的宽度。如果出现文本，则相当于文本不换行

<div style="width:-webkit-max-content;">
  <div style="height:10px;width:100px;"></div>
  <div style="">hehe</div>
</div>

min-block-size

min-block-size:length| percentage| auto| none| min-content| max-content| fit-content| inherit| initial| unset;

CSS中的min-block-size属性用于创建元素的最小水平或垂直大小。如果写入方向为水平，则min-block-size等效于min-height属性，如果写入方向为垂直模式，则等于min-width属性。

• length:它设置以px，cm，pt等为单位的固定值。也可以使用负值。其默认值为0px。
• 百分比(％)：它与长度相同，但是大小是根据窗口大小的百分比设置的。
• auto:当需要浏览器确定block-size时使用。
• none:当您不想限制包装盒的尺寸时使用。
• max-content:当您在包装盒尺寸上首选min-width时使用。
• min-content:当您在包装盒尺寸上首选min-width时使用。
• fit-content:当您在包装盒尺寸上首选exact-width时使用。
• initial:它