CSS 布局 width 和 max-width

gtxyzz web技术 2022-07-06 797浏览 0

使用 width、max-width 和 margin: auto;

如上一章所述，块级元素始终占用可用的全部宽度（尽可能向左和向右伸展）。

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

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

注意：当浏览器窗口小于元素的宽度时，上面这个 <div> 会发生问题。浏览器会将水平滚动条添加到页面。

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

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

实例

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

————————————————————————

这个 div 元素的宽度是：650px;

这个 div 元素的最大宽度是：650px;

提示：将浏览器窗口拖动到小于650px的宽度，以查看这两个 div ！

继续浏览有关 css 的文章