W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
 

CSS - 宽度和最大宽度



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

如前一章所提到的,块元素总是占据可用的宽度(尽可能延伸到左边和右边)。

设置块元素的宽度将阻止它伸出到容器的边缘。然后,可以将边距设置为自动,将容器内元素的水平中心化。元素将占用指定的宽度,剩余的空间将在两个边距之间平分:

This <div> element has a width of 500px, and margin set to auto.

注意: 以上<div>问题发生时,浏览器窗口小于该元素的宽度。然后浏览器添加水平滚动条到页面。

使用 max-width 代替,在这种情况下,将提高浏览器的处理小窗口。使网站适用于小型设备是很重要的:

This <div> element has a max-width of 500px, and margin set to auto.

提示: 调整浏览器窗口的大小小于500px宽,看一下之间的区别!

这里是两个上面div的实例:

Example

div.ex1 {
    width: 500px;
    margin: auto;
    border: 3px solid #73AD21;
}

div.ex2 {
    max-width: 500px;
    margin: auto;
    border: 3px solid #73AD21;
}
尝试一下 »