max-width是CSS属性之一，用于指定元素的最大宽度。当元素的宽度大于最大宽度时，将自动缩小该元素的宽度，以符合最大宽度。
以下是一个max-width属性的示例：
HTML代码：
<div class="box">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
CSS代码：
.box {
max-width: 500px;
background-color: blue;
color: white;
padding: 10px;
}
在这个例子中，我们设置一个div元素的max-width属性为500px，这意味着当元素的宽度超过500px时，它将自动缩小，以符合最大宽度。我们还设置了background-color、color和padding属性，以便为元素指定样式。
如果我们将上述代码添加到一个HTML页面中，将会显示一个带有蓝色背景的div元素，其最大宽度为500px。如果浏览器窗口大小调整为小于500px的宽度，该元素的宽度将自动调整为适当的大小，以符合最大宽度。
使用max-width属性可以帮助确保网站布局在不同设备上都能正确显示。
以下是一个使用max-width属性的示范实例：
HTML代码：
<div class="container">
<h1>Welcome to my website!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
<img src="example.jpg" alt="Example">
</div>
CSS代码：
.container {
max-width: 800px;
margin: 0 auto;
}h1 {
font-size: 36px;
}
p {
font-size: 18px;
line-height: 1.5;
}
img {
max-width: 100%;
height: auto;}
在这个例子中，我们设置了一个div元素的max-width属性为800px，以确保网站内容的宽度不超过800px。我们还将margin属性设置为0 auto，以使该元素水平居中对齐。
在h1和p元素的样式中，我们分别设置了font-size和line-height属性，以提高页面的可读性。在img元素的样式中，我们将max-width属性设置为100%，以确保图片的宽度不会超过其容器元素的宽度，并将height属性设置为auto，以保持图片的纵横比。
使用max-width属性可以确保网站布局在不同设备上都能正确显示，并可以防止内容过度扩展，影响可读性和用户体验。