CSS 布局 - width 和 max-width
使用 width, max-width 和 margin: auto;
正如上一章提到的；块级元素总是占用可用空间的全部宽度（向左和向右延伸到最大）。
设置块级元素的 width 会阻止它延伸到其容器的边缘。然后，你可以将 margin 设置为 auto，在容器内水平居中该元素。该元素将占用指定的宽度，剩余的空间将在两个 margin 之间平均分配。
这个 <div> 元素具有 500px 的宽度，并将 margin 设置为 auto。
注意： 上面 <div> 元素的问题发生在浏览器窗口小于元素宽度时。此时浏览器会在页面上添加一个水平滚动条。
在这种情况下，使用 max-width 代替，将改善浏览器对小窗口的处理。这对于使网站在小设备上可用非常重要。
这个 <div> 元素的最大宽度为 500px，并将 margin 设置为 auto。
提示： 将浏览器窗口宽度调整到小于 500px，以查看这两个 div 之间的区别！
下面是上面两个 div 的示例
示例
div.ex1 {
width: 500px;
margin: auto;
border: 3px solid #73AD21;
}
div.ex2 {
max-width: 500px;
margin: auto;
border: 3px solid #73AD21;
}
自己动手试一试 »
