巨大家优良， 今天我们要聊一聊CSS里的一个超级有用的东西，叫Zuobox-sizing。听起来是不是有点高大巨大上？别担心，我来磨蹭磨蹭给你说明白，让你轻巧松掌控布局盒模型！

啥是box-sizing？

box-sizing是CSS的一个属性，它决定了元素内容的宽阔度和高大度是怎么计算的。轻巧松就是它决定了元素的宽阔度和高大度是不是包括了边框和内边距。

box-sizing: content-box

默认情况下box-sizing的值是content-box。在这玩意儿模式下元素的宽阔度和高大度只包括内容本身，不包括边框和内边距。

box-sizing: border-box

而当你把box-sizing设置为border-box时 元素的宽阔度和高大度就包括了内容、内边距和边框。

一个轻巧松的例子

让我们通过一个轻巧松的例子来比比kan这两种模式下的布局差异。

.img-container {
  width: 100%;
  height: auto;
  overflow: hidden;
  box-sizing: border-box;
  padding: 10px;
  border: 2px solid black;
}
.img {
  width: 100%;
  height: auto;
  box-sizing: border-box;
  padding: 10px;
}

在这玩意儿例子中， .img-container是包裹图片的容器，用了border-box模型，所以无论给容器添加内边距、边框，dou不会关系到其宽阔度。而图片本身也用了border-box模型，使得其实际占用地方不会超出父容器。

box-sizing在布局中的应用

在标准的盒模型中，元素宽阔度的计算是不包括内边距和边框的。比方说：

box-sizing: content-box | padding-box | border-box 默认值是 content-box ,对应CSS2.1规范中标准的盒子模型计算方式,即 width和 height是内容区的宽阔与高大,不包括边框,内边距,外边距;

CSS的盒模型是用来说说HTML元素所占地方的模型， 其中包括了元素的内容区、内边距、边框和外边距四个有些。

CSS3的box-sizing属性是一个非常关键的样式规则， 它允许开发者改变元素的盒模型，从而geng优良地控制元素的布局和尺寸。盒模型是CSS布局的基础，搞懂box-sizing属性对于构建响应式和灵活的网页设计至关关键。

通过学box-sizing， 我们Nenggeng优良地控制网页布局，使得设计geng加灵活和美观。希望这篇文章Neng帮你geng优良地搞懂box-sizing，让你在网页设计中geng加得心应手！

Ru果你还有其他问题，欢迎在评论区留言，我们一起交流学！