cjh CSS 布局 - width 和 max-width
CSS 布局 - width 和 max-width
使用 width、max-width 和 margin: auto;
块级元素始终占用可用的全部宽度（尽可能向左和向右伸展）。
设置块级元素的 width 将防止其延伸到其容器的边缘。然后，您可以将外边距设置为 auto，以将元素在其容器中水平居中。元素将占用指定的宽度，剩余空间将在两个外边距之间平均分配：
这个 <div> 元素的宽度为 500px，外边距设置为 auto。
div.ex1 {
width: 500px;
margin: auto;
border: 3px solid #73AD21;
}
注意：当浏览器窗口小于元素的宽度时，上面这个 <div> 会发生问题。浏览器会将水平滚动条添加到页面。
在这种情况下，使用 max-width 可以改善浏览器对小窗口的处理。为了使网站在小型设备上可用，这一点很重要：
这个 <div> 元素的最大宽度为 500px，外边距设置为 auto。
div.ex2 {
max-width: 500px;
margin: auto;
border: 3px solid #73AD21;
}
提示：请将浏览器窗口的大小调整为小于 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>
2、本资源基本为原创，部分来源其他付费资源平台或互联网收集，如有侵权请联系及时处理。
3、本站大部分文章的截图来源实验测试环境，请不要在生产环境中随意模仿，以免带来灾难性后果。
转载请保留出处: www.zh-cjh.com珠海陈坚浩博客 » CSS 布局 - width 和 max-width
作者： cjh
| 手机扫一扫，手机上查看此文章： |
一切源于价值！
其他 模板文件不存在: ./template/plugins/comment/pc/index.htm