记录一下看到过的，没见过的不知道就算了;

inline-size: 60px

block-size:30px

padding-block:10px

这三个文字属性和 writing-mode: 有关， writing-mode 设置文字是从左往右排列还是从上往下

关于 nth-child!!!

MDN 文档里解释

p:nth-child(1) {

background-color:red; // 这个选择器中第一个 p-title 和 div》p 都会是红色背景，因为第一个算是第一个p ，然后在div中，也存在第一个p ！！！

}

最后注意

这种语法嵌套，最终生成的效果是 =》 <p ><p/><p>123</p> 因为段落p 不允许包含任何的块元素，包括它自己

关于position:fixed 定位的补缺：

使用元素固定定位来得到高度的情况下，默认时候是相对于屏幕视口的定位的，但是当元素祖先存在 transform perspective, filter 属性非none 时，容器视口会从屏幕视口变成改祖先。

el-cascader 级联组件限制选中数量：

默认这个组件是双向绑定 v-model=""的，要限制选中数量，

那么就需要取消双向绑定，通过自己绑定属性 :value="value" 然后判断 value 是否大于2，通过change 事件去判断是否符合数量限制，然后赋值。

el-select 实现自适应宽度！！！

主要借助于子元素的宽度去撑大父元素，然后将子元素隐藏（但是需要占位来实现！！！）

scroll-behavior: smooth: 表示平滑滚动，这样子锚点条状的时候就会有动画效果

还有一种js的方式，就是先获取锚点的dom

然后： dom.scrollIntoView({behavior:smooth}), 通过这种方式也可以实现跳转到锚点

css 实现多个容器保持相同的宽度，

可以借助于 flex布局，因为flex 布局默认会有一个属性就是 align-items:stretch ，会拉神子元素以保持同样的宽度或者高度，

但是有一个问题就是如果 display:flex flex-direction：column 这样虽然可以保持同样的高度，但是会出现子元素默认都是撑满整个宽度的，

所以这里解决方案就是使用 inline-flex ！！！

aspect-ratio: 1/1 保持容器的宽高比始终为1：1 ！！！

:focus-within : 表示存在焦点的元素或者子元素获取焦点应用的样式

莫名的div 对不齐，错位位置或者文字对不齐的问题。大部门可能是 vertical-align：baseline 这问题，有时候不同容器中的文字为了保持默认的baseline 对齐，就会错位容器！！！导致出现莫名的错位，莫名的滚动条等问题

vue.data 页面级暂存的思路和实现：

点击暂存按钮的时候，就是直接将this.$data中的数据存到localstorage中，然后因为 vue中的 data() {} 其实就是一个函数，返回一个对象，所以直接可以 export default {let pageInfo = JSON.parse(localstorage.getitem("vuepage")); data() {return Object.assign({}, pageInfo ) ;}}

数字id太长导致请求接口报错的问题：其实就是 js中整型其实也就是精度要求的大于 2**53 次方的 int id 就会出现id出现错误，导致请求失败。所以也提醒id尽量使用字符串类型去存储！！！

至于解决方式可以借助于 json-bigint 这个包。 npm 安装后转换一下格式即可。

关于获取 transition: all 1s；如果获取动画持续的时间的问题：

可以使用 window.getComputedStyle(dom). transitionDuration 就可以获取到这个动画的持续时间，那么就可以动态的设置定时器出发的时间，就可以完成动画完成后，执行逻辑操作的这种操作了，不用担心手动填的时间太短导致动画没完成就执行或者动画完成，等待时间太久等问题！！！

css 高度的悖论问题：

对于 <div class=father><div class=child></div><.div/> , father的高度取决于 child的高度，所以在child 的样式设置为 50% 是不会有效果的，因为father 没高度，而child 又说我的宽度是father的50% 。除非child 是脱离了文档流的绝对定位。子绝父相，这样子就可以i实现！！！

float 布局，子元素超高，内容被撑大导致超高，就可能会出现布局错乱的问题！！！！这个排查UI需要很注意的点

span 标签默认是 inline, 也就是说默认宽度是根据内容来设置的，但是如何将span 放到flex 布局中， span 就会自动被转成block, 就导致宽度不会跟着内容来改变，就导致出现实际占位宽度和内容宽度不一致的问题！！！

inline 展示的标签，默认的 vertical-align 是baseline ,这就会导致莫名的缝隙问题。将display 改成block 或者修改 vertical-align 就可以解决！！！

backgrond: url() 这个属性默认只填写图片地址时，其实其他比如 no-repeat 属性默认时会被加上而且值是 initial 所以如果单独给图片设置 background-repeat 属性，一定要设置在backgrond: url() 后面或者直接 background: url no-repeat 一起写

flex-direction:row-reverse, 碰到左右结构，还是flex 布局的，调换左右的结构可以使用这个css!!!

关于 flex 布局，可能会出现缩放事件的缩小事件不会被执行的情况。这是因为不对flex布局的子元素设置 min-width 或者overflow 的情况下， flex布局自动伸缩 flex-shrink 事件不会小于内容宽度，所以会出现 flex 布局的伸缩效果在拉伸浏览器，布局会变宽，但是小于一定的宽度后，不会在自己缩小的原因。

关于系统的深色模式还是浅色模式

可以使用 media 查询来判断！！！

@media and (pefers-color-scheme: dark) {

// 表示当系统调到深色模式，此处的css 样式就可以生效！！！

}