CSS通用样式设置_设置box-sizing:border-box的必要性

林译川
2026-10-22 • 👁 0人浏览过
box-sizing: border-box 能解决“设了 width 却撑出父容器”的问题，因为它将 width/height 定义为盒子总宽高，自动将 padding 和 border 计入其中，避免内容区+内边距+边框导致的溢出。 box-sizing: border-box 为什么能解决“设了 width 却撑出父容器”的问题因为默认的
box-sizing: content-box
把
width
和
height
理解成“内容区尺寸”，边框和内边距额外加在上面。你写
width: 200px; padding: 10px; border: 1px solid
，实际占宽是 222px —— 这就是布局错位、换行、溢出的根源。设成
border-box
后，
width
指的是“整个盒子总宽”，浏览器自动把 padding 和 border 往里缩，内容区变窄，但整体尺寸可控。所有现代浏览器都支持，IE8+ 完全兼容不改变盒模型逻辑，只改尺寸归属定义，无副作用对表单控件（如
、
</code></div>
）影响明显：它们默认是
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">content-box</code></div>
，常导致横向滚动或截断
全局设置时，哪些元素要特别注意重置
用
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">* { box-sizing: border-box; }</code></div>
最省事，但有例外：
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><textarea></code></div>
在部分旧版 Safari 中会因
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">resize</code></div>
行为异常，建议单独加
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">resize: both;</code></div>
或限制宽高
第三方 UI 库（如 Bootstrap 4+ 已内置，但 v3 没有）可能没适配，若发现组件尺寸突变，检查是否被全局覆盖又没重置
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">iframe</code></div>
、
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">canvas</code></div>
、
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">video</code></div>
等替换元素不受影响，无需处理
稳妥做法是：
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">*, *::before, *::after { box-sizing: border-box; }</code></div>
，再针对
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">textarea</code></div>
补一句
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">textarea { resize: vertical; }</code></div>
防止意外拉伸。
立即学习
“
前端免费学习笔记（深入）
”；
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
Flex/Grid 布局里，box-sizing 不设会出什么具体问题
Flex 项或 Grid 单元格如果用
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">content-box</code></div>
，哪怕写了
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">flex: 1</code></div>
或
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">grid-column: span 2</code></div>
，只要带
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">padding</code></div>
或
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">border</code></div>
，就可能突破分配空间，触发 flex-shrink 强制压缩，或让 grid track 被撑大。
典型现象：两列等宽布局，右边列莫名比左边窄；或设置了
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">min-width: 0</code></div>
才不溢出
Grid 中
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">fr</code></div>
单位计算基于轨道净尺寸，
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">content-box</code></div>
下的 padding/border 会吃掉本该给内容的空间
修复成本低：加一行
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">box-sizing: border-box</code></div>
，比反复调
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">min-width</code></div>
、
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">overflow</code></div>
、
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">flex-basis</code></div>
快得多
要不要在 CSS 重置里删掉 box-sizing 声明
不要删。即使用了 modern-normalize 或 reset.
css
，它们大多不设
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">box-sizing</code></div>
—— 这不是“重置”范畴，而是“行为约定”。CSS 重置的目标是消除浏览器差异，而
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">box-sizing</code></div>
是开发者主动选择的尺寸模型。
PostCSS 插件如
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">postcss-normalize</code></div>
默认不包含
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">box-sizing</code></div>
，需手动加
Tailwind 默认开启
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">border-box</code></div>
，说明它已是现代 CSS 的事实标准
唯一可删的情况：维护一个必须兼容 IE7 的古董系统（但那也不该用 CSS3 布局）
真正容易被忽略的是：动态插入的 DOM（比如 JS 创建的
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto"><div></code></div>
）不会继承父级
<div class="cxy-code-block"><button class="cxy-code-copy" aria-label="复制代码">复制</button><code class="language-auto">box-sizing</code></div>
，它靠的是全局通配符或继承链 —— 所以通配符那行不能少，也不能只写在某个局部 scope 里。
                            </div>

                            <!-- 文章导航 -->
                            <nav class="xjpbg-article-nav" aria-label="文章导航">

    
                                <a href="http://www.xjpbg.com/bg/28663.html" class="xjpbg-article-nav-link xjpbg-article-nav-prev">
                                    <span>‹</span>
                                    <div>
                                        <div class="xjpbg-article-nav-label">上一篇</div>
                                        <div class="xjpbg-article-nav-title">网页加载进度页面_html/css_WEB-ITnose</div>
                                    </div>
                                </a>
    


    
                                <a href="http://www.xjpbg.com/bg/28736.html" class="xjpbg-article-nav-link xjpbg-article-nav-next">
                                    <div>
                                        <div class="xjpbg-article-nav-label">下一篇</div>
                                        <div class="xjpbg-article-nav-title">用css动态生成闪字的代码_经验交流</div>
                                    </div>
                                    <span>›</span>
                                </a>
    

                            </nav>
                        </div>
                    </article>

                    <!-- 相关文章列表 -->
                    <section class="xjpbg-content-section" style="margin-top: 20px;">
                        <h2 class="xjpbg-widget-title" style="margin-bottom: 20px;">相关文章</h2>
                        <ul class="xjpbg-article-list">

    
                            <li class="xjpbg-article-item">
                                <a href="http://www.xjpbg.com/bg/28663.html" class="xjpbg-article-link">网页加载进度页面_html/css_WEB-ITnose</a>
                                <div class="xjpbg-article-meta">2026-10-22</div>
                            </li>
    
                            <li class="xjpbg-article-item">
                                <a href="http://www.xjpbg.com/bg/28662.html" class="xjpbg-article-link">让页面动起来的WOW.js</a>
                                <div class="xjpbg-article-meta">2026-10-22</div>
                            </li>
    
                            <li class="xjpbg-article-item">
                                <a href="http://www.xjpbg.com/bg/28660.html" class="xjpbg-article-link">CSS3 Flexbox该怎么使用？</a>
                                <div class="xjpbg-article-meta">2026-10-22</div>
                            </li>
    
                            <li class="xjpbg-article-item">
                                <a href="http://www.xjpbg.com/bg/28637.html" class="xjpbg-article-link">javascript 中String.match()与RegExp.exec()的区别说明_javascript技巧</a>
                                <div class="xjpbg-article-meta">2026-10-22</div>
                            </li>
    
                            <li class="xjpbg-article-item">
                                <a href="http://www.xjpbg.com/bg/28628.html" class="xjpbg-article-link">深入理解JavaScript async/await：链式处理异步分页数据</a>
                                <div class="xjpbg-article-meta">2026-10-22</div>
                            </li>
    
                            <li class="xjpbg-article-item">
                                <a href="http://www.xjpbg.com/bg/28736.html" class="xjpbg-article-link">用css动态生成闪字的代码_经验交流</a>
                                <div class="xjpbg-article-meta">2026-10-22</div>
                            </li>
    
                            <li class="xjpbg-article-item">
                                <a href="http://www.xjpbg.com/bg/28764.html" class="xjpbg-article-link">javascript模拟post提交隐藏地址栏的参数_javascript技巧</a>
                                <div class="xjpbg-article-meta">2026-10-22</div>
                            </li>
    
                            <li class="xjpbg-article-item">
                                <a href="http://www.xjpbg.com/bg/28797.html" class="xjpbg-article-link">50款非常棒的 jQuery 插件分享</a>
                                <div class="xjpbg-article-meta">2026-10-23</div>
                            </li>
    
                            <li class="xjpbg-article-item">
                                <a href="http://www.xjpbg.com/bg/28887.html" class="xjpbg-article-link">Photoshop给字体加粗的20种方法图文介绍</a>
                                <div class="xjpbg-article-meta">2026-10-23</div>
                            </li>
    
                            <li class="xjpbg-article-item">
                                <a href="http://www.xjpbg.com/bg/28925.html" class="xjpbg-article-link">JavaScript实现按钮控制Div颜色切换的教程</a>
                                <div class="xjpbg-article-meta">2026-10-23</div>
                            </li>
    

                        </ul>
                    </section>
                </div>

                <!-- 右侧边栏 -->
                <aside class="xjpbg-sidebar xjpbg-sidebar-right" aria-label="侧边栏">
    <!-- 推荐阅读 -->
    <div class="xjpbg-widget">
        <h3 class="xjpbg-widget-title">推荐阅读</h3>
        <div class="xjpbg-recommend-grid">

    
            <a href="http://www.xjpbg.com/bg/33550.html" class="xjpbg-recommend-item">
                <div class="xjpbg-recommend-thumb">
                    <img src="http://www.xjpbg.com/static/v6/images/article-6.jpg" alt="为什么Bootstrap 5移除了jQuery对性能有何提升_探讨原生JS与CSS变量的结合应用">
                </div>
                <div class="xjpbg-recommend-title">为什么Bootstrap 5移除了jQuery对性能有何提升_探讨原生JS与CSS变量的结合应用</div>
            </a>
    
            <a href="http://www.xjpbg.com/bg/33546.html" class="xjpbg-recommend-item">
                <div class="xjpbg-recommend-thumb">
                    <img src="http://www.xjpbg.com/static/v6/images/article-6.jpg" alt="jQuery统计指定子元素数量的方法_jquery">
                </div>
                <div class="xjpbg-recommend-title">jQuery统计指定子元素数量的方法_jquery</div>
            </a>
    
            <a href="http://www.xjpbg.com/bg/33525.html" class="xjpbg-recommend-item">
                <div class="xjpbg-recommend-thumb">
                    <img src="http://www.xjpbg.com/static/v6/images/article-6.jpg" alt="如何利用Vue表单处理实现表单的数据筛选与过滤">
                </div>
                <div class="xjpbg-recommend-title">如何利用Vue表单处理实现表单的数据筛选与过滤</div>
            </a>
    
            <a href="http://www.xjpbg.com/bg/33512.html" class="xjpbg-recommend-item">
                <div class="xjpbg-recommend-thumb">
                    <img src="http://www.xjpbg.com/static/v6/images/article-6.jpg" alt="javascript一点特殊用法_javascript技巧">
                </div>
                <div class="xjpbg-recommend-title">javascript一点特殊用法_javascript技巧</div>
            </a>
    

        </div>
    </div>

    <!-- 最新文章 -->
    <div class="xjpbg-widget">
        <h3 class="xjpbg-widget-title">最新文章</h3>
        <ul class="xjpbg-article-list">

    
            <li class="xjpbg-article-item">
                <a href="http://www.xjpbg.com/bg/33550.html" class="xjpbg-article-link">为什么Bootstrap 5移除了jQuery对性能有何提升_探讨原生JS与CSS变量的结合应用</a>
                <div class="xjpbg-article-meta">2026-10-30</div>
            </li>
    
            <li class="xjpbg-article-item">
                <a href="http://www.xjpbg.com/bg/33546.html" class="xjpbg-article-link">jQuery统计指定子元素数量的方法_jquery</a>
                <div class="xjpbg-article-meta">2026-10-30</div>
            </li>
    
            <li class="xjpbg-article-item">
                <a href="http://www.xjpbg.com/bg/33525.html" class="xjpbg-article-link">如何利用Vue表单处理实现表单的数据筛选与过滤</a>
                <div class="xjpbg-article-meta">2026-10-30</div>
            </li>
    
            <li class="xjpbg-article-item">
                <a href="http://www.xjpbg.com/bg/33512.html" class="xjpbg-article-link">javascript一点特殊用法_javascript技巧</a>
                <div class="xjpbg-article-meta">2026-10-30</div>
            </li>
    
            <li class="xjpbg-article-item">
                <a href="http://www.xjpbg.com/bg/33471.html" class="xjpbg-article-link">js中toString方法3个作用</a>
                <div class="xjpbg-article-meta">2026-10-30</div>
            </li>
    
            <li class="xjpbg-article-item">
                <a href="http://www.xjpbg.com/bg/33456.html" class="xjpbg-article-link">CSS focus伪类在表单中的应用_提升输入框的视觉焦点</a>
                <div class="xjpbg-article-meta">2026-10-30</div>
            </li>
    

        </ul>
    </div>

    <!-- 热门标签 -->
    <div class="xjpbg-widget">
        <h3 class="xjpbg-widget-title">热门标签</h3>
        <div class="xjpbg-article-tag-list">

    
            <a href="http://www.xjpbg.com/tag/1668" class="xjpbg-article-tag-item">css</a>
    

        </div>
    </div>
</aside>
            </div>
        </div>
    </main>


    <!-- 页脚 -->
    <footer class="xjpbg-footer">
        <div class="xjpbg-container">
            <div class="xjpbg-footer-links" style="justify-content: center;">
                
                
                <a href="http://www.xjpbg.com/22.html" class="xjpbg-footer-link">免责声明</a>
                
                <a href="http://www.xjpbg.com/23.html" class="xjpbg-footer-link">关于我们</a>
                
                <a href="http://www.xjpbg.com/24.html" class="xjpbg-footer-link">联系我们</a>
                
                <a href="http://www.xjpbg.com/25.html" class="xjpbg-footer-link">投诉删除</a>
                
                <a href="http://www.xjpbg.com/26.html" class="xjpbg-footer-link">投稿须知</a>
                
                
            </div>
            <div class="xjpbg-footer-copyright" style="text-align: center; margin-top: 20px;">
                Copyright 2026
                 新派编程网
                版权所有
                 <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank" style="color: inherit;">黔ICP备2025064387号</a>
            </div>
            <div style="text-align: center; margin-top: 10px; font-size: 12px; color: #999;">免责声明：本站信息来源于网络，仅供学习使用，版权归原作者所有，如有不愿意被转载的情况，请联系QQ：182111886，通知我们删除已转载的信息。</div>
        </div>
    </footer>

    <!-- 返回顶部按钮 -->
    <button class="xjpbg-back-to-top" id="backToTop" aria-label="返回顶部">⇧</button>

    <!-- 公共脚本 -->
    <script src="http://www.xjpbg.com/static/v6/js/common.js"></script>
    
    <div class="hide">
    </div>
</body>
</html>