CSS 属性篇

line-height属性

对于块级元素，line-height属性指定元素行的最小高度，可传入值除了带px, em单位，还可以是百分比，数字等。

传入值以em为单位时，行高根据父元素font-size大小设置比例
传入百分比时，也是参考父元素的font-size大小设置比例。
当传入无单位的数字，根据当前元素的font-size值比例来设置行高
传入关键字normal时，根据浏览器内置的默认值设置行高

vertical-align属性

vertical-align属性用来指定行内元素或表格单元格元素的垂直对齐方式（作用于子元素而不是容器元素）：

使行内元素盒模型与行内元素容器垂直对齐
垂直对齐表格单元内容

注：vertical-align只对行内元素、行内块元素、表格单元元素生效；对块级元素无效

相对父元素对齐的可选值：

baseline
使元素基线与父元素基线对齐，表现因浏览器而异
super/sub
使元素的基线与父元素的上标/下标基线对齐
text-top/text-bottom
使元素的顶部与父元素的字体顶部/底部对齐
middle
使元素的中部与父元素的基线加上父元素 x-height（译注：x 高度）的一半对齐
length
使元素的基线对齐到父元素的基线之上的给定长度。可以是负数。
percentage
使元素的基线对齐到父元素的基线之上的给定百分比，该百分比是line-height属性的百分比。可以是负数。

相对行对齐的可选值：

top
使元素及其后代元素的顶部与整行的顶部对齐。
bottom
使元素及其后代元素的底部与整行的底部对齐。

writing-mode

书写顺序

1	writing-mode: vertical-lr

scrollbar

border-radius

是盒模型四个角radius的简写属性，用于设置元素的外边框圆角。一个值是确定一个圆形，两个值时确定一个椭圆，==每个角一个，这个（椭）圆与边框的交集形成圆角效果==。
即使元素没有边框，这个属性也可以作用到background上，具体效果受background-clip影响。它的值可以是数值也可以是百分比，是数值时，表示圆形的半径或椭圆的半长轴+半短轴，负值无效；是百分比时，水平/垂直半轴分别对应盒模型的宽度和高度。椭圆用/隔开半长轴和半短轴

width属性

当width设置为auto

对于块级元素，如div，p元素元素默认宽度为父元素100%
浮动元素，inline-block元素
table-layout设置为auto的元素，会收缩到最小，只有1列

几个与内容有关的关键字

min-content 表示内容的最小固有尺寸，对文本内容而言，尽可能换行以缩小内容；
max-content 表示内容的最大固有尺寸，对文本内容而言，即使溢出也不会换行；
fit-content 使用可用空间，但不超过max-content
【固有尺寸】表示基于内容而不受上下文影响的尺寸，

svg

<svg width="300" height="300" style="border: 1px solid red">
	<!-- rect是矩形，x，y是左上角坐标，width，height是宽高，rx、ry是圆角 -->
  <rect x="10" y="20" width="150" height="100" rx="20" ry="40"></rect>
  <!-- circle圆形，cx、cy圆心坐标，r半径 -->
  <circle cx="150" cy="180" r="10"></circle>
  <!-- 椭圆，cx、cy圆心坐标，rx、ry是x、y轴半径 -->
  <ellipse cx=></ellipse>
</svg>

tabIndex

tabindex 全局属性指示其元素是否可以聚焦，以及它是否/在何处参与顺序键盘导航（通常使用Tab键，因此得名）。

它接受一个整数作为值，具有不同的结果，具体取决于整数的值：

tabindex=负值 (通常是 tabindex=“-1”)，表示元素是可聚焦的，但是不能通过键盘导航来访问到该元素，用 JS 做页面小组件内部键盘导航的时候非常有用。

tabindex="0" ，表示元素是可聚焦的，并且可以通过键盘导航来聚焦到该元素，它的相对顺序是当前处于的 DOM 结构来决定的。

tabindex=正值，表示元素是可聚焦的，并且可以通过键盘导航来访问到该元素；它的相对顺序按照 tabindex 的数值递增而滞后获焦。如果多个元素拥有相同的 tabindex，它们的相对顺序按照他们在当前 DOM 中的先后顺序决定。

根据键盘序列导航的顺序，值为 0 、非法值、或者没有 tabindex 值的元素应该放置在 tabindex 值为正值的元素后面。

如果我们在 div上设置了 tabindex 属性，它的子元素内容不能使用箭头键来滚动，除非我们在内容上也设置 tabindex

picture标签的使用

<picture>标签通过包含零个或多个<source>元素和一个<img>元素来为不同的设备提供图像。浏览器会自动选择最匹配的子<source>元素，没有匹配的就用<img>元素。

例子：

<picture>
	<source srcset="xxx.avif" type="image/avif">
  <source srcset="xxx.webp" type="image/webp">
  <!-- img是最终的兜底方案 -->
  <img src="xxx.jpg" alt="xxx" />
</picture>

浏览器将逐一匹配，遇到支持的图片格式即选择此图片

DPR(Device Pixel Radio)设备像素比

物理像素=设备像素，描述设备的一个个像素点；css像素=设备独立像素；

DPR=物理像素/设备独立像素，描述一个css像素占用实际的物理像素，比如DPR=2，表示将（2x2=4)个像素当1个像素来用

针对不同DPR的设备，可提供不同像素尺寸的图片，使用img-set()函数来选择当前设备最适合的图片分辨率，img-set函数属于CSS Background中的一种语法
1
2
3
4
5
6
img {
background-image: image-set(
url('photo@2x.png') 2x,
url('photo@3x.png') 3x
);
}

srcset属性也可以根据不同的DPR拉取对应尺寸的图片

<!-- 如果浏览器不支持srcset属性，将使用src属性中的photo.png作为兜底方案 -->
<div>
  <img src="photo.png" srcset="photo@2x.png 2x, photo@1x.png 1x" />
</div>

srcset属性配合sizes属性w宽度
srcset属性还有一个w宽度描述符，而sizes属性定义了图像元素在不同视图宽度下可能的大小值，两者配合使用
1
<img sizes="(min-width: 600px) 600px, 300px"/>

direction

direction和unicode-bidi是唯二不受all简写属性影响的属性

该属性可以设置块级元素文本的基本方向，也可以设置通过unicode-bidi属性创建的嵌入元素的方向。可继承。

scroll-padding

scroll-padding 同时设置元素的所有滚动内边距，其赋值方式较为类似 padding 属性为元素内边距赋值的方式。
scroll-padding-* 属性定义了滚动口的_最优视区_——用于在用户视野中放置内容的目标区域——的内边距。作者由此得以排除滚动口被其他内容（如固定定位的工具栏或侧边栏）所遮挡的区域，或在目标元素与滚动口的边之间留出更多余地。

scroll-snap-type

这个属性定义在滚动容器中的一个临时点（snap point）如何被严格执行。不是继承属性，初始值为none。【注】此属性不能用来指定任何精确的动画或者物理运动效果来执行临时点，而是交给用户代理处理。

可选值有：

none 当这个滚动容器的可视的 viewport 是滚动的，它必须忽略临时点。
x 滚动容器只捕捉其水平轴上的捕捉位置。
y 滚动容器只捕捉其垂直轴上的捕捉位置。
block 滚动容器仅捕捉到其块轴上的捕捉位置。
inline 滚动容器仅捕捉到其内联轴上的捕捉位置。
both 滚动容器会独立捕捉到其两个轴上的位置（可能会捕捉到每个轴上的不同元素）
mandatory（强制）
如果它当前没有被滚动，这个滚动容器的可视视图将静止在临时点上。意思是当滚动动作结束，如果可能，它会临时在那个点上。如果内容被添加、移动、删除或者重置大小，滚动偏移将被调整为保持静止在临时点上。
proximity（接近、尽量）
如果它当前没有被滚动，这个滚动容器的可视视图将基于基于用户代理滚动的参数去到临时点上。如果内容被添加、移动、删除或者重置大小，滚动偏移将被调整为保持静止在临时点上。

overscroll-behavior

默认情况下，当触及页面顶部或者底部时（或者是其他可滚动区域），移动端浏览器倾向于提供一种“触底”效果，甚至进行页面刷新。你可能也发现了，当对话框中含有可滚动内容时，一旦滚动至对话框的边界，对话框下方的页面内容也开始滚动了——这被称为“滚动链”。

在某些情况下我们不想要这些表现，使用 overscroll-behavior 来去除不需要的滚动链，以及类似 QQ 一类的应用下拉刷新效果。

auto 默认效果
contain 设置这个值后，默认的滚动边界行为不变（“触底”效果或者刷新）,但是临近的滚动区域（比如对话框后面的页面）不会被滚动链影响
none 临近滚动区域不受滚动链影响，而且默认的滚动到边界的表现也被阻止，比如下拉刷新功能会被阻止。

box-sizing

定义了user-ageng应该如何计算元素的总高度和总宽度

content-box：默认值，设置width=100px时，元素的内容区域会有100px，border和padding的宽度会被额外增加到最终绘制结果中
boder-box：设置将border和padding的内容包括在width之内，假如设置width=100px，实际渲染出来是内容区宽度 + padding + border = 100px。

【注】margin的值不在计算范围内

mask

mask 允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域。

mask属性使用与所有元素，不可继承
mask: xxx 是简写形式，值在书写时由一个或多个<mask-layer>组成，以逗号隔开。每个<mask-layer>
mask的初始值

mask-image: none;
mask-mode: match-source;
mask-repeat: repeat;
mask-position: 0 0;
mask-clip: border-box;
mask-size: auto;
mask-composite: add;

语法
可填的值：
mask-reference: 遮罩图片的路径
masking-mode: 遮罩图片的模式
position: 遮罩图片的位置
bg-size: 遮罩大小
repeat-style

aspect-ratio

为盒子规定了首选纵横比，这个纵横比可以用于计算 auto 尺寸以及其他布局函数。
可选值
auto：

clip-path

clip-path CSS 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。

1	clip-path: path("M 0 0 H 130 A 10 10 0 0 0 150 0 H 380 V 120 H 150 A 10 10 0 0 0 130 120 H 0 V 65 Z");

background属性的简写顺序

background: background-clip, background-color, background-image, background-origin, background-position, background-repeat, background-size, background-attachment

【注1】bg-size必须紧随position出现，以/分隔，比如：center/100% 100%，其他的可以按任意顺序放置
【注2】background-color只能被包含在最后一层，因为整个元素只能有一个背景颜色
【注3】指定多个背景层时，用逗号分隔每个背景层，最先声明的背景在最上层

background-clip

background-clip 设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下面