CSS 布局 - 宽度和最大宽度

使用宽度、最大宽度和边距：auto；

正如上一章提到的；块级元素始终占据可用的全部宽度（尽可能向左和向右延伸）。

设置width块级元素的形状将阻止它延伸到其容器的边缘。然后，您可以将边距设置为自动，以使元素在其容器内水平居中。该元素将占据指定的宽度，剩余空间将在两个边距之间平均分配：

此 <div> 元素的宽度为 500px，边距设置为 auto。

笔记：问题与<div>当浏览器窗口小于元素的宽度时，会发生上述情况。然后浏览器向页面添加水平滚动条。

使用max-width相反，在这种情况下，将改进浏览器对小窗口的处理。当网站可以在小型设备上使用时，这一点很重要：

此 <div> 元素的最大宽度为 500px，边距设置为 auto。

提示：将浏览器窗口大小调整到宽度小于 500 像素，以查看两个 div 之间的差异！

这是上面两个 div 的示例：

div.ex1 {
  width: 500px;
  margin: auto;
  border: 3px solid #73AD21;
}

div.ex2 {
max-width: 500px;
margin: auto;
border: 3px solid #73AD21;
}