疑惑的css问题

119 阅读1分钟

问题一、为什么上层元素滚动完成后,继续滚动会引起下方内容的滚动?

这时因为滚动链接,属性:overscroll-behavior

属性值:

  1. auto:默认效果
  2. contain:设置这个值后,默认的滚动边界行为不变(“触底”效果或者刷新),但那时临近的滚动区域不会被滚动链影响到,比如对话框后方的页面不会滚动
  3. none:临近滚动区域不受到滚动链影响,而且默认的滚动到边界的表现也被阻止

语法:

  1. 一个值得时候,x,y轴都被指定为该值
  2. 两个关键字分别指定x和y轴的值

问题二、当子元素为行内元素时,可以将过长内容显示省略号,但是将子元素改为弹性盒子后,内容宽度收不住,溢出显示了

原因:flex布局下,子项的width属性值为min-content,当超出父元素的width时,自然内容溢出,表现和white-space:nowrap类似

解决方案: 增加min-width:0px设置

原理:juejin.cn/post/705003…

问题三、