前端必知必会-CSS布局宽度和最大宽度

---

CSS 布局 - width 和 max-width

使用 width、max-width 和 margin: auto;
块级元素始终占据可用全部宽度（尽可能向左和向右伸展）。

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

注意：当浏览器窗口小于元素的宽度时，会出现上述 <div> 的问题。然后浏览器会向页面添加水平滚动条。

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

以下是上述两个 div 的示例：

示例

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

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

---

总结

本文介绍了的CSS布局宽度和最大宽度使用，如有问题欢迎私信和评论