css零到一中级教程002：CSS 布局 - width 和 max-width

最新推荐文章于 2024-07-08 15:35:46 发布

慕容屠苏

最新推荐文章于 2024-07-08 15:35:46 发布

阅读量306

点赞数

分类专栏： css零到一文章标签： css html 前端

本文链接：https://blog.csdn.net/kerryqpw/article/details/123677563

版权

css零到一专栏收录该内容

98 篇文章 2 订阅 ¥49.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍了CSS布局中如何使用width和max-width配合margin: auto实现块级元素的居中布局，并强调了在小窗口下使用max-width的重要性，提供了一个实例以帮助理解。

摘要由CSDN通过智能技术生成

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

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

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

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

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

提示：请将浏览器窗口的大小调整为小于 500 像素，以查看两个 div 之间的区别！

这是上面两个 div 的例子：

实例

<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
  width: 500px;
  margin: auto;
  border: 3px solid #73AD21;
}

div.ex2 {
  max-width: 500px;
  margin: auto;
  border: 3px solid #73AD21;
}
</style>
</head>
<body>

<h2>CSS Max-width</h2>

<div class="ex1">这个 div 元素的宽度是：500px;</div>
<br>

<div class="ex2">这个 div 元素的最大宽度是：500px;</div>

<p><b>提示：</b>将浏览器窗口拖动到小于500px的宽度，以查看这两个 div ！</p>

</body>
</html>