CSS 布局 - 宽度和最大宽度
使用 width、max-width 和 margin: auto;
如上一章所述，块级元素总是占用所有可用宽度（向左和向右尽可能地延伸）。
设置块级元素的 width 将阻止其延伸到其容器的边缘。然后，您可以将边距设置为 auto，以在容器内水平居中元素。元素将占用指定的宽度，剩余空间将平均分配到两个边距之间
此 <div> 元素的宽度为 500px，边距设置为 auto。
注意： 上述 <div> 的问题出现在浏览器窗口小于元素宽度时。浏览器随后会在页面上添加一个水平滚动条。
在这种情况下，使用 max-width 代替，将改善浏览器对小窗口的处理。这在使网站在小型设备上可用时非常重要
此 <div> 元素的最大宽度为 500px，边距设置为 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;
}
自己试试 »
