嗨！今天咱们来聊聊当前这个border-box的事情， 当前这个玩意儿看起来很简洁，但是呢在做网页布局的时候真实的能帮你省下良好更多脑子。 操作一波。 就是它让你的网页元素较大较小变得超级良好控制， 尤其是在当你搞一些繁杂的东西的时候，比如电商页面、管理后台哪些的。

border-box到底是个啥？简洁说一下啊！

无语了... 你看啊，以前我们给一个盒子设定较宽度为200px的时候，这只是内容区域的较宽度。然后要是再加上padding和border，那总较宽度就变较大了。有可能最后再来看体现出来比你想要的还较宽出去几十像素。

PUA。 border-box就是改变这种情况的一个CSS属性。用了它之后呢，你设定的较宽度就包括了内容、内边距和边框。这样无论加更多更少个padding或者border，元素占据空间范围都不会较高于你设定的值。

box-sizing: border-box;

要用当前这个功能很简单哦！只需要在CSS里写一句：* 好家伙... { box-sizing: border-box; }

换言之... 这一句代码就把全部元素都调整成border-box模式了。这样做有啥良好处呢？让我缓慢缓慢说...

良好处第一条：降较低脑力消耗

想象一下你正在搞一个网站首页吧，上面有各种较小卡片组件。各个卡片都需要一点padding让内容不挤到边上看起来舒服些，对吧，你看。。

如果不用border-box的话... 你每次给卡片加padding都得沉重崭新计算总较宽度是不是会较高于父容器！特别麻烦对不对？而且有时候会这是因为误差引起最后再来看一行卡片被挤到下一行去...

良好处第二条：弹性布局更平稳

当前很更多网站都是响应式设计吧？屏幕尺寸改变时自动调整布局。用fle 即便是... x或者grid做弹性布局时尤其需要注意各个子元素的实际占据空间范围。

• 没有采用border-box时：
• - 给子元素加padding会作用于总较宽度计算
• - 有可能引起换行或者滚动条出现
• - 需要额外考虑父容器overflow属性处理溢出内容

我们都经历过... 采用border-box后： - padding和border包含在width/height内部计算完毕! - 不用担心额外空间范围作用于整体结构平稳性~*~ﾉ:･ﾟ✧｡✧｡★｡:ﾟ✧:･ﾟ✧:･ﾟ✧.｡..｡.:.｡.:˙̩˙̩˙̩˙̩˙̩˙̩˙̩˙̩˙̩˙̩...'´¯*)♥.*´¯)♥.´¯`*)♥. ."

html - 特别是配合CSS Grid的时候超级方便！ .grid-container { display: grid; grid-template-columns: 就这？ repeat/4)); gap: 20px; } .card { padding: 15px; /*不会作用于列数*/ } 这样无论屏幕更多较大较小卡片之间保持均匀分布～

`