box-sizing:border-box;为什么会失效？

鹿它野 2019-07-11 08:19:49

我在给一个元素浮动之后，并且也清除浮动了，然后在给这个元素设置了固定高度的情况下，设置了padding-bottom，然后也设置了border-box.为什么高度还是在原来设置的基础上又增加了？之前设置这个属性是不改变宽高的基础下，也可以设置padding 之类的，求大神告知

...全文

3179 1 打赏收藏转发到动态举报

写回复

1 条回复

切换为时间正序

请发表友善的回复…

发表回复

潇湘忆梦 2019-07-11

打赏
举报

回复

这个概念并没有错，把代码贴出来看下

本文探讨了当父元素使用 position: relative; 与子元素使用 position: absolute; 时导致的盒子布局失效问题。

博客针对微信小程序中设置padding失效的问题，给出了解决办法，即在代码里添加box-sizing:border-box;，为开发者解决此类问题提供了有效方案。

探讨在使用CSS的绝对定位时，box-sizing:border-box属性为何会失效。文章通过实例说明，当元素脱离正常文档流，原本的宽度限制将不再适用。

本文探讨了在微信小程序中遇到的padding样式失效的问题，通过添加box-sizing:border-box;来恢复正常布局。

本文深入解析CSS3中box-sizing属性的工作机制，对比content-box与border-box在布局中的差异，揭示因盒模型误解导致的常见问题如元素溢出、对齐错乱和断点失效，并提供实用解决方案。通过开发者工具调试技巧、全局重置策略及组件封装方法，帮助前端开发者高效规避陷阱，实现精准可控的页面布局。

61,122

社区成员

60,705

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章