CSS尺寸

这个元素的宽度是100%.

设置高度和宽度

height 和 width 属性用于设置元素的高度和宽度。

height 和 width 能设置为 auto (这是默认。意味着浏览器计算高度和宽度.), 或指定的长度值, 像 px, cm,或者使用容器块的百分比.

这个元素的高度是 200 像素，宽度是 50%

div {
    height: 200px;
    width: 50%;
    background-color: powderblue;
}

这个元素的高度是100px 宽度是500px

div {
    height: 100px;
    width: 500px;
    background-color: powderblue;
}

注意: height 和 width 属性不包括padding, borders, 或者 margins; 他们设置的高度/宽度是padding, border, 和 margin内的区域。

max-width 属性用于设置元素的最大宽度.

max-width 可以指定长度值, 像 px, cm, 等。或者容器块的百分比, 或者设置为none (这是默认。意味着没有最大宽度).

当浏览器窗口小于元素的宽度时 (500px).然后浏览器添加水平滚动条到页面.

使用最大宽度代替，在这种情况下，将提高浏览器对小窗口的处理.

提示：拖动浏览器窗口小于500px宽，看一下之间的区别！

这个元素的高度是100px，最大宽度是500px

注意：max-width属性值会重写值width。

下面实例演示 <div> 使用100px宽度width和最大宽度 max-width :

div {
    max-width: 500px;
    height: 100px;
    background-color: powderblue;
}