扬中网站,免费推广策略,画册设计及制作,网站策划书的意义新手前端别再被盒模型搞懵了#xff1a;10分钟彻底搞懂标准与怪异模式#xff08;附避坑指南#xff09;新手前端别再被盒模型搞懵了#xff1a;10分钟彻底搞懂标准与怪异模式#xff08;附避坑指南#xff09;盒模型到底是个啥#xff1f;改个 width 页面就炸了#x…新手前端别再被盒模型搞懵了10分钟彻底搞懂标准与怪异模式附避坑指南新手前端别再被盒模型搞懵了10分钟彻底搞懂标准与怪异模式附避坑指南盒模型到底是个啥改个 width 页面就炸了border、padding、content、margin 都在干啥盒模型的两种人格标准模式规规矩矩怪异模式放飞自我width 和 height 到底算谁的border-box 是不是魔法开关标准 VS 怪异一场关于宽度归属权的世纪大战那些年我们踩过的坑布局错乱、响应式崩坏、组件对不齐浏览器突然变傻DOCTYPE 没写怪异模式触发条件排查问题的土办法打开 DevTools 看 computed用 * { box-sizing: border-box } 一招封神真香但有副作用设计师给的图和你写的代码对不上聊聊如何和 UI 对齐你以为 responsive 只靠媒体查询盒模型才是幕后大佬盒模型冷知识inline 元素也有盒模型但 margin-top 不生效是为啥用生活例子秒懂盒模型披萨盒子 vs 披萨本身float padding 布局翻车盒模型背锅也可能是没清浮动想让元素精确占满容器小心默认的 content-box 在偷偷加宽调试小妙招临时加个 background-color outline立马看出谁在膨胀为什么老项目总用怪异模式历史包袱还是团队默契现代框架里还要操心盒模型吗别天真了底层还是 CSS盒模型和 flex/grid 能和平共处吗当然能但得搞清谁说了算最后唠一句盒模型不是知识点是你每天都在用的呼吸方式新手前端别再被盒模型搞懵了10分钟彻底搞懂标准与怪异模式附避坑指南说实话我刚学前端那会儿盒模型这玩意儿把我折磨得够呛。明明代码写得挺顺页面一刷新布局直接崩成抽象艺术。我当时就纳闷这width: 200px怎么实际占的地方比 200px 大后来才搞明白原来是盒模型在跟我玩捉迷藏。今天咱们就把这事儿掰开了揉碎了聊清楚。不搞那些教科书式的定义就按正常人能听懂的方式说。看完这篇保证你以后再遇到盒模型相关的问题能一眼看穿病根在哪儿。盒模型到底是个啥改个 width 页面就炸了这事儿得从我第一次写导航栏说起。当时我想做个横向排列的菜单每个li宽度设成 20%心想五个正好铺满。结果呢最后一个li死活挤不上去直接掉下去了。我检查了半天发现每个li都有左右 padding加起来正好超了 100%。这就是盒模型最坑人的地方——你以为你设的是内容宽度但浏览器算的是总宽度。咱们先画个图理解一下。盒模型本质上就是个俄罗斯套娃一层包一层最外层margin外边距透明不占背景色 第二层border边框有颜色有宽度 第三层padding内边距占背景色 最里层content内容区域文字图片放这儿看代码更直观.box{width:200px;/* 这行代码在不同模式下意思完全不同 */height:100px;padding:20px;border:5px solid #333;margin:10px;background-color:#f0f0f0;}在标准模式下这个元素实际占用的水平空间是200px (content) 20px*2 (padding) 5px*2 (border) 10px*2 (margin) 270px。但在怪异模式下width: 200px指的是从 border 左边到 border 右边的距离content 区域被压缩成了200px - 40px - 10px 150px。这就是为什么你改个 width 页面会炸——你以为是给内容定尺寸浏览器却理解成了给整个盒子定尺寸。两种模式下的200px根本不是一回事儿。border、padding、content、margin 都在干啥这四个家伙分工明确但新手经常搞混。咱们一个个说content内容区就是你写文字、放图片的地方。这个区域的尺寸由width和height控制至少在标准模式下是这样。padding内边距content 和 border 之间的留白。重点来了padding 是算在盒子内部的会继承背景色。比如你给一个按钮加 padding按钮的背景色会延伸到 padding 区域。/* 实战例子做个好看的按钮 */.btn{background-color:#007bff;color:white;/* 不加 padding 的话文字会贴边丑死 */padding:12px 24px;/* 上下12px左右24px */border:none;border-radius:4px;}border边框盒子的边界。可以设粗细、样式、颜色。border 也会占空间算在盒子尺寸里。margin外边距盒子和其他盒子之间的间距。margin 是透明的不继承背景色。这里有个坑margin 会发生外边距合并后面会细说。/* margin 合并的坑 */.box1{margin-bottom:20px;}.box2{margin-top:30px;}/* 两个盒子之间的间距不是 50px而是 30px大的那个赢了 */盒模型的两种人格标准模式规规矩矩怪异模式放飞自我这俩模式的区别说白了就是width 到底算到哪一层的问题。标准模式W3C 标准盒模型width和height只控制 content 区域总宽度 width padding border margin这是现代浏览器默认行为怪异模式IE 盒模型也叫 border-box 模式width和height控制的是 content padding border总宽度 width margin因为 width 已经包含了 padding 和 border这是 IE6 时代的遗留产物看个对比实验!DOCTYPEhtmlhtmlheadstyle.standard-box{box-sizing:content-box;/* 标准模式 */width:200px;padding:20px;border:5px solid red;background:#ffcccc;}.quirks-box{box-sizing:border-box;/* 怪异模式 */width:200px;padding:20px;border:5px solid blue;background:#ccccff;}/style/headbodydivclassstandard-box标准模式实际宽度 250px/divdivclassquirks-box怪异模式实际宽度 200px/div/body/html打开 DevTools 看计算后的尺寸标准模式的盒子实际占了 250px20020252怪异模式的盒子就是实打实的 200px。content 区域在怪异模式下被压缩成了 150px200-202-52。我个人觉得怪异模式更符合直觉——你告诉浏览器这个盒子宽 200px它就应该宽 200px而不是内容区 200px再加上一堆杂七杂八的。但历史选择了标准模式作为默认咱们只能接受现实。width 和 height 到底算谁的border-box 是不是魔法开关box-sizing这个属性就是用来切换两种模式的。它有两个主要值content-box默认值标准模式width 只算 contentborder-box怪异模式width 算 content padding border现在几乎所有前端项目都会在全局重置里加上*{box-sizing:border-box;}这招确实香但也不是没有副作用。首先它会影响所有元素包括第三方库的组件。有些 UI 框架比如老版本的 Bootstrap是基于 content-box 设计的你全局改成 border-box 可能会打乱它们的布局。更稳妥的做法是/* 只影响你自己写的代码不污染全局 */.my-component, .my-component *{box-sizing:border-box;}/* 或者用 inherit 技巧让子元素继承父级的 box-sizing */html{box-sizing:border-box;}*, *::before, *::after{box-sizing:inherit;}还有个冷知识box-sizing还能设padding-box意思是 width 包含 content 和 padding但不包含 border。但这个值只有 Firefox 支持基本没人用知道有这回事儿就行。标准 VS 怪异一场关于宽度归属权的世纪大战这事儿其实有段黑历史。当年 IE5 出来的时候微软自己搞了一套盒模型算法把 width 算到 border 为止。W3C 后来制定了标准说 width 应该只算 content。结果 IE6 为了兼容老页面搞了个怪异模式——如果页面没写正确的 DOCTYPE就用老算法写了就用标准算法。这就导致了前端历史上最恶心的兼容性问题之一。同一份代码有没有 DOCTYPE渲染结果完全不同。!-- 这样写触发标准模式 --!DOCTYPEhtml!-- 这样写可能触发怪异模式取决于浏览器 --html现在现代浏览器都比较规范了只要写了!DOCTYPE html就是标准模式。但你要是接手一些老项目或者写邮件模板对邮件客户端的 CSS 支持还停留在石器时代还是会遇到怪异模式。有个经典面试题给定一个元素width: 100px; padding: 10px; border: 5px solid; margin: 10px在两种模式下实际占用的总宽度分别是多少标准模式100 10*2 5*2 10*2 150px怪异模式100 10*2 120px因为 width 已经包含 padding 和 border 了记住这个区别面试遇到能秒答。那些年我们踩过的坑布局错乱、响应式崩坏、组件对不齐坑一百分比宽度 固定 padding 爆炸/* 想做个三列布局每列 33.33% */.col{width:33.33%;float:left;padding:20px;/* 完了加起来超过 100% 了 */}在标准模式下每个 col 实际宽度是33.33% 40px三个肯定挤不下。解决办法要么用 border-box要么用 flexbox 不用 float。坑二响应式图片撑破容器.img-container{width:100%;padding:20px;/* 标准模式下图片宽度变成 100% 40px出现横向滚动条 */}.img-container img{width:100%;}坑三组件库样式冲突你用了某个 UI 库的 Button 组件它内部是基于 content-box 算的宽度。你全局设了 border-box结果按钮在某些情况下宽度不对了。这种坑最难找因为看起来像是组件 bug其实是盒模型被改了。浏览器突然变傻DOCTYPE 没写怪异模式触发条件现代浏览器触发怪异模式的情况已经很少了但还是有几种情况要注意DOCTYPE 写错或没写!-- 正确 --!DOCTYPEhtml!-- 错误示例可能触发怪异模式 --!DOCTYPEHTMLPUBLIC-//W3C//DTD HTML 4.01 Transitional//EN!DOCTYPEhtmlSYSTEMabout:legacy-compatIE 的兼容性视图IE 有个兼容性视图设置强制用 IE7 模式渲染那就是怪异模式。iframe 里的页面如果父页面是怪异模式iframe 里的页面可能继承这个模式。某些企业级老系统我接过一项目HTML 文件开头是!-- saved from url(0014)about:internet --html这种是 IE 保存网页时加的标记也会触发怪异模式。怎么检查当前是什么模式在控制台输入document.compatMode// 返回 CSS1Compat 是标准模式// 返回 BackCompat 是怪异模式排查问题的土办法打开 DevTools 看 computed别光盯着你的 CSS 代码看浏览器实际算出来的尺寸可能完全不一样。Chrome DevTools 里有个Computed计算后样式面板能看到元素最终的宽高、padding、border、margin 具体是多少。还有个技巧在 Elements 面板里把鼠标悬停在某个元素上页面上会出现一个半透明的 overlay用不同颜色显示 content蓝色、padding绿色、border橙色、margin黄色。一眼就能看出哪部分在膨胀。如果怀疑是盒模型问题可以临时给元素加个醒目的背景色.debug{background:rgba(255,0,0,0.3)!important;outline:2px solid red!important;}outline 不占用空间不会影响布局比 border 更适合调试。用* { box-sizing: border-box }一招封神真香但有副作用前面说了这招很香但具体香在哪看例子/* 没重置时写这种布局要算数学 */.card{width:calc(33.33% - 40px);/* 减去左右 padding */padding:20px;float:left;}/* 重置 border-box 后直观多了 */.card{width:33.33%;padding:20px;float:left;}但副作用也得知道伪元素也被影响了::before和::after默认是 inline 元素但你可能希望它们有特定的盒模型行为。第三方组件可能崩比如有些日期选择器、富文本编辑器是基于 content-box 精确计算尺寸的你一改全局设置它们的弹出层位置可能偏移。SVG 元素SVG 的 width/height 行为本来就跟 HTML 元素不一样虽然现代浏览器对 SVG 应用 box-sizing 没啥问题但老浏览器可能有怪现象。所以更推荐的做法是html{box-sizing:border-box;}*, *::before, *::after{box-sizing:inherit;}这样如果你想让某个组件恢复 content-box只需要.weird-component{box-sizing:content-box;}/* 它的子元素会继承 content-box */设计师给的图和你写的代码对不上聊聊如何和 UI 对齐这事儿我经历过无数次。设计师在 Figma 里画了个 200px 宽的按钮标注 padding 20px我写了.btn{width:200px;padding:20px;}结果设计师验收时说按钮太宽了应该是 200px 总宽不是内容 200px。这就是典型的盒模型理解不一致。现在我和 UI 对接时第一句话就是“你标的宽度是内容区还是总宽度” 如果是总宽度我就用 border-box如果是内容区就用 content-box。还有个技巧让设计师导出设计稿时把 padding、border 都明确标出来。Figma 有个Dev Mode开发模式能直接显示元素的盒模型信息包括 padding、margin。用这个对齐能减少很多扯皮。你以为 responsive 只靠媒体查询盒模型才是幕后大佬响应式布局的核心是元素能自适应容器宽度。如果盒模型理解错了自适应就是空谈。比如你想做个侧边栏固定 300px主内容区自适应剩余宽度的布局/* 错误示范标准模式下会撑破容器 */.container{width:100%;}.sidebar{width:300px;float:left;padding:20px;/* 实际 340px */}.main{width:calc(100% - 300px);float:left;padding:20px;/* 加上 sidebar 的实际宽度超过 100% 了 */}/* 正确做法用 border-box或者 flexbox */.container{display:flex;}.sidebar{width:300px;padding:20px;flex-shrink:0;/* 防止被压缩 */}.main{flex:1;/* 占满剩余空间 */padding:20px;}flexbox 和 grid 本质上是在更高维度控制布局但底层每个 flex item、grid cell 内部还是盒模型在管。flex 的flex-basis属性默认就是基于 content-box 算的除非你显式指定box-sizing: border-box。盒模型冷知识inline 元素也有盒模型但 margin-top 不生效是为啥很多人以为只有 block 元素有盒模型其实 inline 元素也有只是表现不一样。spanstylepadding:20px;border:2px solid red;margin:20px;我是个 inline 元素/span你会发现padding 和 border 在左右方向生效上下方向也生效会撑大背景但不会推开上下行的文字margin 只有左右生效上下 margin 完全无视这就是 inline 元素的特性它不会破坏文本流的行高。你想让 margin-top 生效得先让它变成 inline-block 或 block.inline-box{display:inline-block;/* 现在 margin-top 生效了但会独占一行空间 */margin-top:20px;padding:10px;border:1px solid #333;}还有个更冷的知识inline元素的 width 和 height 设置是无效的它的宽高完全由内容决定。想控制尺寸还是得 inline-block 或 block。用生活例子秒懂盒模型披萨盒子 vs 披萨本身我给别人讲盒模型时最喜欢用披萨比喻content披萨本身你实际要吃的东西芝士、火腿都在这儿padding披萨边那个没料的面包边虽然不吃或者说不是主要内容但属于盒子内部占地方border盒子边框装披萨的纸盒边缘有厚度有颜色margin外卖袋里的空隙披萨盒和外卖袋之间的空间防止挤压现在想象你点了个12寸披萨标准模式下12寸指的是披萨饼底的直径加上边和盒子实际占的空间更大怪异模式下12寸指的是整个盒子的直径披萨饼底会被压缩小一点这样是不是直观多了下次遇到盒模型问题想想披萨思路就清晰了。float padding 布局翻车盒模型背锅也可能是没清浮动float 布局是老前端的眼泪。当年没有 flexbox所有多列布局都靠 float 实现。但 float 有个特性元素脱离文档流但还占空间半脱离。常见问题父元素高度塌陷。因为 float 元素不计算在父元素高度内如果父元素没设高度就会变成 0。.container{background:#f0f0f0;/* 没设高度也没清浮动背景色不显示 */}.float-item{float:left;width:50%;padding:20px;box-sizing:border-box;/* 假设你用了 border-box */}解决办法/* 方案一clearfix */.container::after{content:;display:table;clear:both;}/* 方案二BFC */.container{overflow:hidden;/* 触发 BFC包住 float 子元素 */}/* 方案三现代方案别用 float 了 */.container{display:flex;}但有时候布局乱了你以为是 float 的问题其实是盒模型算错了宽度导致 float 元素挤不下去。所以排查时要两头看先看盒模型尺寸对不对再看 float 清除没。想让元素精确占满容器小心默认的 content-box 在偷偷加宽经典场景做一个铺满屏幕的 hero section但两边要留 40px 的边距。/* 错误出现横向滚动条 */.hero{width:100%;padding:0 40px;}/* 正确 */.hero{width:100%;padding:0 40px;box-sizing:border-box;}或者直接用 calc.hero{width:calc(100% - 80px);margin:0 40px;}但 calc 方案有个问题如果父元素本身有 paddingcalc 算的是父元素的 content 宽度可能还是不对。所以 border-box 还是最省心的。调试小妙招临时加个 background-color outline立马看出谁在膨胀这招我每天都在用。怀疑某个元素尺寸不对时直接 DevTools 里加outline:2px solid red!important;background:rgba(255,0,0,0.1)!important;outline 不占用空间不会把布局进一步搞乱。background 能看出元素的边界在哪。如果加了之后发现红色区域比预期大那就是 padding 或 border 在搞鬼。Chrome 还有个Layout面板在 DevTools 的更多工具里能可视化显示页面的盒模型层级适合看复杂的嵌套布局。为什么老项目总用怪异模式历史包袱还是团队默契接过 legacy 项目的兄弟应该懂打开 HTML 文件发现没有 DOCTYPE或者 DOCTYPE 是 HTML 4 的 Transitional 类型心里就一沉。老项目用怪异模式通常有几个原因当年 IE 兼容性IE6/7 时代标准模式有很多 bug怪异模式反而表现更稳定虽然不符合标准但至少 IE 内部是一致的。复制粘贴的模板有些老项目的 HTML 模板是 2005 年写的一直复制粘贴到现在没人敢改。能跑就别动的心态有些团队知道有问题但怕改了 DOCTYPE 整个页面布局崩掉就一直拖着。内网系统有些企业内网系统只要求 IE 能打开反正用户都是 IE怪异模式就怪异模式吧。我的建议是如果是维护老项目先别急着改 DOCTYPE用 JavaScript 检测当前模式if(document.compatModeBackCompat){console.warn(当前是怪异模式建议升级到标准模式);// 或者给 body 加 class写两套 CSSdocument.body.classList.add(quirks-mode);}如果是新项目一定要写!DOCTYPE html这是底线。现代框架里还要操心盒模型吗别天真了底层还是 CSS用 React、Vue 写组件时很多人习惯用 CSS-in-JS 或者 scoped CSS觉得框架会帮忙处理这些底层问题。但框架只是帮你组织代码渲染到浏览器里还是普通的 HTML 和 CSS。我见过一个 React 项目用了 styled-components全局没重置 box-sizing结果每个组件都要手动算宽度const Card styled.div width: calc(33.33% - 32px); /* 减去 padding 和 border */ padding: 16px; border: 1px solid #eee; ;后来我在项目的 global style 里加了*{box-sizing:border-box;}删掉了一堆 calc代码干净多了。还有 CSS Modules 的项目因为每个组件的 CSS 是独立的容易忘记在全局设置 box-sizing。建议在每个项目的入口文件比如 React 的 index.js、Vue 的 main.js引入的 global.css 里统一设置。盒模型和 flex/grid 能和平共处吗当然能但得搞清谁说了算flexbox 和 grid 带来了新的尺寸计算方式但盒模型还在底层起作用。flex 的 flex-basis vs widthflex-basis定义的是元素在分配剩余空间之前的理想尺寸默认情况下flex-basis 是基于 content-box 算的如果同时设置了flex-basis和widthflex-basis 优先级更高在非 0 flex-grow/flex-shrink 时.flex-item{box-sizing:border-box;flex-basis:200px;padding:20px;border:5px solid #333;/* 最终宽度是 200pxborder-boxcontent 区域是 150px */}grid 的 fr 单位fr是分配剩余空间的单位但元素的实际尺寸还要考虑 gap、padding、border如果 grid item 用了 border-box计算会更直观.grid-container{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}.grid-item{box-sizing:border-box;padding:20px;/* 每个 item 占据 (100% - 40px) / 3 的宽度content 区域再减去 40px padding */}有个坑grid 的gap属性只在 grid container 上有效如果 grid item 内部有子元素子元素的 margin 还是按普通盒模型算不会自动避开 gap。最后唠一句盒模型不是知识点是你每天都在用的呼吸方式写这篇文章的时候我回想了一下好像真的没有哪一天写 CSS 不用到盒模型的。从最简单的按钮 padding到复杂的 grid 布局底层都是这四个盒子在套娃。新手容易把盒模型当成一个需要记住的知识点背完标准模式和怪异模式的区别考完试就忘了。但实际上它是你写 CSS 时的直觉基础。就像你学开车时学换挡熟练之后根本不用想手自动就去了。我现在写 CSS脑子里会自动浮现那层叠的盒子设 width 时先想一下这是要总宽还是内容宽加 padding 时想一下这会不会把布局撑爆调 margin 时想一下会不会和隔壁元素发生外边距合并。这些思考已经内化成习惯了。所以别死记硬背多写代码多翻车多调试。翻够 20 次车盒模型就刻在你 DNA 里了。到时候你会发现那些布局难题归根到底都是盒模型在跟你对话——听懂它在说什么问题就解决了一半。好了今天就聊到这儿。去写代码吧记得加 DOCTYPE。欢迎来到我的博客很高兴能够在这里和您见面希望您在这里可以感受到一份轻松愉快的氛围不仅可以获得有趣的内容和知识也可以畅所欲言、分享您的想法和见解。推荐DTcode7的博客首页。一个做过前端开发的产品经理经历过睿智产品的折磨导致脱发之后励志要翻身农奴把歌唱一边打入敌人内部一边持续提升自己为我们广大开发同胞谋福祉坚决抵制睿智产品折磨我们码农兄弟专栏系列点击解锁学习路线(点击解锁知识定位《微信小程序相关博客》持续更新中~结合微信官方原生框架、uniapp等小程序框架记录请求、封装、tabbar、UI组件的学习记录和使用技巧等《AIGC相关博客》持续更新中~AIGC、AI生产力工具的介绍例如stable diffusion这种的AI绘画工具安装、使用、技巧等总结《HTML网站开发相关》《前端基础入门三大核心之html相关博客》前端基础入门三大核心之html板块的内容入坑前端或者辅助学习的必看知识《前端基础入门三大核心之JS相关博客》前端JS是JavaScript语言在网页开发中的应用负责实现交互效果和动态内容。它与HTML和CSS并称前端三剑客共同构建用户界面。通过操作DOM元素、响应事件、发起网络请求等JS使页面能够响应用户行为实现数据动态展示和页面流畅跳转是现代Web开发的核心《前端基础入门三大核心之CSS相关博客》介绍前端开发中遇到的CSS疑问和各种奇妙的CSS语法同时收集精美的CSS效果代码用来丰富你的web网页《canvas绘图相关博客》Canvas是HTML5中用于绘制图形的元素通过JavaScript及其提供的绘图API开发者可以在网页上绘制出各种复杂的图形、动画和图像效果。Canvas提供了高度的灵活性和控制力使得前端绘图技术更加丰富和多样化《Vue实战相关博客》持续更新中~详细总结了常用UI库elementUI的使用技巧以及Vue的学习之旅《python相关博客》持续更新中~Python简洁易学的编程语言强大到足以应对各种应用场景是编程新手的理想选择也是专业人士的得力工具《sql数据库相关博客》持续更新中~SQL数据库高效管理数据的利器学会SQL轻松驾驭结构化数据解锁数据分析与挖掘的无限可能《算法系列相关博客》持续更新中~算法与数据结构学习总结通过JS来编写处理复杂有趣的算法问题提升你的技术思维《IT信息技术相关博客》持续更新中~作为信息化人员所需要掌握的底层技术涉及软件开发、网络建设、系统维护等领域的知识《信息化人员基础技能知识相关博客》无论你是开发、产品、实施、经理只要是从事信息化相关行业的人员都应该掌握这些信息化的基础知识可以不精通但是一定要了解避免日常工作中贻笑大方《信息化技能面试宝典相关博客》涉及信息化相关工作基础知识和面试技巧提升自我能力与面试通过率扩展知识面《前端开发习惯与小技巧相关博客》持续更新中~罗列常用的开发工具使用技巧,如 Vscode快捷键操作、Git、CMD、游览器控制台等《photoshop相关博客》持续更新中~基础的PS学习记录含括PPI与DPI、物理像素dp、逻辑像素dip、矢量图和位图以及帧动画等的学习总结日常开发办公生产【实用工具】分享相关博客》持续更新中~分享介绍各种开发中、工作中、个人生产以及学习上的工具丰富阅历给大家提供处理事情的更多角度学习了解更多的便利工具如Fiddler抓包、办公快捷键、虚拟机VMware等工具吾辈才疏学浅摹写之作恐有瑕疵。望诸君海涵赐教。望轻喷嘤嘤嘤非常期待和您一起在这个小小的网络世界里共同探索、学习和成长。愿斯文对汝有所裨益纵其简陋未及渊博亦足以略尽绵薄之力。倘若尚存阙漏敬请不吝斧正俾便精进