box是什么意思(前端CSS的盒子)_生活百科

admin

2023-09-04 10:49:22

box-sizing是什么？

框尺寸是定义元素的宽度和高度范围的属性。简单来说，我们在开发自适应布局的时候，经常会出现DIV的边框，这就导致了DIV换行。

从上图可以看出，当我们将两个div的宽度设置为200时，在边框上加2px无法遇到同一条水平线，只好换行。

当我们将parent border body属性设置为404，即包含各自div的两个边框为1px像素时，我们可以满足水平对齐。

我们可以设置框大小：border-box属性。意味着边框和内边距包含在我们设置的200px单位中。因此，400像素的父边框可以满足，而200像素的子边框是水平对齐的。

CSS在前端的框定大小属性可以帮助我们根据设计图快速开发页面布局，而不是填充固定宽度后再添加边框。有了这个属性，我们就可以减少设置宽度和高度的长度单位来计算加减边框和反复修改值的麻烦步骤，从而大大提升我们页面开发的效率。