CSS 基础（009_Max-width）

最新推荐文章于 2024-09-18 21:38:12 发布

柯南道尔2606

最新推荐文章于 2024-09-18 21:38:12 发布

阅读量317

点赞数

分类专栏： CSS 文章标签： css

CSS 专栏收录该内容

42 篇文章 0 订阅

订阅专栏

原始网址：http://www.w3schools.com/css/css_max-width.asp

翻译：

CSS Layout - width and max-width

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

在之前的章节中提到过，块级元素总是占据整行（向行左、右无限延伸）。
对块级元素设置 width 会阻止它向父级容器的边界延伸。接下来，为了让元素在父级容器内居中显示，我们可以将 margins 设置为 auto 。元素将会占据指定宽度，剩余空间将在两个 margins（margin-left 和 margin-right）之间均分：
CSS Layout

<!DOCTYPE html>
<html>
    <head>
        <style>
            div {
                border-color: #4caf50 !important;
                border-width: 3px;
                border-style: solid;
                width: 600px;
                margin: auto;
            }
        </style>
    </head>
    <body>
        <div>This &lt;div&gt; element has a width of 600px, and margin set to auto.</div>
    </body>
</html>

注意：当浏览器窗口小于元素的宽度时，以上 <div> 会出现问题。然而，浏览器会在页面上增加一个水平滚动条。
在此情况下，使用 max-width 取代 width 将会改善浏览器处理小窗口的方案。这对构建一个适合在小设备上运行的站点是很重要的：
CSS Layout

<!DOCTYPE html>
<html>
    <head>
        <style>
            div {
                border-color: #4caf50 !important;
                border-width: 3px;
                border-style: solid;
                max-width: 600px;
                margin: auto;
            }
        </style>
    </head>
    <body>
        <div>This &lt;div&gt; element has a max-width of 600px, and margin set to auto.</div>
    </body>
</html>