看到过的css 属性！！！
记录一下看到过的，没见过的不知道就算了;
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>123</p><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 对齐， 就会错位容器！！！导致出现莫名的错位，莫名的滚动条等问题
vue2
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 样式就可以生效！！！
}
相邻兄弟选择器（+）、子选择器（＞）、兄弟选择器（~）
CSS 选择器 - CSS：层叠样式表 | MDN (mozilla.org)
margin 和 padding 的百分比的计算是按照 父级的宽度来计算的！！！！
对于左右结构，但是存在一边的区域内容高度低于 另外一边时， 可以使用 flex 布局默认的 拉伸，使得左右结构的高度一致！！！， 那如果一边的高度是动态的，那么另外一边的高度就可以自适应为动态的高度！！！
