div覆盖不了img
已解决:z-index 只对已经定位的盒子生效,即position不为static。
参考链接:如何让一个div和一个img重合,div内容要在img上方?
z-index
<img/>
<div style="margin-top:-10px"></div>
border 渐变 且为圆角且边宽为1px;
display:flex,就不存在边距合并问题?
页面内容变化,引起的scrolltop归零,并且触发下拉回调?
(介绍,打卡页面间的切换)
在overflow里,使用after伪元素,页面会出现一个竖向的下拉。
已解决:主要是浏览器根据用户的习惯问题,当完全定位的元素是超出父级的右侧或者下侧,浏览器就会自动添加下拉或者右拉。
在 Web 网页中,滚动条出现是有方向性的要求的,由于全世界浏览文字,或者说阅读信息都是从上往下开始的,因此,滚动条的滚动也是从上往下。
所以滚动条在设计的时候,就约定了,只有容器下方(或右侧)内容有多余,才需要滚动,因为不可能说后续的阅读信息在阅读起点的上面,这不符合真实世界的阅读逻辑。
参考链接:flex-end为什么overflow无法滚动及解决方法
<style>
.astyle {
width: 50px;
height: 50px;
position: relative;
}
.astyle::after {
content: '';
position: absolute;
top: 0px;
left: 0px;
width: 25px;
height: 70px;
background-color: seagreen;
}
</style>
<div style="height: 70px; overflow-x: auto;">
<div class="astyle">a</div>
</div>
over-flow,x轴或者y轴,其中,一个设置为auto后,另外一边设置成visible会无效,系统会解析成双auto。
animation 和 transition 的区别
数字不换行
数字默认不换行; word-break: break-all; 强制换行;
疑问
filter 是沿图片边缘走的阴影,但是当图片是直角人为hidden 图片任然会以直角形式展示。
案例:uniapp 框架中 使用 swiper 并在swiper给图片加阴影。