用 width 与 height 这两个样式属性可以设置元素的宽度与高度，min-width，min-height 可以设置元素最小的宽度与最小的高度，max-width 与 max-height 设置的是元素的最大宽度与最大的高度。

min-height

在这个 #app 元素的样式里可以测试一下这些样式属性。先试一下 min-height，它可以设置元素的最小的高度，把它的值设置成固定的 260px，这样无论怎样这个元素的高度都至少是 260 像素。

调整一下浏览器窗口的宽度，窗口宽度缩小到一定程度的时候，段落文字会从两行变成三行，这个 #app 元素的高度现在会超过 260 像素，这时这个元素的高度会自动做出调整，适应变化后的新的高度。

max-width

再调整一下浏览器窗口的宽度，现在页面内容会随着窗口的宽度的变化而变化。现在我们在这个 #app 元素上，用 max-width 设置一下元素的最大宽度，把它的值设置成 960 像素。

然后再调整一下浏览器窗口的宽度，这次你会发现，宽度达到一定程度的时候，#app 这个元素的宽度就不会再改变了。因为现在在它上面用了 max-width 这个样式属性，设置了它的最大被允许的宽度为 960 像素，

width & height

用 width 与 height 可以设置元素的宽度与高度，注释或删除掉上面用的 min-height 还有 max-width，我们再用一个 width 样式属性设置一下这个元素的宽度，比如让它等于 300px。下面再用一个 height 样式属性设置一下元素的高度，比如 500 像素。

现在这个元素的宽度还有高度就会是固定的值了，无论浏览器窗口的尺寸如何变化，都不会影响到这个元素的尺寸。

box-sizing

选中这个 #app 元素，然后观察一下计算样式里的这个元素的模型，这里显示这个元素的内容的宽度是 300，高度是 500，正是我们在样式表里用 width 还有 height 样式属性给这个元素设置的宽度与高度。

这个容器的实际大小应该是这个内容的大小，再加上容器的内边距，边框还有外边距。

用 box-sizing 这个样式属性可以控制元素尺寸的计算方式，默认元素的 box-sizing 的值是 content-box，这样在元素上设置的宽度与高度是给元素包装的内容设置的，元素最终的尺寸需要加上元素的内边距还有边框的宽度。

如果我们把这个元素的 box-sizing 设置成 border-box，这样在元素里面设置的宽度与高度就是这个元素的最终尺寸。在元素选项卡这里，鼠标放在这个元素的上面，显示现在它的宽度是 300 像素，高度是 500 像素。

在计算样式的模型这里再观察一下，现在这个元素的内容的尺寸是 236 x 433，加上内边距还有边框的宽度，最终的结果就是 300 x 500 。