记录一下看到过的,没见过的不知道就算了;
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 布局默认的 拉伸,使得左右结构的高度一致!!!, 那如果一边的高度是动态的,那么另外一边的高度就可以自适应为动态的高度!!!
标签:flex,布局,看到,元素,默认,宽度,css,属性 From: https://www.cnblogs.com/Hijacku/p/17705573.html