LESS 中 box-sizing 属性的优化技巧-JavaScript中文网-JavaScript教程资源分享门户

在前端页面开发中，盒模型展示方式的不同会导致元素的排版效果千差万别。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;
}

该代码将会设置所有元素的 box-sizing 属性均为 border-box。在实际应用中，减少对特定元素进行样式覆盖的情况，以确保样式的可维护性。

结合 mixin 使用

Mixin 是 LESS 中的一种功能强大的代码复用方式，结合 box-sizing 属性可以进一步优化代码的可维护性。

.border-box {
  box-sizing: border-box;
}

定义了一个 .border-box 样式类，其中包含了 box-sizing 属性的赋值。在需要使用 border-box 属性的元素中，只需引入该类即可。

.element {
  .border-box;
  width: 100%;
  padding: 10px;
}

以上代码将实现元素按照 width 的百分比指定宽度值展示，且盒模型宽度为其指定的宽度值，padding 属性不影响其宽度。

总结

通过 LESS 中 box-sizing 属性的优化技巧，我们可以让页面开发更加便捷、高效，且代码可维护性高。在实际开发中，可以根据不同需求结合合适的代码复用方式，以最大限度提高代码的复用率，减少代码冗余。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65866f4ed2f5e1655d0e70c4