CSS 概念篇

[!note]
”为什么搞前端的要一次学三种语言😤“

用户代理

用户代理是浏览器提供的一个默认样式表，用于指定浏览器默认情况下渲染html的样式

盒模型

CSS中的元素都能看做是一个’盒子‘。一般可区分为块级盒子（block）和内联盒子（inline），区分的方式是：盒子在页面流中的行为方式及与页面上其他盒子的关系。

盒子的显示类型又可分为内部显示和外部显示两种，使用display属性设置元素的显示类型，比如display:block和display:inline是外部显示，display:flex、display:grid等是内部显示

外部显示类型

外部显示类型决定盒子元素在布局中和其他元素一起显示的方式

display: block;

拥有block外部显示类型的盒子表现：

• 换行
• width 和 height 属性生效
• 内边距、外边距和边框会将其他元素从当前盒子推开

  内部显示类型

  内部显示类型决定了盒子内部元素的布局方式
  当为一个元素设置display:flex，该元素的外部显示类型是block，内部显示类型是flex

  盒模型的组成

  组成一个盒模型需要：
• content-box：内容区域
• padding-box：填充内容周围的空白处
• border-box：包住内容和填充
• margin-box：最外层，作为该盒子与其他元素之间的空白

标准盒模型和替代盒模型

这俩的区别就是应用到元素width的是哪个部分，content-box或者border-box

标准盒模型

box-sizing: content-box

替代盒模型

box-sizing: border-box

外边距折叠

外边距折叠指的是在使用外边距创建空间时，如果没有获得预期的空间，就会发生外边距折叠。

外边距折叠的情况

1. 相邻的兄弟元素
   相邻的同级元素之间的外边距会被折叠（除非后面的元素需要清除之前的浮动）。
2. 没有内容将父元素和后代元素分开
   如果没有设定边框（border）、内边距（padding）、行级（inline）内容，也没有创建区块格式化上下文或间隙来分隔块级元素的上边距（margin-top）与其内一个或多个子代块级元素的上边距（margin-top）；或者没有设定边框、内边距、行级内容、高度（height）或最小高度（min-height）来分隔块级元素的下边距（margin-bottom）与其内部的一个或多个后代后代块元素的下边距（margin-bottom），则会出现这些外边距的折叠，重叠部分最终会溢出到父代元素的外面。
3. 空的区块
   如果块级元素没有设定边框、内边距、行级内容、高度（height）、最小高度（min-height）来分隔块级元素的上边距（margin-top）及其下边距（margin-bottom），则会出现其上下外边距的折叠。

【注意】：

• 外边距折叠仅发生在垂直方向，即上下外边距；
• display设置为flex或grid的容器不会发生外边距折叠

布局

flex布局

将一个父元素的display属性设置为flex后，它将成为一个flex容器，它的子元素成为flex-item

• 主轴（main axis)沿着flex元素放置方向延伸的轴，此轴的开始和结束分别称为main-start和main-end
• 交叉轴（cross axis）沿着flex元素放置的垂直方向，此轴开始和结束分别称为cross-start和cross-end

Justify-contents: flex item在主轴上的对齐方式，可选值有:

• flex-start（默认值）:主轴开始处
• flex-end:主轴结尾处
• center: 在主轴居中
• space-between: 多余空间在flex item之间平均分配，左右两侧贴近容器

• space-around: flex item沿着主轴均匀分布，item之间的间距是左右侧item到容器边缘的2倍

• space-evenly: 平均分配剩余宽度在item左右两侧

display:flex; // flex container是一个块级元素，
display:inline-flex; // flex container是一个内联元素，两者的子元素效果是一样的

应用在flex容器上的属性
flex-flow是flex-direction||flex-wrap的缩写，可以接受两个值，默认值是flex-flow: row nowrap

order属性规定了弹性容器中可伸缩项目在布局时的顺序。元素按照 order 属性的值的增序进行布局。拥有相同 order 属性值的元素按照它们在源代码中出现的顺序进行布局。order属性适用于flex-item、grid item

---

grid布局

显式网格属性
grid-template-rows grid-template-columns grid-template-areas
隐式网格属性
grid-auto-rows grid-auto-columns grid-auto-flow
间距属性
grid-column-gap grid-row-gap

css选择器

. //类选择器
# //id选择器
#id.class // 选择选择id匹配和class匹配的
[src='xxx'] //属性选择器
[src^='xxx'] // 属性以xxx开头的元素
[attr$='xxx'] // 属性以xxx结束的元素
[attr*='xxx'] // 属性包含xxx
: //伪类选择器
:: //伪元素选择器

空格 //后代选择器
> //子元素选择器
~ //兄弟选择器，只后面的兄弟会生效
+ //相邻兄弟选择器

当两个选择器直接无空格时，两个选择器为&的关系
:first-child // 第一个子元素
:only-child // 唯一的子元素
:first-of-type // 该类型的第一个元素
:nth-of-type // 该类型的第n个元素
:only-of-type
:last-of-type

:empty // 没有子元素的元素

:is()
用于更简洁地编写选择器，比如ul li, ol li {}可以写成:is(ul, ol) li {} 可以理解为前后进行组合

伪元素是一个附加到选择器末尾的关键词

在HTML中，块级元素不能作为内联元素的后代，但在CSS中，角色嵌套没有限制

// 图片居中：在父元素上：
display: flex;
align-items: center;

---

table布局

…

css水平居中

// 1
.parent {text-align: center}
.child {display: inline-block}

// 2需要指定宽度
.child {width: 200px;margin: 0 auto}

// 3绝对定位
.parent {position: relative}
.child {position: absolute;left: 50%;transform: translate(-50%)}

// 4使用flex

CSS垂直居中

// 1绝对定位
.parent{position:relative;}
.child{positon:absolute;top:50%;transform:translate(0,-50%);}

// 2使用flex
// 3试试vertical-align

左列定宽度，右列自适应

.parent {display: flex}
.left{width:100px}
.right{flex:1}

圣杯布局和双飞翼布局

这是两种经典的css布局方式，用于实现两侧宽度固定，中间区域宽度自适应的三栏布局。三栏布局还要求中间内容优先加载，因此在html结构中，中间的元素写在最前面>

<div class="container">
  <div class="content"></div>
  <div class="left"></div>
  <div class="right"></div>
</div>

圣杯布局，实现方式是结合 float margin padding 使用，首先是固定好主体content的内容，其宽度设置为100%，此时会将left和right挤到下一行，然后在容器上添加属性padding: 0 80px;这样左右两边就会空出各80px的位置，现在只需要把left和right移动端奥这两个位置就可以了，为left和right添加属性

.left {
  margin-left: -80px;
  position: relative;// 为了让left生效
  left: -100%;
}
.right: {
  margin-right: -80px; 
}

双飞翼布局则是在content中嵌套一层inner，content宽度仍然设置为100%，inner设置margin: 0 80px;然后把left和right使用margin-left的负值移动到左右空出的位置

.container > div {
  float: left;
}
.content {
  width: 100%;
  height: 200px;
  .inner {
    margin: 0 80px;
  }
}
.left {
  width: 80px;
  margin-left: -100%;
}
.right {
  width: 80px;
  margin-left: -80px;
}

完整代码见码上掘金demo

flex布局场景

左侧icon固定宽度，设置style: flex: 20px 0 0;
右侧文字随容器大小自适应，设置style: flex: 0 1 1;
此时如果文字内容过长，仍然会溢出，即使设置 overflow: hidden; 也无效，原因是flex item默认的 min-width 属性是auto，宽度不能比内容宽度小，设置 min-width: 0; 可以解决上述问题

响应式

一种写法是用媒体查询@media，比如@media screen and (max-width: 1440px)，使用max-width意味着作用于比阈值小的，min-width意味着作用于比阈值大的
要注意的是，使用媒体查询千万注意书写顺序，否则不会生效，后面的会覆盖签名的

第二种方法是使用相对单位长度，比如rem，以根部html设置的font-size为参考值，

【注】在使用rem这样的单位时，注意在head中添加<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/> 这个属性的作用是

CSS单位

px: 相对长度单位，相对于显示器的屏幕分辨率而言，需要注意：1. IE无法调整使用px为单位的字体大小。2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；
em：相对于父元素font-size的大小
rem：相对于根元素font-size的大小

css权重

p{} //权重1
.p1{} //权重10
#p2{} //权重100
<p style=""></p> //行内样式权重1000

// 嵌套越多，权重越大，除了!important
// 伪类(:hover :active)的权重相当于类元素的权重

CSS gradient 渐变

CSS渐变形式语法
有四种渐变方式

• linear-gradient 线性渐变，线性条纹装
• radial-gradient 径向渐变，以近圆形的形式从中心点向外扩散
• repeating-xxx-gradient 重复渐变
• conic-gradient 锥形渐变，像是俯瞰一个锥形
  css渐变没有尺寸的概念，其大小取决于它应用到的元素的大小
  值的组成：
  最后一部分都是<color-stop-list>形式

  <color-stop-list> = <linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ] #?

==linear-gradient 线性渐变==

color-stop 包含颜色色标和色标位置，色标位置是一个长度值或百分比，定义两个色标之间渐变色过渡的中点位置，省略长度时默认取两个色标的中点。可以这样理解：以linear-gradient(red 10%, 30%, yellow 90%);为例：先通过色标位置指定某个点的颜色，即10%处的位置是red，90%处的位置是yellow，剩余空间默认会是相邻两个色标的平滑过渡，颜色的中点就是过渡的中点，但是如果在两个色标中间添加一个没有加色标标签的位置值（例子中的30%），那么过渡的中点会变成30%处

色标应该以递增的顺序列出，如果后面的值小于前面的值，后面的较小值会被覆盖为前一个较大值。当两个或多个色标位于同一个位置，过渡会在这个位置的第一个和最后一个颜色之间产生一条硬线。

默认情况下，如果0%处没有声明色标，会取声明的第一个色标作为0%处的颜色，同样的，最后一个色标如果没有声明在100%处，会自动持续到100%处

当有两个或多个色标，线性渐变的合成过程如下：

==radial-gradient 径向渐变==

可以设置渐变中心点的位置，例如radial-gradient(at 0 50%, red yellow)
传值写法

• position 渐变开始的位置，解析方式类似于background-position，默认为center
• ending-shape 渐变的结束形状，可选circle（正圆）或ellipse（椭圆），默认为ellipse。选择circle时可通过size指定圆的半径，选择ellipse时则可指定椭圆的水平轴半径和垂直轴半径。不指定ending-shape的情况下，也会根据给出的size是1个还是2个自动产生正圆或椭圆
• size 渐变结束形状的大小，关键字或显示指定，关键字如下，默认值为farthest-corner

关键字	描述
closest-side	渐变结束形状如果是圆形，与容器距离渐变中心点最近的一边相切，如果是椭圆，则与距离渐变中心点最近的垂直和水平边相切。
closest-corner	渐变结束形状与容器距离渐变中心点最近的一个角相交。
farthest-side	类似于 closest-side，但是结束形状与容器距离渐变中心点最远的一边（或最远的垂直和水平边）相切。
farthest-corner	默认值，渐变的结束形状与容器距离渐变中心点最远的一个角相交。

• linear-color-stop 参考linear-gradient
• color-hint 渐变色插值中点的位置，参考linear-gradient

形式语法

<radial-gradient()> = 
radial-gradient( [ <radial-gradient-syntax> ] )  

<radial-gradient-syntax> = 
  [ <radial-shape> || <radial-size> ]? [ at <position> ]? , <color-stop-list>

径向渐变的合成

径向渐变由其_中心点_、_结束形状_轮廓、_两个及以上色标_定义而成。

要创建平滑的渐变，radial-gradient() 函数绘制了一系列从中心点放射到_结束形状_（甚至可能超出范围）的同心轮廓。结束形状可以是圆形或椭圆形。

色标位于_虚拟渐变射线_（virtual gradient ray）上，该渐变射线从中心点水平向右延伸。基于百分比的色标位置是相对于结束形状和此渐变射线之间的交点（代表 100％）。每个形状都是单个颜色，并由其相交的渐变射线上的颜色确定。

例子：

==conic-gradient 锥形渐变==

形式语法

<conic-gradient()> = 
  conic-gradient( [ <conic-gradient-syntax> ] )  

<conic-gradient-syntax> = 
  [ [ [ from <angle> ]? [ at <position> ]? ] || <color-interpolation-method> ]? , <angular-color-stop-list>

<position> = 
  [ left | center | right | top | bottom | <length-percentage> ]  |
  [ left | center | right ] && [ top | center | bottom ]  |
  [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]  |
  [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]  

<color-interpolation-method> = 
  in [ <rectangular-color-space> | <polar-color-space> <hue-interpolation-method>? ]  

<angular-color-stop-list> = 
  <angular-color-stop> , [ <angular-color-hint>? , <angular-color-stop> ]#?

值的组成

• angle 在from关键词之前，以角度为单位，定义顺时针方向的渐变旋转
• position 定义渐变的中心点
• angular-color-stop 色标志，与linear-gradient和radial-gradient不同，conic-gradient的色标长度单位是角度，包括角度deg、梯度grad、弧度rad和整圈turn，例如一个圆 $360deg = 400grad = 2π rad = 1turn$ ,

例子：

更多有意思的css渐变案例

1. https://projects.verou.me/css3patterns/#zig-zag
2. https://standardista.com/cssgradients/

---

异象小记

overflow的padding-bottom缺失现象：（非chrome）

即，如果父元素中内容高度超出出现滚动条，同时父元素又有padding-bottom值，那么在非chrome浏览器中，padding-bottom可能不在滚动高度计算范围内。这时padding-bottom将不生效。这种现象会导致，scrollTop(元素内容高度)的计算差异.

div包裹img时，div的底部会多出3px

原因：img是一种类似于text的元素，在结束的时候，会在末尾加上一个空白符，因此多出了这3个字符

解决方案：

div {font-size: 0}
img {display: block}
img {vertical-align:top}

元素同时设置inline-block和overflow: hidden时会造成baseline的移动

{
  display: inline-block;
  overflow: hidden;
}

当inline-block元素的display不为visible的时候，其baseline为margin-box的下边界，而右边的元素没有设置overflow:hidden,他的baseline为文字内容的基线。baseline对齐之后则出现了这样的高度差。

解决方式为设置inline-block元素的vertical-align等于不为baseline的其他值

合理利用margin和padding的负值

当padding和margin取值为百分比时，相对的是父元素的宽度，

margin-left和margin-top取负值是会将自身向左和向上移动
margin-right和margin-bottom取负值时会使自身在布局中占的位置减少，右边或下面的元素会向自身移动
圣杯布局和双飞翼布局

flex居中布局溢出滚动问题

考虑如下场景：

1. flex容器内容flex-item数量较少时，居中展示
2. flex-item较多，溢出时左对齐
   当设置justify-content: center实现容器居中对齐时，如果flex-item溢出，会发现容器只能向左滚动，左边被裁剪的部分无法查看
   
   
   针对以上场景，有以下解法：
3. justify-content: safe center; 使用flex布局关键字，缺点是此特性目前兼容性不是很好
4. flex容器设置justify-content: flex-start，在首个flex-item设置margin-left: auto;，以及为最后一个flex-item设置margin-right: auto;【注】margin:auto表示让浏览器自己选择一个合适的外边距。有时，在一些特殊情况下，该值可以使元素居中。
5. 再套一层容器，当flex-item未溢出时，flex-container受wrapper设置的justify-content: center控制表现为居中；当flex-item溢出时，由于设置了max-width:100%，所以flex-container最大宽度就是wrapper的宽度，表现为默认justify-content: flex-start

   <div class="wrapper">
   	<ul class="flex-container">
   		<li>...</li>
   		...
   		<li>...</li>
   	</ul>
   </div>

   .wrapper {
   	display: flex;
   	flex-wrap: nowrap;
   	justify-content: center;
   	overflow: auto;
   }
   .flex-container {
   	display: flex;
   	max-width: 100%; // 关键属性
   }

---

calc（）函数在less中不生效，因为less的运算方式和calc有冲突，calc(100%-24px)会被编译成calc（76%），解决方法：calc（~“100%-24px”）

---

    // 隐藏scrollbar
    &::-webkit-scrollbar { // 对Chrome
      display: none;
    }
    scrollbar-width: none; // 对Firefox

// 设置scrollbar
&::-webkit-scrollbar {
  width: 4px;
  height: 80px;
}
&::-webkit-scrollbar-thumb {
  background-color: #e4e6eb;
  outline: none;
  border-radius: 2px;
}
&::-webkit-scrollbar-track {
  box-shadow: none;
  border-radius: 2px;
}
& {
  scrollbar-width: thin;
  scrollbar-color: #e4e6eb;
}

---

BFC

区块格式化上下文（Block FormatContext）是 Web 页面的可视 CSS 渲染的一部分，是块级盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

通俗来讲，BFC是一个独立布局空间，空间内容的子元素不会影响到外面的布局，对于一个BFC元素，无论内部子元素如何排列布局，都不会影响外部元素。BFC最重要的用法不是去除margin重叠或者清除浮动，而是实现更健壮的自适应布局。

BFC规则：

1）内部的Box会在垂直方向，一个接一个地放置。
2）Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
3）每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
4）BFC的区域不会与float box重叠。
5）BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
6）计算BFC的高度时，浮动元素也参与计算

创建一个BFC：

• 文档的根元素（<html>）。
• 浮动元素（即 float 值不为 none 的元素）。
• 绝对定位元素（position 值为 absolute 或 fixed 的元素）。
• 行内块元素（display 值为 inline-block 的元素）。
• 表格单元格（display 值为 table-cell，HTML 表格单元格默认值）。
• 表格标题（display 值为 table-caption，HTML 表格标题默认值）。
• 匿名表格单元格元素（display 值为 table（HTML 表格默认值）、table-row（表格行默认值）、table-row-group（表格体默认值）、table-header-group（表格头部默认值）、table-footer-group（表格尾部默认值）或 inline-table）。
• overflow 值不为 visible 或 clip 的块级元素。
• display 值为 flow-root 的元素。
• contain 值为 layout、content 或 paint 的元素。
• 弹性元素（display 值为 flex 或 inline-flex 元素的直接子元素），如果它们本身既不是弹性、网格也不是表格容器。
• 网格元素（display 值为 grid 或 inline-grid 元素的直接子元素），如果它们本身既不是弹性、网格也不是表格容器。
• 多列容器（column-count 或 column-width 值不为 auto，且含有 column-count: 1 的元素）。
• column-span 值为 all 的元素始终会创建一个新的格式化上下文，即使该元素没有包裹在一个多列容器中（规范变更、Chrome bug）

BFC可以解决的问题有：

1. 包含内部浮动，float浮动元素，脱离文档流后的高度塌陷问题，将父容器div设置display: flow-root可以创建无副作用的BFC，设置后div内容的所有内容都会参与BFC，
2. 排除外部浮动，如果想实现一个双列布局，可以将左边的元素设置float: left，右边设置display: inline-block，此时还需要为右边元素设置宽度，否则宽度是自适应内容的。上面是通过设置display: inline-block的方法，另一种设置BFC的方式是设置display: flow-root，此时，右侧元素宽度将自适应剩余空间
   

   <div>
     <div style="float:left"></div>
     <div style="display:inline-block;></div>
   </div>

3. margin外边距折叠（只有垂直方向才有外边距折叠）

z-index的使用

参考文档：理解z-index mdn 层叠上下文
z-index要搭配position: absolute | relative | fixed才生效，即需要是定位元素

每一个层叠顺序规则仅适用于==当前层叠上下文元素的小世界==，z-index只会影响具有层叠上下文的元素

创建一个层叠上下文：

1. 根元素 (HTML)
2. z-index值不为 auto的 absolute/relative定位（在firefox/ie浏览器下position: fixed也是可以的）
3. z-index 值不为 auto的 flex 项目 (flex item)，即：父元素 display: flex | inline-flex
4. opacity 属性值小于 1 的元素（参考 the specification for opacity）
5. transform 属性值不为 “none”的元素
6. mix-blend-mode 属性值不为 “normal”的元素
7. filter属性值不为“none”的元素
8. perspective属性值不为“none”的元素
9. isolation 属性被设置为 “isolate”的元素
10. position: fixed
11. 在 will-change 中指定了任意 CSS 属性，即便你没有直接指定这些属性的值（ 参考这篇文章 ）
12. -webkit-overflow-scrolling 属性被设置 “touch”的元素

可划分为三类：

• 根元素（上面的1）
• z-index是数值，不为auto的定位元素（上面的2、3）
• 具有其他一些css属性的（上面的4-12）

在元素设置了定位属性后，即position: relative|absolute之后，其z-index属性自动生效变成z-index:auto，但是并不会生成层叠上下文

层叠上下文的层级比较
对一组父元素和子元素来说，如果两个元素都创建了层级上下文，无论子元素的z-index层级是否比父元素低，子元素始终会出现在父元素的上面显示
z轴的渲染层级需要分清父元素和子元素的主次关系，其比较顺序是在dom结构中同一级元素进行比较。一个简单方法是将它们想象成一系列的版本号，子元素是其父元素版本号之下的次要版本。子元素的z-index值设置得再高，如果父元素处于较低的层级，渲染层级仍然会处于下层。

==【more】isolation属性==
isolation属性的出现是为了解决mix-blend-mode混合模式存在的问题。
isolation可选值有inherit、isolate、auto，主要看isolation: isolate的情况，按照MDN的描述，为元素设置isolation: isolate的唯一作用是强制创建一个新的层叠上下文。通常isolation属性会配合mix-blend-mode。
先了解一下mix-blend-mode属性，mix-blend-mode CSS 属性描述了==元素的内容应该与元素的直系父元素的内容和元素的背景如何混合==。默认情况下会混合所有比层叠属性低的元素。
mix-blend-mode的可选值是blend-mode数据类型

[!混合模式的一些使用场景]-

• multiply混合后通常颜色会加深，多用在白色背景图片和其他元素的混合，以及彩色纹理的合并上。
• screen混合后颜色会减淡，非常适合实现霓虹灯光效果，适合黑色背景素材和其他元素混合，非常实用。
• overlay在颜色值暗的时候，采用了类似“正片叠底”的算法，而颜色亮的时候，采用了类似“滤色”的算法。此混合模式比较适合实现文字水印效果。
• darken表示哪个颜色暗使用哪个颜色，在web开发中，给图形或文字着色会很实用。
• lighten是哪个颜色浅就表现为哪个颜色，在web开发中，给图形或文字着色会很实用。
• color-dodge颜色减淡混合模式可以用来保护底图的高光，适合处理高光下的人物照片。
• color-burn颜色加深混合模式可以用来保护底图的阴影，适合处理幽深秘境一类的照片，通过和特定的色彩进行混合，可以营造更加幽深的意境。
• hard-light的效果是强光，最终的混合效果就好像耀眼的聚光灯照射过来，表现为图像亮的地方更亮，暗的地方更暗。多用在图像表现处理上。
• soft-light的效果是柔光，最终的混合效果就好像发散的光源弥漫过来，表现效果和hard-light有类似之处，只是表现没有那么强烈。给图像着色的时候常用此混合模式。
• difference是差值效果，可以实现颜色的反色效果。
• exclusion的效果是排除，最终的混合效果和difference模式是类似的，区别在于exclusion的对比度要更低一些。
  看一个例子

<!-- style -->
<style>
  .circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    position: absolute;
    mix-blend-mode: screen;
  }
</style>
<div style="position:relative;">
  <div class="circle" style="background:red;"/>
  <div class="circle" style="background:green;left:40px" />
  <div class="circle" style="background:blue;top:40px;left:20px"/>
</div>

结果会是这样

isolation的作用，顾名思义就是隔断，用来隔断混合模式，考虑一个三层的dom结构，为中间元素设置isolation: isolate，为最里层元素设置mix-blend-mode: screen，这时里层元素和最外层元素不会发生混合。
isolation: isolate实现隔断混合模式的原理是创建一个层级上下文，同理，上面任何一种创建层级上下文的方法都可以做到隔断效果

---

blockquote:after {
    content: "❞";
    font-size: 30px;
    position: absolute;
    right: 8px;
    bottom: 0;
    color: #4dd0e1;
    opacity: .7;
}

滚动条

可替换元素

容器查询及其应用

先说媒体查询，媒体查询指的是根据设备特征和参数来应用css样式，通常是基于视口大小。而容器查询则是根据容器元素来应用css样式。它们的使用方式是这样的：

@media screen and (max-width: 1080px) {
    ...
}
@container <container-condition># {
    ...
}

在使用时，首先需要声明一个局限上下文，用container-type属性来创建，其可选值有：

• size 基于容器的行向和块向尺度，将布局，样式和大小的限制应用于容器
• inline-size 基于容器的行向尺度，将布局，样式和大小的限制应用于元素
• normal 该元素不是任何容器大小查询的查询容器，但仍然是容器样式查询的查询容器。？？
  局限上下文可以命名，使用container-name属性声明，在@container查询中选定该名称

  .container {
      container-type: size;
      container-name: con
  }
  @container con scroll-state(stuck: top) {
      ...
  }

  @container 的具体语法
  @container <container-condition> ，其中<container-condition>包含<container-name>和<container-query>，前者就是上面说的为容器命的名，是一个可选项；<container-query>表示 ==当容器大小，样式，滚动状态发生变化时，针对查询容器的一组特征==，下面列举大小/样式/滚动状态分别有哪些描述符：

animation

animation子属性

• animation-name：指定由 @keyframes 描述的关键帧名称。
• animation-duration：设置动画一个周期的时长。
• animation-delay：设置延时，即从元素加载完成之后到动画序列开始执行的这段时间，可设置为负值，将提前进行。
• animation-direction：设置动画在每次运行完后是反向运行还是重新回到开始位置重复运行。
• animation-iteration-count：设置动画重复次数， 可以指定 infinite 无限次重复动画
• animation-play-state：允许暂停和恢复动画。
• animation-timing-function：设置动画速度， 即通过建立加速度曲线，设置动画在关键帧之间是如何变化。
• animation-fill-mode：指定动画执行前后如何为目标元素应用样式，forwards表示动画结束好停留在最后一帧
• @keyframes 规则，当然，一个动画想要运行，还应该包括 @keyframes 规则，在内部设定动画关键帧
  必填项：animation-name,animation-duration,keyframes

  @keyframes test {
    0% {}
    100% {}
  }
  
  div {
    animation: test 2s 1s ;
  }

  /* Keyword values */
  animation-timing-function: ease;  // 动画以低速开始，然后加快，在结束前变慢
  animation-timing-function: ease-in;  // 动画以低速开始
  animation-timing-function: ease-out; // 动画以低速结束
  animation-timing-function: ease-in-out; // 动画以低速开始和结束
  animation-timing-function: linear; // 匀速，动画从头到尾的速度是相同的
  
  cubic-bezier() 三次贝塞尔曲线, 补间动画
  使用步骤缓动函数最多的是用来实现逐帧动画
  animation-time-function: steps

  animation-timeline

  动画时间线，是一个新特性，现在(2024.7)只有chrome和edeg支持，用于控制css动画进度的时间线，默认是auto，也就是随时间变化，可选值有：

  /* 关键词 */
  animation-timeline: none;
  animation-timeline: auto;
  /* 自定义命名时间线 */
  animation-timeline: --timeline_name;
  
  /* 滚动时间线 */
  animation-timeline: scroll();
  animation-timeline: scroll(scroller axis);
  
  /* 视图时间线 */
  animation-timeline: view();
  animation-timeline: view(axis inset);

  主要可以分成两类：滚动时间线和视图时间线
  scroll()是简写，能接受两个参数scroll(scroller, axis)，分别是滚动容器和滚动方向，scroller可选值有：
• nearest 最近的祖先滚动容器*（默认）
• root 文档视窗作为滚动容器
• self 元素自身作为滚动容器
  axis可选值有：
• block 滚动容器的块级轴方向（默认）
• inline 滚动容器内联轴方向
• y 滚动容器沿 y 轴方向
• x 滚动容器沿 x 轴方向

这里没有提供可以指定任意容器的方法，所以还有一种方式是，自定义一个时间线，也就是上面的--timeline_name，在滚动容器元素上定义两个属性:

scroller {
  scroll-timeline-name: --timeline_name;
  scroll-timeline-axis: inline;
  /*可简写*/
  scroll-timeline: --timeline_name inline;
}
/* 动画元素 */
el {
  animation: a linear;
  animation-timeline: --timeline_name;
}

另一类是视图时间线，它表示的是元素本身出现在视窗内的进度，不管滚动容器是什么，只需关注元素自身，view()也能接受两个参数view(axis, inset）：
axis表示滚动方向，可选值有：

• block：滚动容器的块级轴方向（默认）。
• inline：滚动容器内联轴方向。
• y：滚动容器沿 y 轴方向。
• x：滚动容器沿 x 轴方向。
  inset 表示调整元素的视窗范围，这个属性值可以类比 scroll-padding ，支持填入两个值，分别对应动画开始和结束时相对滚动容器的内偏移值，在这个范围内会执行动画，比如设置animation-timeline: view(40%, 0)表示：当滚动到距离视窗顶部40%的位置时动画就结束了，正常是0%，即触顶，

view-timeline-inset用于设置动画在视图中的可见范围，它可以接受1个或两个值，默认值是auto；传入的值可以是数值也可以是百分比，百分比是相对容器。

• 设置为auto时，会使用对应的scroll-padding值（默认情况scroll-padding通常是0）；
• 当传入1个值时，对于正数值，动画的开始、结束位置将在视窗内偏移指定的长度或百分比值处；对于负数值，动画的开始、结束位置将在视窗外偏移指定的长度或百分比值处。
• 当传入两个值时，第一个和第二个值分别表示动画开始和结束时，在对应轴上的偏移量

解释一下偏移量，偏移量可以参考padding来理解，根据padding值我们得到一个content-box。这个content-box内就是动画执行的范围，通俗来讲，以滚动轴为垂直方向y轴、view-timeline-inset: 300px 200px为例，根据偏移量300px 200px，我们在距离视窗顶部300px和距离底部200px的位置画两条线，两条线之间划分出一个范围，进入这个范围，动画开始，离开这个范围动画结束。如下图所示，当元素进入蓝色和绿色交界处，动画开始，离开绿色区域时动画结束，由于animation-fill-mode设置为none，处于动画之外的元素都标记了红色边框

【注】：在制作动画效果时，注意根据需要调整animation-fill-mode的值

animation-range

aimation-range 这也是一个新特性，根据时间线来设置动画范围区间，听起来和上面的范围有点像，

推荐一个滚动驱动动画网站，very amazing

---

CSS揭秘学习笔记

背景与边框

• background-clip

  background-clip: border-box; // 背景到border被裁剪掉
  background-clip: padding-box; // 背景在padding盒子被裁剪调

• box-shadow

支持逗号分隔，可创建多个投影，最前声明的在最顶层

box-shadow: 0 0 0 10px green;
// x轴偏移 y轴偏移 模糊 扩展半径 阴影颜色

图形

// 平行四边形
transform: skewX(-45deg);
// 切角
background: #fff;
background-image: 
	linear-gradient(135deg, transparent 15px, #58a 0) right, 
	linear-gradient(45deg, transparent 15px, #655 0) left;
background-size: 50% 50%;
background-repeat: no-repeat;

---

scroll-behavior: smooth;
user-select: all;

CSS 新特性 for Every Year

2023年

CSS 封装：2023年！

1. 三角函数

2. :nth-child伪类选择器，可以使用 An+B 精确控制选择哪些元素。默认情况下:nth-child（或:nth-last-child）会考虑所有子元素，现在可以将选择器列表传递给:nth-child，例如：.doll:nth-child(3n+1 of .small) 表示先预过滤 .small，再应用3n+1逻辑；

   【浏览器支持：Chrome 111，Edge 111，Firefox 113，Safari 9】

3. @scope

4. 选择器嵌套

   .class1 {
     .child1 {
       
     }
   }

   【浏览器支持：Chrome112，Edge 112，Firefox 117，Safari 16.5】

5. 容器查询 @container，支持查询父元素而不是视口的全局尺寸信息来应用css样式

6. :has()选择器