【BUG日记】【CSS】top和bottom、left和right同时存在的时候,left、top优先级最高(无论class、style、!import)

简介: 【BUG日记】【CSS】top和bottom、left和right同时存在的时候,left、top优先级最高(无论class、style、!import)

【日期】


2022/3/18


【问题】


今天在实现项目功能的时候,发现top和bottom如果同时存在,不管top和bottom位置放在哪里的样式,top一直都比bottom的优先级高,left和right同时存在的时候也是一样,left一直会比right的优先级高。然后就导致功能失效。


「存在问题Demo的展示」


微信截图_20220520115113.png


「需要做到Demo的展示」


微信截图_20220520115123.png

【原因】


top和bottom、left和right同时存在的时候,left、top优先级最高(无论class、style、!import)


【如何发现】


想要完善实现功能的时候,发现的,这个可真是狠啊!


【如何修复】


细心的朋友可能看到了,在想要做到的demo展示图里,只需要对top、left添加上auto即可解决问题!


(ps:大佬指点,感谢春哥(摸鱼的春哥),yyds!)


【总结】


遇到凡事不要慌,先去问问大佬(春哥).


文章小尾巴


文章写作、模板、文章小尾巴可参考:《写作“小心思”》


  感谢你看到最后,最后再说两点~


  ①如果你持有不同的看法,欢迎你在文章下方进行留言、评论。

  ②如果对你有帮助,或者你认可的话,欢迎给个小点赞,支持一下~


  我是南方者,一个热爱计算机更热爱祖国的南方人。


  (文章内容仅供学习参考,如有侵权,非常抱歉,请立即联系作者删除。)



目录
相关文章
|
7月前
|
前端开发 算法
CSS语言的层叠和优先级
CSS语言的层叠和优先级
|
7月前
|
Web App开发 前端开发
CSS id 和 class
【5月更文挑战第3天】CSS id 和 class。
49 10
|
3月前
|
前端开发 JavaScript 容器
谁动了我的选择器?深入理解CSS选择器优先级
该文章详细解释了CSS选择器的工作原理,包括不同种类选择器的权重计算规则,并通过实例说明了如何解决样式冲突问题,确保所需的样式能够正确应用到目标元素上。
|
3月前
|
前端开发
前端基础(四)_CSS层叠样式表_什么是css_css样式的引入方式_样式表的优先级_样式选择器
本文详细介绍了CSS(层叠样式表)的基本概念、语法规则、引入方式、样式表的优先级和样式选择器。文章解释了CSS的作用,展示了如何在HTML中通过行内样式、内部样式和外部样式引入CSS,讨论了不同CSS选择器的优先级和如何确定最终的样式应用。此外,还强调了使用`!important`规则时的优先级高于行内样式。
93 1
|
5月前
|
前端开发 JavaScript API
深入理解css中的link 和 @import
【7月更文挑战第3天】CSS中的link与@import有显著差异。link是HTML标签,用于并行加载CSS,支持动态插入,用途广泛,如加载图标。@import是CSS语法,加载顺序在页面解析后,不支持动态引入,但可在CSS中导入多个样式表。link在性能和兼容性上优于@import。优选link,@import适用于多文件组织样式。
106 1
深入理解css中的link 和 @import
|
4月前
|
前端开发 JavaScript
css的import
css的import
45 0
|
5月前
|
前端开发 JavaScript 算法
CSS【详解】样式选择器的优先级(含提升优先级的方法)
CSS【详解】样式选择器的优先级(含提升优先级的方法)
136 0
CSS【详解】样式选择器的优先级(含提升优先级的方法)
|
6月前
|
前端开发 开发者
深入解析CSS样式表的优先级
深入解析CSS样式表的优先级
|
5月前
|
前端开发
【UI】 elementui的dialog弹窗打开时CSS的BUG | 滚动条消失bug
【UI】 elementui的dialog弹窗打开时CSS的BUG | 滚动条消失bug
182 0
|
6月前
|
前端开发 开发者
CSS基础-层叠与优先级
【6月更文挑战第10天】本文探讨了CSS中的层叠和优先级概念,解释了层叠上下文和特异性如何决定样式生效。常见问题包括误解后来居上的规则、特异性计算错误及过度使用`!important`。建议开发者理解特异性计算,合理使用层叠上下文,避免不必要的`!important`。通过示例展示了特异性与`!important`对样式的影响,强调实践和理解是提升CSS技能的核心。
44 1