[分享]css中box-sizing作用？

在 CSS 中，boxsizing 属性用于决定一个元素的盒模型大小的计算方式。该属性的值可以是 contentbox 和 borderbox。contentbox 是默认值，它表示元素的宽度和高度只...

在 CSS 中，box-sizing 属性用于决定一个元素的盒模型大小的计算方式。该属性的值可以是 content-box 和 border-box。

content-box 是默认值，它表示元素的宽度和高度只包含内容区域的大小，不包括边框和内边距的大小。也就是说，如果元素定义了宽度和高度，那么实际呈现的大小还要加上边框和内边距的大小。

  .content {
            width: 200px;
            height: 100px;
            padding: 10px;
            border: 1px solid #000;
        } 

上面的代码定义了一个宽度为 200 像素，高度为 100 像素，内边距为 10 像素，边框为 1 像素的元素。如果该元素的 box-sizing 属性值为 content-box，那么实际呈现的宽度为 222 像素，高度为 122 像素，其中宽度加上了 1 像素的左边框，1 像素的右边框和 10 像素的左右内边距，高度加上了 1 像素的上边框，1 像素的下边框和 10 像素的上下内边距。

如果将该元素的 box-sizing 属性值设置为 border-box，那么元素的实际呈现大小就会包括边框和内边距的大小。即使定义了元素的宽度和高度，实际呈现的大小也会和定义的大小相同。

  .border {
            width: 200px;
            height: 100px;
            padding: 10px;
            border: 1px solid #000;
            box-sizing: border-box;
        } 

上面的代码定义的元素和前面的元素相同，但是它的 box-sizing 属性值为 border-box。因此，它的实际呈现大小是 200 像素的宽度和 100 像素的高度。包括了 1 像素的左边框，1 像素的右边框和 10 像素的左右内边距，以及 1 像素的上边框，1 像素的下边框和 10 像素的上下内边距。

在实际开发中，box-sizing 属性非常实用。特别是在设计响应式布局时，我们可以使用 border-box 让元素自适应调整大小，不会产生意外的布局偏差。