在前端页面开发中，盒模型展示方式的不同会导致元素的排版效果千差万别。LESS 中，我们可以通过 box-sizing 属性的设置来达到优化盒模型的效果。
box-sizing 属性的作用和应用
box-sizing 属性设置元素的盒模型展示方式，可以分为三种取值：
- content-box：默认值，表示元素的 width 和 height 属性只包括内容的宽度和高度，不包括边框和内边距的宽度和高度。
- border-box：表示元素的 width 和 height 属性包括内容的宽度和高度以及边框和内边距的宽度和高度，即盒模型宽度为元素所指定的宽度值。
- padding-box：表示元素的 width 和 height 属性包括内容的宽度和高度以及内边距的宽度和高度。
其中，设置 border-box 属性可以实现响应式设计的优化。在实际开发中，我们经常需要通过不同媒体查询设置不同屏幕宽度下的元素宽度值，而如果不指定盒模型展示方式，那么元素的边框和内边距会导致元素宽度值的变化。而设置 border-box 属性后，即可避免这种情况发生，保证元素按照指定宽度值展示。
box-sizing 属性的优化技巧
全局设置
在 LESS 中，我们可以通过设置全局的 box-sizing 属性，以确保页面中所有元素均按照 border-box 的方式展示。
- - ----------- ----------- -
该代码将会设置所有元素的 box-sizing 属性均为 border-box。在实际应用中，减少对特定元素进行样式覆盖的情况，以确保样式的可维护性。
结合 mixin 使用
Mixin 是 LESS 中的一种功能强大的代码复用方式，结合 box-sizing 属性可以进一步优化代码的可维护性。
----------- - ----------- ----------- -
定义了一个 .border-box 样式类，其中包含了 box-sizing 属性的赋值。在需要使用 border-box 属性的元素中，只需引入该类即可。
-------- - ------------ ------ ----- -------- ----- -
以上代码将实现元素按照 width 的百分比指定宽度值展示，且盒模型宽度为其指定的宽度值，padding 属性不影响其宽度。
总结
通过 LESS 中 box-sizing 属性的优化技巧，我们可以让页面开发更加便捷、高效，且代码可维护性高。在实际开发中，可以根据不同需求结合合适的代码复用方式，以最大限度提高代码的复用率，减少代码冗余。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/65866f4ed2f5e1655d0e70c4