【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!)


【总结】


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


文章小尾巴


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


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


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

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


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


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



目录
打赏
0
0
0
0
0
分享
相关文章
CSS id 和 class
【5月更文挑战第3天】CSS id 和 class。
88 10
谁动了我的选择器?深入理解CSS选择器优先级
该文章详细解释了CSS选择器的工作原理,包括不同种类选择器的权重计算规则,并通过实例说明了如何解决样式冲突问题,确保所需的样式能够正确应用到目标元素上。
|
10月前
|
前端基础(四)_CSS层叠样式表_什么是css_css样式的引入方式_样式表的优先级_样式选择器
本文详细介绍了CSS(层叠样式表)的基本概念、语法规则、引入方式、样式表的优先级和样式选择器。文章解释了CSS的作用,展示了如何在HTML中通过行内样式、内部样式和外部样式引入CSS,讨论了不同CSS选择器的优先级和如何确定最终的样式应用。此外,还强调了使用`!important`规则时的优先级高于行内样式。
416 1
深入理解css中的link 和 @import
【7月更文挑战第3天】CSS中的link与@import有显著差异。link是HTML标签,用于并行加载CSS,支持动态插入,用途广泛,如加载图标。@import是CSS语法,加载顺序在页面解析后,不支持动态引入,但可在CSS中导入多个样式表。link在性能和兼容性上优于@import。优选link,@import适用于多文件组织样式。
214 1
深入理解css中的link 和 @import
css的import
css的import
143 0
CSS【详解】样式选择器的优先级(含提升优先级的方法)
CSS【详解】样式选择器的优先级(含提升优先级的方法)
419 0
CSS【详解】样式选择器的优先级(含提升优先级的方法)
CSS基础-层叠与优先级
【6月更文挑战第10天】本文探讨了CSS中的层叠和优先级概念,解释了层叠上下文和特异性如何决定样式生效。常见问题包括误解后来居上的规则、特异性计算错误及过度使用`!important`。建议开发者理解特异性计算,合理使用层叠上下文,避免不必要的`!important`。通过示例展示了特异性与`!important`对样式的影响,强调实践和理解是提升CSS技能的核心。
96 1
CSS基础-CSS选择器:ID、Class、Tag
【6月更文挑战第7天】本文介绍了CSS中的三种基本选择器:ID、Class和Tag选择器。Tag选择器适用于统一设置同类型元素样式,但可能造成样式泛化;Class选择器灵活性高,适合复用,注意命名规范和避免过度使用;ID选择器具有最高优先级,用于唯一标识,应谨慎使用。理解其特点和场景,结合良好命名规范,能提升CSS代码效率和可维护性。
204 2

热门文章

最新文章

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问